import { ArrowLeft, Eye } from "lucide-react";
import { useNavigate } from "react-router";
import { useState } from "react";

export default function ParameterConfiguration() {
  const navigate = useNavigate();
  const [transmissionVoltage, setTransmissionVoltage] = useState("1500V");
  const [transmissionCurrent, setTransmissionCurrent] = useState("10A");
  const [pulseWidthOptions] = useState([
    { value: "0.25s", checked: true },
    { value: "0.5s", checked: true },
    { value: "1s", checked: true },
    { value: "2s", checked: true },
    { value: "4s", checked: true },
    { value: "8s", checked: true },
    { value: "16s", checked: true },
    { value: "32s", checked: true },
    { value: "64s", checked: true },
  ]);
  const [waveformOptions] = useState([
    { value: "0+0-", checked: true },
    { value: "+0-0", checked: true },
    { value: "+-", checked: true },
  ]);
  const [samplingRateOptions] = useState([
    { value: "50Hz", checked: true },
    { value: "60Hz", checked: true },
    { value: "100Hz", checked: true },
    { value: "1000Hz", checked: true },
  ]);

  return (
    <div className="p-6">
      {/* Page Header */}
      <div className="mb-6">
        <div className="flex items-center gap-4 mb-2">
          <button 
            onClick={() => navigate(-1)}
            className="p-2 rounded hover:bg-gray-100 transition-colors"
            style={{ color: 'rgba(0, 0, 0, 0.65)' }}
          >
            <ArrowLeft size={20} />
          </button>
          <h2 className="text-2xl font-semibold">参数配置</h2>
        </div>
        <p className="text-sm ml-12" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>配置设备型号的详细参数</p>
      </div>

      {/* Model Info Card */}
      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">型号信息</h3>
        <div className="grid grid-cols-3 gap-x-12 gap-y-6">
          <div>
            <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>适配型号</div>
            <div className="font-medium">GD30 地质探测仪</div>
          </div>
          <div>
            <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>当前配置版本</div>
            <div style={{ color: '#1890FF' }}>v1.2.0</div>
          </div>
          <div>
            <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>最后更新时间</div>
            <div style={{ color: 'rgba(0, 0, 0, 0.65)' }}>2024-03-01 10:30</div>
          </div>
        </div>
      </div>

      {/* Transmission Parameters Card */}
      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">发射参数</h3>
        <div className="grid grid-cols-2 gap-x-12 gap-y-6">
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              最大发射电压
            </label>
            <select 
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
              value={transmissionVoltage}
              onChange={(e) => setTransmissionVoltage(e.target.value)}
            >
              <option>500V</option>
              <option>800V</option>
              <option>1000V</option>
              <option>1200V</option>
              <option>1500V</option>
            </select>
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              最大发射电流
            </label>
            <select 
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
              value={transmissionCurrent}
              onChange={(e) => setTransmissionCurrent(e.target.value)}
            >
              <option>2A</option>
              <option>5A</option>
              <option>8A</option>
              <option>10A</option>
              <option>15A</option>
            </select>
          </div>
          <div className="col-span-2">
            <label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              发射脉宽
            </label>
            <div className="flex flex-wrap gap-2">
              {pulseWidthOptions.map((option) => (
                <label 
                  key={option.value}
                  className="px-4 py-2 rounded border cursor-pointer transition-colors"
                  style={{ 
                    borderColor: option.checked ? '#1890FF' : '#D9D9D9',
                    backgroundColor: option.checked ? '#E6F7FF' : '#fff',
                    color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
                  }}
                >
                  <input type="checkbox" className="hidden" checked={option.checked} readOnly />
                  {option.value}
                </label>
              ))}
            </div>
          </div>
          <div className="col-span-2">
            <label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              发射波形
            </label>
            <div className="flex flex-wrap gap-2">
              {waveformOptions.map((option) => (
                <label 
                  key={option.value}
                  className="px-4 py-2 rounded border cursor-pointer transition-colors"
                  style={{ 
                    borderColor: option.checked ? '#1890FF' : '#D9D9D9',
                    backgroundColor: option.checked ? '#E6F7FF' : '#fff',
                    color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
                  }}
                >
                  <input type="checkbox" className="hidden" checked={option.checked} readOnly />
                  {option.value}
                </label>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Acquisition Parameters Card */}
      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">采集参数</h3>
        <div className="grid grid-cols-2 gap-x-12 gap-y-6">
          <div className="col-span-2">
            <label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              采样率
            </label>
            <div className="flex flex-wrap gap-2">
              {samplingRateOptions.map((option) => (
                <label 
                  key={option.value}
                  className="px-4 py-2 rounded border cursor-pointer transition-colors"
                  style={{ 
                    borderColor: option.checked ? '#1890FF' : '#D9D9D9',
                    backgroundColor: option.checked ? '#E6F7FF' : '#fff',
                    color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
                  }}
                >
                  <input type="checkbox" className="hidden" checked={option.checked} readOnly />
                  {option.value}
                </label>
              ))}
            </div>
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              支持通道数
            </label>
            <input 
              type="number"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="32"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              迭代次数范围
            </label>
            <div className="flex items-center gap-2">
              <input 
                type="number"
                className="flex-1 px-3 py-2 border rounded"
                style={{ borderColor: '#D9D9D9' }}
                defaultValue="1"
              />
              <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>-</span>
              <input 
                type="number"
                className="flex-1 px-3 py-2 border rounded"
                style={{ borderColor: '#D9D9D9' }}
                defaultValue="256"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Network Parameters Card */}
      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">网络参数</h3>
        <div className="grid grid-cols-2 gap-x-12 gap-y-6">
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              WiFi SSID
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="GD30_Device"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              WiFi密码
            </label>
            <input 
              type="password"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="12345678"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              默认IP地址
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="192.168.1.100"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              子网掩码
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="255.255.255.0"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              默认网关
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="192.168.1.1"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
              DNS服务器
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              defaultValue="8.8.8.8"
            />
          </div>
        </div>
      </div>

      {/* Action Bar */}
      <div 
        className="flex items-center justify-end gap-3 p-4 bg-white rounded-lg sticky bottom-0"
        style={{ boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.05)' }}
      >
        <button 
          className="px-6 py-2 rounded"
          style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
        >
          重置默认
        </button>
        <button 
          className="px-6 py-2 rounded flex items-center gap-2"
          style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
        >
          <Eye size={16} />
          预览配置
        </button>
        <button 
          className="px-6 py-2 rounded text-white"
          style={{ backgroundColor: '#1890FF' }}
        >
          下发配置
        </button>
      </div>
    </div>
  );
}