import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { SettingsInput } from './ui/settings-input';
import { X, Printer, HardDrive, Network, Box, FolderOpen } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import type { Swiper as SwiperType } from 'swiper';
import 'swiper/css';
import { toast } from 'sonner';
import { fileExists, getFileContents, joinPath, stat } from '../webdav';
import MediaBrowser from './MediaBrowser';
import MediaSet, { mediaSetEntryUrl, type MediaSetEntry } from './MediaSet';

export interface Device {
  id: string;
  number: string;
  type: 'printer' | 'drive' | 'network' | 'other' | 'meatloaf';
  name?: string;
  enabled: boolean | number;
  url?: string;
  mode?: number;
  physical?: boolean;
  physicalModel?: string;
}

interface DeviceDetailOverlayProps {
  devices: Device[];
  initialIndex: number;
  config: any;
  setConfig: (config: any) => void;
  onClose: () => void;
  onIndexChange?: (index: number) => void;
}

function DeviceIcon({ device }: { device: Device }) {
  const cls = `w-6 h-6`;
  switch (device.type) {
    case 'printer': return <Printer className={cls} />;
    case 'drive':   return <HardDrive className={cls} />;
    case 'network': return <Network className={cls} />;
    default:        return <Box className={cls} />;
  }
}

// ── Per-device slide content ─────────────────────────────────────────────────

interface DeviceCardProps {
  device: Device;
  config: any;
  setConfig: (c: any) => void;
  isActive: boolean;
  onBrowsingChange?: (browsing: boolean) => void;
}

function DeviceCard({ device, config, setConfig, isActive, onBrowsingChange }: DeviceCardProps) {
  const [browsingField, setBrowsingField] = useState<'url' | 'base_url' | 'cache' | null>(null);
  const [mediaSetFiles, setMediaSetFiles] = useState<MediaSetEntry[] | null>(null);
  const detectTokenRef = useRef(0);

  // Notify parent when browser opens/closes so it can lock slide scroll.
  useEffect(() => {
    onBrowsingChange?.(browsingField !== null);
  }, [browsingField, onBrowsingChange]);

  // Close any open browser when swiped away.
  useEffect(() => {
    if (!isActive) setBrowsingField(null);
  }, [isActive]);

  const getDevicePath = (): string[] => ['devices', 'iec', device.number];

  const getDeviceData = () => {
    let current: any = config;
    for (const key of getDevicePath()) current = current?.[key];
    return current || {};
  };

  const deviceData = getDeviceData();

  const updateDeviceSetting = (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);
  };

  useEffect(() => {
    ++detectTokenRef.current;
    setMediaSetFiles(null);
  }, [device.number]);

  useEffect(() => {
    if (Array.isArray(deviceData.media_set) && deviceData.media_set.length > 1) {
      setMediaSetFiles(deviceData.media_set as MediaSetEntry[]);
    }
  }, [deviceData.media_set]);

  const detectMediaSet = async (url: string) => {
    const token = ++detectTokenRef.current;
    setMediaSetFiles(null);
    const match = url.match(/^(.+?)(\d+)(\.[^.]+)$/);
    if (!match) return;
    const [, prefix, , ext] = match;
    const candidates: string[] = [];
    for (let i = 1; i <= 10; i++) candidates.push(`${prefix}${i}${ext}`);
    const flags = await Promise.all(candidates.map(f => stat(f).then(r => r !== null).catch(() => false)));
    if (detectTokenRef.current !== token) return;
    const found = candidates.filter((_, i) => flags[i]);
    setMediaSetFiles(found.length > 1 ? found : null);
  };

  const switchMedia = (file: string) => updateDeviceSetting([...getDevicePath(), 'url'], file);

  const isOutsideBase = (url: string, baseUrl: string): boolean => {
    if (!baseUrl || !url.startsWith('/')) return false;
    const nb = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
    return url !== baseUrl && !url.startsWith(nb);
  };

  const clearBaseAndCache = (dev: any) => {
    if ('base_url' in dev) dev.base_url = '';
    if ('cache' in dev) dev.cache = '';
  };

  const handleFileSelect = async (selectedPath: string) => {
    const devicePath = getDevicePath();
    const selExt = selectedPath.split('.').pop()?.toLowerCase() ?? '';
    if (selExt === 'lst' || selExt === 'vms') {
      const isVms = selExt === 'vms';
      try {
        const text = await (await getFileContents(selectedPath)).text();
        const dir = selectedPath.split('/').slice(0, -1).join('/') || '/';
        const candidates: MediaSetEntry[] = text.split('\n')
          .map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith('#'))
          .map(l => {
            if (isVms) {
              const comma = l.indexOf(',');
              if (comma > 0) {
                const url = l.slice(0, comma).trim();
                const name = l.slice(comma + 1).trim();
                const resolved = url.startsWith('/') ? url : joinPath(dir, url);
                return name ? { url: resolved, name } : resolved;
              }
            }
            return l.startsWith('/') ? l : joinPath(dir, l);
          });
        if (candidates.length === 0) { toast.error('Swap list is empty'); return; }
        const existsArr = await Promise.all(candidates.map(e => fileExists(mediaSetEntryUrl(e)).catch(() => false)));
        const files = candidates.filter((_, i) => existsArr[i]);
        if (files.length === 0) { toast.error('No files in swap list exist on device'); return; }
        if (files.length < 2) { toast.error('A media set needs more than one item'); return; }
        if (files.length < candidates.length)
          toast.warning(`${candidates.length - files.length} missing file(s) skipped from swap list`);
        const newConfig = JSON.parse(JSON.stringify(config));
        let dev = newConfig;
        for (const k of devicePath) dev = dev[k];
        if (isOutsideBase(mediaSetEntryUrl(files[0]), dev.base_url || '')) clearBaseAndCache(dev);
        dev.url = mediaSetEntryUrl(files[0]);
        dev.media_set = files;
        setConfig(newConfig);
      } catch (e: any) {
        toast.error(`Failed to read swap list: ${e?.message ?? e}`);
      }
    } else {
      const newConfig = JSON.parse(JSON.stringify(config));
      let dev = newConfig;
      for (const k of devicePath) dev = dev[k];
      if (isOutsideBase(selectedPath, dev.base_url || '')) clearBaseAndCache(dev);
      dev.url = selectedPath;
      delete dev.media_set;
      setConfig(newConfig);
      void detectMediaSet(selectedPath);
    }
  };

  return (
    <>
      <div className="p-4 space-y-5">
        <div className="space-y-4">
          {!device.physical && (
            <div className="flex items-center justify-between">
              <label className="text-sm text-neutral-500">Enabled</label>
              <button
                onClick={() => updateDeviceSetting([...getDevicePath(), 'enabled'], deviceData.enabled ? 0 : 1)}
                className={`relative w-12 h-6 rounded-full transition-colors ${deviceData.enabled ? 'bg-blue-600' : 'bg-neutral-300'}`}
              >
                <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${deviceData.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
              </button>
            </div>
          )}

          <div>
            <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Device Name</label>
            <SettingsInput
              type="text"
              value={deviceData.name || device.name || `Device ${device.number}`}
              onCommit={(v) => updateDeviceSetting([...getDevicePath(), 'name'], v)}
              onClear={() => updateDeviceSetting([...getDevicePath(), 'name'], '')}
              className="px-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm"
              containerClassName="w-full"
            />
          </div>

          {!device.physical && <>
            <div>
              <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Base URL</label>
              <div className="flex gap-2">
                <SettingsInput
                  type="text"
                  value={deviceData.base_url ?? ''}
                  onCommit={(v) => updateDeviceSetting([...getDevicePath(), 'base_url'], v)}
                  onClear={() => updateDeviceSetting([...getDevicePath(), 'base_url'], '')}
                  containerClassName="flex-1"
                  className="px-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm"
                />
                <button
                  onClick={() => setBrowsingField('base_url')}
                  className="px-3 py-2.5 bg-neutral-100 hover:bg-neutral-200 rounded-xl transition-colors"
                >
                  <FolderOpen className="w-5 h-5 text-neutral-500" />
                </button>
              </div>
            </div>

            <div>
              <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">URL</label>
              <div className="flex gap-2">
                <SettingsInput
                  type="text"
                  value={deviceData.url ?? ''}
                  onCommit={(newUrl) => {
                    const devicePath = getDevicePath();
                    const newConfig = JSON.parse(JSON.stringify(config));
                    let dev = newConfig;
                    for (const k of devicePath) dev = dev[k];
                    if (isOutsideBase(newUrl, dev.base_url || '')) clearBaseAndCache(dev);
                    dev.url = newUrl;
                    delete dev.media_set;
                    setConfig(newConfig);
                    if (newUrl) void detectMediaSet(newUrl);
                  }}
                  onClear={() => {
                    const devicePath = getDevicePath();
                    const newConfig = JSON.parse(JSON.stringify(config));
                    let dev = newConfig;
                    for (const k of devicePath) dev = dev[k];
                    delete dev.url;
                    delete dev.media_set;
                    setConfig(newConfig);
                    ++detectTokenRef.current;
                    setMediaSetFiles(null);
                  }}
                  containerClassName="flex-1"
                  className="px-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm"
                />
                <button
                  onClick={() => setBrowsingField('url')}
                  className="px-3 py-2.5 bg-neutral-100 hover:bg-neutral-200 rounded-xl transition-colors"
                >
                  <FolderOpen className="w-5 h-5 text-neutral-500" />
                </button>
              </div>
              {mediaSetFiles && (
                <div className="mt-3">
                  <MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
                </div>
              )}
            </div>

            {(deviceData.cache !== undefined ||
              (deviceData.base_url ?? '').includes('://') ||
              (deviceData.url ?? '').includes('://')) && (
              <div>
                <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Cache</label>
                <div className="flex gap-2">
                  <SettingsInput
                    type="text"
                    value={deviceData.cache ?? ''}
                    onCommit={(v) => updateDeviceSetting([...getDevicePath(), 'cache'], v)}
                    onClear={() => updateDeviceSetting([...getDevicePath(), 'cache'], '')}
                    containerClassName="flex-1"
                    className="px-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm"
                  />
                  <button
                    onClick={() => setBrowsingField('cache')}
                    className="px-3 py-2.5 bg-neutral-100 hover:bg-neutral-200 rounded-xl transition-colors"
                  >
                    <FolderOpen className="w-5 h-5 text-neutral-500" />
                  </button>
                </div>
              </div>
            )}
          </>}

          {deviceData.mode !== undefined && (
            <div className="flex items-center justify-between">
              <label className="text-sm text-neutral-500">Write Enabled</label>
              {device.physical
                ? <span className={`text-sm ${(deviceData.mode ?? 0) === 1 ? 'text-blue-600' : 'text-neutral-400'}`}>
                    {(deviceData.mode ?? 0) === 1 ? 'Yes' : 'No'}
                  </span>
                : <button
                    onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], (deviceData.mode ?? 0) === 0 ? 1 : 0)}
                    className={`relative w-12 h-6 rounded-full transition-colors ${(deviceData.mode ?? 0) === 1 ? 'bg-blue-600' : 'bg-neutral-300'}`}
                  >
                    <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${(deviceData.mode ?? 0) === 1 ? 'translate-x-6' : 'translate-x-0.5'}`} />
                  </button>
              }
            </div>
          )}

          {deviceData.baud !== undefined && (
            <div>
              <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Baud Rate</label>
              <SettingsInput
                type="number"
                value={String(deviceData.baud ?? '')}
                onCommit={(v) => updateDeviceSetting([...getDevicePath(), 'baud'], parseInt(v))}
                className="w-full px-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm"
              />
            </div>
          )}
        </div>

        <div className="pt-4 border-t border-neutral-100">
          <h3 className="text-xs font-medium text-neutral-400 uppercase tracking-wide mb-1.5">Device ID</h3>
          <code className="text-xs text-neutral-500 bg-neutral-100 px-2.5 py-1.5 rounded-lg">{device.id}</code>
        </div>
      </div>

      {browsingField && createPortal(
        <MediaBrowser
          currentPath={
            browsingField === 'cache'    ? (deviceData.cache    || '/') :
            browsingField === 'base_url' ? (deviceData.base_url || '/') :
            (deviceData.url || '/')
          }
          onSelect={(selectedPath: string) => {
            if (browsingField === 'url') {
              void handleFileSelect(selectedPath);
            } else {
              updateDeviceSetting([...getDevicePath(), browsingField], selectedPath);
            }
            setBrowsingField(null);
          }}
          onClose={() => setBrowsingField(null)}
        />,
        document.body
      )}
    </>
  );
}

// ── Overlay shell with Swiper ────────────────────────────────────────────────

export default function DeviceDetailOverlay({
  devices,
  initialIndex,
  config,
  setConfig,
  onClose,
  onIndexChange,
}: DeviceDetailOverlayProps) {
  const [activeIndex, setActiveIndex] = useState(initialIndex);
  const [isBrowsing, setIsBrowsing] = useState(false);
  const swiperRef = useRef<SwiperType | null>(null);

  const activeDevice = devices[activeIndex] ?? devices[0];


  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') { onClose(); return; }
      const tag = (document.activeElement as HTMLElement)?.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
      if (e.key === 'ArrowLeft')  swiperRef.current?.slidePrev();
      if (e.key === 'ArrowRight') swiperRef.current?.slideNext();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-50">
        <motion.div
          initial={{ y: '100%' }}
          animate={{ y: 0 }}
          exit={{ y: '100%' }}
          transition={{ type: 'spring', damping: 28, stiffness: 280 }}
          className="fixed inset-0 bg-white/80 backdrop-blur-md flex flex-col overflow-hidden"
        >
          {/* ── Header ── */}
          <div className="flex-shrink-0 border-b border-neutral-200/70 relative">
            <div className="flex items-center gap-3 px-4 py-3">
              <div className={`flex flex-col items-center gap-0.5 flex-shrink-0 ${
                activeDevice.physical ? 'text-green-600' : activeDevice.enabled ? 'text-blue-600' : 'text-neutral-400'
              }`}>
                <span className="text-xs font-semibold leading-none tabular-nums">{activeDevice.number}</span>
                <DeviceIcon device={activeDevice} />
                {activeDevice.physical && (
                  <span className="text-[10px] text-green-700 px-1 py-0.5 bg-green-50 border border-green-200 rounded leading-none">
                    Physical
                  </span>
                )}
              </div>

              <div className="flex-1 min-w-0">
                <p className="text-base font-semibold text-neutral-800 truncate leading-tight">
                  {activeDevice.name ?? `Device ${activeDevice.number}`}
                </p>
                <p className="text-xs text-neutral-400 capitalize">{activeDevice.type}</p>
              </div>

              <div className="flex items-center gap-1 flex-shrink-0">
                {devices.length > 1 && (
                  <span className="text-xs text-neutral-400 tabular-nums px-1">
                    {activeIndex + 1} / {devices.length}
                  </span>
                )}
                <button
                  onClick={onClose}
                  className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
            </div>

          </div>

          {/* ── Swiper ── */}
          <div className="flex-1 min-h-0">
            <Swiper
              initialSlide={initialIndex}
              onSwiper={(s) => { swiperRef.current = s; }}
              onSlideChange={(s) => {
                setActiveIndex(s.activeIndex);
                onIndexChange?.(s.activeIndex);
              }}
              touchStartPreventDefault={false}
              style={{ height: '100%' }}
            >
              {devices.map((device, i) => (
                <SwiperSlide key={device.id} style={{ overflowY: isBrowsing && i === activeIndex ? 'hidden' : 'auto', height: '100%' }}>
                  <DeviceCard
                    device={device}
                    config={config}
                    setConfig={setConfig}
                    isActive={i === activeIndex}
                    onBrowsingChange={i === activeIndex ? setIsBrowsing : undefined}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
}