import { useEffect, useState } from 'react';
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 } from '../webdav';
import MediaBrowser from './MediaBrowser';
import MediaSet from './MediaSet';

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

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' && hasPrev) {
        onNavigate('prev');
      } else 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 ['iec', 'devices', 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" />;
    }
  };

  // Prefer an explicit .lst-derived mediaSet stored in config; fall back to pattern detection.
  const [mediaSetFiles, setMediaSetFiles] = useState<string[] | null>(null);

  useEffect(() => {
    if (Array.isArray(deviceData.media_set) && deviceData.media_set.length > 0) {
      setMediaSetFiles(deviceData.media_set as string[]);
      return;
    }
    if (!deviceData.url) { setMediaSetFiles(null); return; }
    const match = (deviceData.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
    if (!match) { setMediaSetFiles(null); return; }
    const [, prefix, , ext] = match;
    const candidates: string[] = [];
    for (let i = 1; i <= 10; i++) candidates.push(`${prefix}${i}${ext}`);
    let cancelled = false;
    Promise.all(candidates.map(f => fileExists(f).catch(() => false))).then(flags => {
      if (!cancelled) setMediaSetFiles(candidates.filter((_, i) => flags[i]));
    });
    return () => { cancelled = true; };
  }, [deviceData.url, deviceData.media_set]);

  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();
    if (selectedPath.toLowerCase().endsWith('.lst')) {
      try {
        const text = await (await getFileContents(selectedPath)).text();
        const dir   = selectedPath.split('/').slice(0, -1).join('/') || '/';
        const candidates = text.split('\n')
          .map(l => l.trim())
          .filter(l => l.length > 0 && !l.startsWith('#'))
          .map(l => l.startsWith('/') ? l : joinPath(dir, l));
        if (candidates.length === 0) { toast.error('Swap list is empty'); return; }
        const existsArr = await Promise.all(candidates.map(f => fileExists(f).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 < 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(files[0], dev.base_url || '')) clearBaseAndCache(dev);
        dev.url       = 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);
    }
  };

  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 items-center gap-2">
                <div className={deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}>
                  {getDeviceIcon(device.type)}
                </div>
                <div className="text-center">
                  <div className="text-xs text-neutral-500 capitalize">{device.type}</div>
                  <div className="font-medium">#{device.number}</div>
                </div>
              </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">
              <div>
                <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
                <input
                  type="text"
                  value={deviceData.name || device.name || `Device ${device.number}`}
                  onChange={(e) => {
                    const path = getDevicePath();
                    updateDeviceSetting([...path, 'name'], e.target.value);
                  }}
                  className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                />
              </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 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>

              {deviceData.base_url !== undefined && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Base URL</label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={deviceData.base_url ?? ''}
                      onChange={(e) => {
                        const path = getDevicePath();
                        updateDeviceSetting([...path, 'base_url'], e.target.value);
                      }}
                      className="flex-1 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"
                    >
                      <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">
                  <input
                    type="text"
                    value={deviceData.url}
                    onChange={(e) => {
                      const newUrl = e.target.value;
                      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;
                      setConfig(newConfig);
                    }}
                    className="flex-1 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"
                  >
                    <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 && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Cache</label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={deviceData.cache ?? ''}
                      onChange={(e) => {
                        const path = getDevicePath();
                        updateDeviceSetting([...path, 'cache'], e.target.value);
                      }}
                      className="flex-1 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"
                    >
                      <FolderOpen className="w-5 h-5" />
                    </button>
                  </div>
                </div>
              )}

              {deviceData.mode !== undefined && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Mode</label>
                  <input
                    type="number"
                    value={deviceData.mode}
                    onChange={(e) => {
                      const path = getDevicePath();
                      updateDeviceSetting([...path, 'mode'], parseInt(e.target.value));
                    }}
                    className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                  />
                </div>
              )}

              {deviceData.type && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Device Type</label>
                  <div className="px-3 py-2 bg-neutral-50 border border-neutral-200 rounded-lg text-neutral-700">
                    {deviceData.type}
                  </div>
                </div>
              )}

              {deviceData.baud !== undefined && (
                <div>
                  <label className="text-sm text-neutral-500 block mb-2">Baud Rate</label>
                  <input
                    type="number"
                    value={deviceData.baud}
                    onChange={(e) => {
                      const path = getDevicePath();
                      updateDeviceSetting([...path, 'baud'], parseInt(e.target.value));
                    }}
                    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>
  );
}