import { useEffect, useRef, useState } from 'react';
import { SettingsInput } from './ui/settings-input';
import { X, ChevronLeft, ChevronRight, Printer, HardDrive, Network, Box, FolderOpen, MoreVertical, Play, Pause, SkipForward, SkipBack, RotateCcw } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { toast } from 'sonner';
import { fileExists, getFileContents, joinPath, stat } from '../webdav';
import MediaBrowser from './MediaBrowser';
import MediaSet, { mediaSetEntryUrl, type MediaSetEntry } from './MediaSet';

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 {
  device: Device;
  config: any;
  setConfig: (config: any) => void;
  onClose: () => void;
  onNavigate: (direction: 'prev' | 'next') => void;
  hasPrev: boolean;
  hasNext: boolean;
}

export default function DeviceDetailOverlay({
  device,
  config,
  setConfig,
  onClose,
  onNavigate,
  hasPrev,
  hasNext
}: DeviceDetailOverlayProps) {
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);
  const [browsingField, setBrowsingField] = useState<'url' | 'base_url' | 'cache' | null>(null);
  const [showCommandMenu, setShowCommandMenu] = useState(false);

  const minSwipeDistance = 50;

  const onTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const onTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;

    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe && hasNext) {
      onNavigate('next');
    }
    if (isRightSwipe && hasPrev) {
      onNavigate('prev');
    }
  };

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
        const tag = (document.activeElement as HTMLElement)?.tagName;
        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
        if (e.key === 'ArrowLeft' && hasPrev) onNavigate('prev');
        if (e.key === 'ArrowRight' && hasNext) onNavigate('next');
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [hasPrev, hasNext, onClose, onNavigate]);

  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);
  };

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

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

  const deviceData = getDeviceData();

  const getDeviceIcon = (type: Device['type']) => {
    switch (type) {
      case 'printer':
        return <Printer className="w-6 h-6" />;
      case 'drive':
        return <HardDrive className="w-6 h-6" />;
      case 'network':
        return <Network className="w-6 h-6" />;
      default:
        return <Box className="w-6 h-6" />;
    }
  };

  const [mediaSetFiles, setMediaSetFiles] = useState<MediaSetEntry[] | null>(null);
  const detectTokenRef = useRef(0);

  // Cancel any in-flight detection and reset when navigating to a different device.
  useEffect(() => {
    ++detectTokenRef.current;
    setMediaSetFiles(null);
  }, [device.number]);

  // Sync config-backed media_set to display state whenever it is set explicitly
  // (e.g. after a playlist is mounted).
  useEffect(() => {
    if (Array.isArray(deviceData.media_set) && deviceData.media_set.length > 1) {
      setMediaSetFiles(deviceData.media_set as MediaSetEntry[]);
    }
  }, [deviceData.media_set]);

  // Pattern-detect sibling numbered files for the given URL. Called only when
  // the user actively sets a URL — never on overlay load or device switch.
  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) => {
    const path = getDevicePath();
    updateDeviceSetting([...path, 'url'], file);
  };

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

  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);
    }
  };

  const sendCommand = (command: string) => {
    console.log(`Sending command to device ${device.number}: ${command}`);
    // In a real app, this would send the command to the device
    setShowCommandMenu(false);
  };

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/50 z-50"
        onClick={onClose}
      >
        <motion.div
          initial={{ y: '100%' }}
          animate={{ y: 0 }}
          exit={{ y: '100%' }}
          transition={{ type: 'spring', damping: 30, stiffness: 300 }}
          className="fixed inset-0 bg-white overflow-y-auto z-50"
          onClick={(e) => e.stopPropagation()}
          onTouchStart={onTouchStart}
          onTouchMove={onTouchMove}
          onTouchEnd={onTouchEnd}
        >
          <div className="sticky top-0 bg-white border-b border-neutral-200 z-10">
            <div className="flex items-center justify-between p-4">
              <button onClick={onClose} className="p-2 -m-2">
                <X className="w-6 h-6" />
              </button>
              <div className={`flex flex-col items-center gap-0.5 ${
                device.physical ? 'text-green-600' : deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'
              }`}>
                <span className="text-sm font-semibold leading-none">{device.number}</span>
                {getDeviceIcon(device.type)}
                {device.physical && (
                  <span className="text-xs text-green-700 px-1 py-0.5 bg-green-50 border border-green-200 rounded leading-none">
                    Physical
                  </span>
                )}
              </div>
              <button
                onClick={() => setShowCommandMenu(!showCommandMenu)}
                className="p-2 -m-2 relative"
              >
                <MoreVertical className="w-6 h-6" />
              </button>
            </div>

            {showCommandMenu && (
              <div className="absolute right-4 top-16 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[200px] z-20">
                <button
                  onClick={() => sendCommand('RESET')}
                  className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
                >
                  <RotateCcw className="w-4 h-4" />
                  Reset Device
                </button>
              </div>
            )}

            <div className="flex items-center justify-between px-4 pb-4">
              <button
                onClick={() => onNavigate('prev')}
                disabled={!hasPrev}
                className={`p-2 rounded-lg ${
                  hasPrev
                    ? 'text-blue-600 bg-blue-50'
                    : 'text-neutral-300 bg-neutral-50'
                }`}
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
              <span className="text-sm text-neutral-500">Swipe to navigate</span>
              <button
                onClick={() => onNavigate('next')}
                disabled={!hasNext}
                className={`p-2 rounded-lg ${
                  hasNext
                    ? 'text-blue-600 bg-blue-50'
                    : 'text-neutral-300 bg-neutral-50'
                }`}
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          </div>

          <div className="p-4 space-y-6">
            <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={() => {
                      const path = getDevicePath();
                      updateDeviceSetting([...path, '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-sm text-neutral-500 block mb-2">Type</label>
                <div className="px-3 py-2 bg-neutral-50 border border-neutral-200 rounded-lg text-neutral-700">
                  {device.type.charAt(0).toUpperCase() + device.type.slice(1)}
                </div>
              </div>

              <div>
                <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
                <SettingsInput
                  type="text"
                  value={deviceData.name || device.name || `Device ${device.number}`}
                  onCommit={(v) => {
                    const path = getDevicePath();
                    updateDeviceSetting([...path, 'name'], v);
                  }}
                  onClear={() => updateDeviceSetting([...getDevicePath(), 'name'], '')}
                  className="px-3 py-2 border border-neutral-300 rounded-lg"
                  containerClassName="w-full"
                />
              </div>

              {!device.physical && <>
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Base URL</label>
                  <div className="flex gap-2">
                    <SettingsInput
                      type="text"
                      value={deviceData.base_url ?? ''}
                      onCommit={(v) => {
                        const path = getDevicePath();
                        updateDeviceSetting([...path, 'base_url'], v);
                      }}
                      onClear={() => updateDeviceSetting([...getDevicePath(), 'base_url'], '')}
                      containerClassName="flex-1"
                      className="px-3 py-2 border border-neutral-300 rounded-lg"
                    />
                    <button
                      onClick={() => setBrowsingField('base_url')}
                      className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
                      title="Browse"
                    >
                      <FolderOpen className="w-5 h-5" />
                    </button>
                  </div>
                </div>

                <div>
                  <label className="text-sm text-neutral-500 block mb-2">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 border border-neutral-300 rounded-lg"
                    />
                    <button
                      onClick={() => setBrowsingField('url')}
                      className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
                      title="Browse"
                    >
                      <FolderOpen className="w-5 h-5" />
                    </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-sm text-neutral-500 block mb-2">Cache</label>
                    <div className="flex gap-2">
                      <SettingsInput
                        type="text"
                        value={deviceData.cache ?? ''}
                        onCommit={(v) => {
                          const path = getDevicePath();
                          updateDeviceSetting([...path, 'cache'], v);
                        }}
                        onClear={() => updateDeviceSetting([...getDevicePath(), 'cache'], '')}
                        containerClassName="flex-1"
                        className="px-3 py-2 border border-neutral-300 rounded-lg"
                      />
                      <button
                        onClick={() => setBrowsingField('cache')}
                        className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
                        title="Browse"
                      >
                        <FolderOpen className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                )}
              </>}

              {deviceData.mode !== undefined && (
                <div className="flex items-center justify-between">
                  <label className="text-sm text-neutral-500">Mode</label>
                  {device.physical
                    ? <span className="text-sm text-neutral-700 px-3 py-2">
                        {(deviceData.mode ?? 0) === 0 ? 'Read Only' : 'Write Enabled'}
                      </span>
                    : <div className="flex rounded-lg border border-neutral-300 overflow-hidden text-sm">
                        {([0, 1] as const).map((val, i) => (
                          <button
                            key={val}
                            onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], val)}
                            className={`px-4 py-2 ${i > 0 ? 'border-l border-neutral-300' : ''} ${
                              (deviceData.mode ?? 0) === val
                                ? 'bg-blue-600 text-white'
                                : 'bg-white text-neutral-700 hover:bg-neutral-50'
                            }`}
                          >
                            {val === 0 ? 'Read Only' : 'Write Enabled'}
                          </button>
                        ))}
                      </div>
                  }
                </div>
              )}

              {deviceData.baud !== undefined && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Baud Rate</label>
                  <SettingsInput
                    type="number"
                    value={String(deviceData.baud ?? '')}
                    onCommit={(v) => {
                      const path = getDevicePath();
                      updateDeviceSetting([...path, 'baud'], parseInt(v));
                    }}
                    className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                  />
                </div>
              )}
            </div>

            <div className="pt-4 border-t border-neutral-200">
              <h3 className="text-sm text-neutral-500 mb-2">Device ID</h3>
              <code className="text-xs text-neutral-600 bg-neutral-50 px-2 py-1 rounded">
                {device.id}
              </code>
            </div>
          </div>

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