import { useState } from 'react';
import { Cable, Code2, Cpu, FolderOpen, Link, List, Zap } from 'lucide-react';
import MediaBrowser from './MediaBrowser';

interface IECPageProps {
  config: any;
  setConfig: (config: any) => void;
}

export default function IECPage({ config, setConfig }: IECPageProps) {
  const [showMediaBrowser, setShowMediaBrowser] = useState(false);
  const [driveRomBrowsingKey, setDriveRomBrowsingKey] = useState<string | null>(null);
  const updateSetting = (path: string[], value: any) => {
    const newConfig = JSON.parse(JSON.stringify(config));
    let current = newConfig;

    for (let i = 0; i < path.length - 1; i++) {
      current = current[path[i]];
    }

    current[path[path.length - 1]] = value;
    setConfig(newConfig);
  };

  const iec = config.iec || {};

  return (
    <div className="p-4 space-y-4">
      <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Cable className="w-4 h-4" /> IEC Settings</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <div className="p-4 flex items-center justify-between">
          <label className="text-sm text-neutral-500">IEC Enabled</label>
          <button
            onClick={() => updateSetting(['iec', 'enabled'], iec.enabled ? 0 : 1)}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              iec.enabled ? 'bg-blue-600' : 'bg-neutral-300'
            }`}
          >
            <div
              className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                iec.enabled ? 'translate-x-6' : 'translate-x-0.5'
              }`}
            />
          </button>
        </div>

        <div className="p-4 flex items-center justify-between">
          <label className="text-sm text-neutral-500">VIC-20 Mode</label>
          <button
            onClick={() => updateSetting(['iec', 'vic20_mode'], iec.vic20_mode ? 0 : 1)}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              iec.vic20_mode ? 'bg-blue-600' : 'bg-neutral-300'
            }`}
          >
            <div
              className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                iec.vic20_mode ? 'translate-x-6' : 'translate-x-0.5'
              }`}
            />
          </button>
        </div>

        <div className="p-4 flex items-center justify-between">
          <label className="text-sm text-neutral-500">VDrive Mode</label>
          <button
            onClick={() => updateSetting(['iec', 'vdrive_mode'], iec.vdrive_mode ? 0 : 1)}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              iec.vdrive_mode ? 'bg-blue-600' : 'bg-neutral-300'
            }`}
          >
            <div
              className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                iec.vdrive_mode ? 'translate-x-6' : 'translate-x-0.5'
              }`}
            />
          </button>
        </div>

        <div className="p-4">
          <label className="text-sm text-neutral-500 block mb-2">Boot Disk</label>
          <div className="flex gap-2">
            <input
              type="text"
              value={iec.boot_disk || ''}
              onChange={(e) => updateSetting(['iec', 'boot_disk'], e.target.value)}
              className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
            />
            <button
              onClick={() => setShowMediaBrowser(true)}
              className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
              title="Browse files"
            >
              <FolderOpen className="w-5 h-5" />
            </button>
          </div>
        </div>

      {showMediaBrowser && (
        <MediaBrowser
          currentPath={iec.boot_disk || '/'}
          onSelect={(path) => {
            updateSetting(['iec', 'boot_disk'], path);
            setShowMediaBrowser(false);
          }}
          onClose={() => setShowMediaBrowser(false)}
        />
      )}
      </div>

      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Cpu className="w-4 h-4" /> Drive ROMs</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <div className="p-4 flex items-center justify-between">
          <label className="text-sm text-neutral-500">Enabled</label>
          <button
            onClick={() => {
              const newConfig = JSON.parse(JSON.stringify(config));
              const dr = newConfig.iec.drive_rom ?? {};
              const current = dr.enabled ?? dr.auto ?? 0;
              dr.enabled = current ? 0 : 1;
              delete dr.auto;
              newConfig.iec.drive_rom = dr;
              setConfig(newConfig);
            }}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              (iec.drive_rom?.enabled ?? iec.drive_rom?.auto) ? 'bg-blue-600' : 'bg-neutral-300'
            }`}
          >
            <div
              className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                (iec.drive_rom?.enabled ?? iec.drive_rom?.auto) ? 'translate-x-6' : 'translate-x-0.5'
              }`}
            />
          </button>
        </div>
        {(['default', 'd64', 'd71', 'd81'] as const).map((key) => (
          <div key={key} className="p-4">
            <label className="text-sm text-neutral-500 block mb-2">
              {key === 'default' ? 'Default' : key.toUpperCase()}
            </label>
            <div className="flex gap-2">
              <input
                type="text"
                value={iec.drive_rom?.[key] || ''}
                onChange={(e) => updateSetting(['iec', 'drive_rom', key], e.target.value)}
                className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
              />
              <button
                onClick={() => setDriveRomBrowsingKey(key)}
                className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
                title="Browse files"
              >
                <FolderOpen className="w-5 h-5" />
              </button>
            </div>
          </div>
        ))}
      </div>

      {driveRomBrowsingKey && (
        <MediaBrowser
          currentPath={iec.drive_rom?.[driveRomBrowsingKey] || '/'}
          onSelect={(path) => {
            updateSetting(['iec', 'drive_rom', driveRomBrowsingKey], path);
            setDriveRomBrowsingKey(null);
          }}
          onClose={() => setDriveRomBrowsingKey(null)}
        />
      )}

      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><List className="w-4 h-4" /> Directory Settings</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        {Object.entries(iec.directory || {}).map(([key, value]) => (
          <div key={key} className="p-4 flex items-center justify-between">
            <label className="text-sm text-neutral-500">
              {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </label>
            {typeof value === 'number' ? (
              <button
                onClick={() => updateSetting(['iec', 'directory', key], value ? 0 : 1)}
                className={`relative w-12 h-6 rounded-full transition-colors ${
                  value ? 'bg-blue-600' : 'bg-neutral-300'
                }`}
              >
                <div
                  className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                    value ? 'translate-x-6' : 'translate-x-0.5'
                  }`}
                />
              </button>
            ) : (
              <input
                type="number"
                value={value}
                onChange={(e) => updateSetting(['iec', 'directory', key], parseInt(e.target.value))}
                className="w-24 px-3 py-1 border border-neutral-300 rounded-lg text-right"
              />
            )}
          </div>
        ))}
      </div>

      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Zap className="w-4 h-4" /> Hardware Fastloaders</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <div className="p-3 bg-neutral-50">
          <h3 className="text-xs text-neutral-600">Serial</h3>
        </div>
        {Object.entries(iec.fastloaders?.hardware?.serial || {}).map(([key, value]) => (
          <div key={key} className="p-4 flex items-center justify-between">
            <label className="text-sm text-neutral-500">
              {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </label>
            <button
              onClick={() => updateSetting(['iec', 'fastloaders', 'hardware', 'serial', key], value ? 0 : 1)}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                value ? 'bg-blue-600' : 'bg-neutral-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                  value ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>
        ))}

        <div className="p-3 bg-neutral-50">
          <h3 className="text-xs text-neutral-600">Parallel</h3>
        </div>
        {Object.entries(iec.fastloaders?.hardware?.parallel || {}).map(([key, value]) => (
          <div key={key} className="p-4 flex items-center justify-between">
            <label className="text-sm text-neutral-500">
              {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </label>
            <button
              onClick={() => updateSetting(['iec', 'fastloaders', 'hardware', 'parallel', key], value ? 0 : 1)}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                value ? 'bg-blue-600' : 'bg-neutral-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                  value ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>
        ))}
      </div>

      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Code2 className="w-4 h-4" /> Software Fastloaders</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        {Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => (
          <div key={key} className="p-4 flex items-center justify-between">
            <label className="text-sm text-neutral-500">
              {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </label>
            <button
              onClick={() => updateSetting(['iec', 'fastloaders', 'software', key], value ? 0 : 1)}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                value ? 'bg-blue-600' : 'bg-neutral-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                  value ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>
        ))}
      </div>

      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Link className="w-4 h-4" /> Chainloaders</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        {Object.entries(iec.chainloaders || {}).map(([key, value]) => (
          <div key={key} className="p-4 flex items-center justify-between">
            <label className="text-sm text-neutral-500">
              {key.toUpperCase()}
            </label>
            <button
              onClick={() => updateSetting(['iec', 'chainloaders', key], value ? 0 : 1)}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                value ? 'bg-blue-600' : 'bg-neutral-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
                  value ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}