'use client';

import React, { useState, useEffect, useRef } from 'react';
import {
  Search,
  Calendar,
  FileText,
  Video,
  ShoppingBag,
  Repeat,
  DollarSign,
  Users,
  Activity,
  User,
  Shield,
  Volume2,
  VolumeX,
  X,
  Sparkles,
  Command,
  Scale,
  Lock,
} from 'lucide-react';
import { Patient, StaffRole } from '@/types/clinical';
import { clinicalAudio } from '@/lib/clinical-audio';

export interface CommandItem {
  id: string;
  category: 'Patients' | 'Navigation' | 'Actions' | 'Staff Role' | 'Settings';
  title: string;
  subtitle?: string;
  icon: React.ReactNode;
  badge?: string;
  action: () => void;
}

interface CommandPaletteProps {
  isOpen: boolean;
  onClose: () => void;
  patients: Patient[];
  onSelectPatient: (p: Patient) => void;
  onNavigateTab: (tab: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention') => void;
  onOpenWaitlist: () => void;
  onSetStaffRole: (role: StaffRole) => void;
  onToggleAudio: () => void;
  audioEnabled: boolean;
  onOpenCourtVault?: () => void;
  onLockTerminal?: () => void;
}

export const CommandPalette: React.FC<CommandPaletteProps> = ({
  isOpen,
  onClose,
  patients,
  onSelectPatient,
  onNavigateTab,
  onOpenWaitlist,
  onSetStaffRole,
  onToggleAudio,
  audioEnabled,
  onOpenCourtVault,
  onLockTerminal,
}) => {
  const [query, setQuery] = useState('');
  const [selectedIndex, setSelectedIndex] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isOpen) {
      setTimeout(() => inputRef.current?.focus(), 50);
      setQuery('');
      setSelectedIndex(0);
      clinicalAudio.playClick();
    }
  }, [isOpen]);

  // Generate commands list
  const baseCommands: CommandItem[] = [
    // Patients
    ...patients.map((p) => ({
      id: `patient-${p.id}`,
      category: 'Patients' as const,
      title: `${p.firstName} ${p.lastName}`,
      subtitle: `${p.carePlan.targetCondition} • Visit ${p.carePlan.completedVisits}/${p.carePlan.totalVisits}`,
      badge: p.status === 'dropout_risk' ? 'Dropout Risk' : 'Active Patient',
      icon: <User className="w-4 h-4 text-sky-600" />,
      action: () => {
        onSelectPatient(p);
        onNavigateTab('charting');
        onClose();
      },
    })),

    // Navigation
    {
      id: 'nav-calendar',
      category: 'Navigation',
      title: 'Schedule & Operatory Calendar',
      subtitle: 'View live provider schedules and patient arrival states',
      icon: <Calendar className="w-4 h-4 text-sky-600" />,
      action: () => {
        onNavigateTab('calendar');
        onClose();
      },
    },
    {
      id: 'nav-charting',
      category: 'Navigation',
      title: 'Clinical SOAP Charting & Spine Visualizer',
      subtitle: '2D anatomical subluxation clicks and ambient AI scribe',
      icon: <FileText className="w-4 h-4 text-emerald-600" />,
      action: () => {
        onNavigateTab('charting');
        onClose();
      },
    },
    {
      id: 'nav-telehealth',
      category: 'Navigation',
      title: 'Virtual Telehealth Consultation Suite',
      subtitle: 'HIPAA-compliant video consult with live side-by-side notes',
      icon: <Video className="w-4 h-4 text-blue-600" />,
      action: () => {
        onNavigateTab('telehealth');
        onClose();
      },
    },
    {
      id: 'nav-retail',
      category: 'Navigation',
      title: 'Front-Desk Supplement & Retail POS',
      subtitle: 'Stock inventory, barcode search, Stripe terminal checkout',
      icon: <ShoppingBag className="w-4 h-4 text-amber-600" />,
      action: () => {
        onNavigateTab('retail');
        onClose();
      },
    },
    {
      id: 'nav-memberships',
      category: 'Navigation',
      title: 'Recurring Memberships & Visit Packages',
      subtitle: '$89/mo monthly wellness club and pre-paid visit blocks',
      icon: <Repeat className="w-4 h-4 text-emerald-600" />,
      action: () => {
        onNavigateTab('memberships');
        onClose();
      },
    },
    {
      id: 'nav-billing',
      category: 'Navigation',
      title: 'Medical Superbill & CMS-1500 Billing',
      subtitle: 'Generate reimbursement claim PDF and Stripe copay checkout',
      icon: <DollarSign className="w-4 h-4 text-slate-700" />,
      action: () => {
        onNavigateTab('billing');
        onClose();
      },
    },
    {
      id: 'nav-retention',
      category: 'Navigation',
      title: 'Care Plan Retention & Dropout Radar',
      subtitle: 'Autonomous recovery SMS dispatch for lagging patients',
      icon: <Users className="w-4 h-4 text-rose-600" />,
      action: () => {
        onNavigateTab('retention');
        onClose();
      },
    },

    // Fast Actions
    {
      id: 'action-waitlist',
      category: 'Actions',
      title: 'Cancellation Waitlist Queue',
      subtitle: 'Dispatch SMS alerts to queued patients for open slots',
      badge: 'Waitlist',
      icon: <Activity className="w-4 h-4 text-amber-600" />,
      action: () => {
        onOpenWaitlist();
        onClose();
      },
    },
    {
      id: 'action-court-vault',
      category: 'Actions',
      title: 'Court-Ready Legal & HIPAA Compliance Vault',
      subtitle: '21 CFR Part 11 cryptographic hash seal, non-repudiation, chain-of-custody audit',
      badge: '21 CFR Part 11',
      icon: <Scale className="w-4 h-4 text-sky-600" />,
      action: () => {
        if (onOpenCourtVault) onOpenCourtVault();
        onClose();
      },
    },
    {
      id: 'action-lock-terminal',
      category: 'Actions',
      title: 'Lock Clinical Terminal (HIPAA Auto-Logoff)',
      subtitle: 'Instant exam room screen lock pursuant to 45 CFR § 164.312(a)(2)(iii) (Cmd+L)',
      badge: 'HIPAA Lock',
      icon: <Lock className="w-4 h-4 text-rose-600" />,
      action: () => {
        if (onLockTerminal) onLockTerminal();
        onClose();
      },
    },

    // Staff Roles
    {
      id: 'role-doctor',
      category: 'Staff Role',
      title: 'Switch Role: Doctor (D.C.)',
      subtitle: 'Full access to clinical SOAP, 2D spine, AI scribe & telehealth',
      icon: <Shield className="w-4 h-4 text-sky-600" />,
      action: () => {
        onSetStaffRole('doctor');
        onClose();
      },
    },
    {
      id: 'role-front-desk',
      category: 'Staff Role',
      title: 'Switch Role: Front Desk (HIPAA-Safe Mode)',
      subtitle: 'Locks medical charts; grants schedule, POS & waitlist access',
      icon: <Shield className="w-4 h-4 text-emerald-600" />,
      action: () => {
        onSetStaffRole('front_desk');
        onClose();
      },
    },
    {
      id: 'role-billing-admin',
      category: 'Staff Role',
      title: 'Switch Role: Billing Administrator',
      subtitle: 'Direct focus on superbills, claims, packages & recurring clubs',
      icon: <Shield className="w-4 h-4 text-indigo-600" />,
      action: () => {
        onSetStaffRole('billing_admin');
        onClose();
      },
    },

    // Settings
    {
      id: 'setting-audio',
      category: 'Settings',
      title: audioEnabled ? 'Mute Tactile Clinical Audio' : 'Enable Tactile Clinical Audio',
      subtitle: 'Web Audio synthesizer feedback for spine clicks and payments',
      icon: audioEnabled ? <VolumeX className="w-4 h-4 text-slate-600" /> : <Volume2 className="w-4 h-4 text-emerald-600" />,
      action: () => {
        onToggleAudio();
        onClose();
      },
    },
  ];

  const filtered = baseCommands.filter((cmd) => {
    const q = query.toLowerCase();
    return (
      cmd.title.toLowerCase().includes(q) ||
      (cmd.subtitle && cmd.subtitle.toLowerCase().includes(q)) ||
      cmd.category.toLowerCase().includes(q)
    );
  });

  // Handle keyboard navigation inside the list
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setSelectedIndex((prev) => (prev + 1) % (filtered.length || 1));
      clinicalAudio.playClick();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setSelectedIndex((prev) => (prev - 1 + filtered.length) % (filtered.length || 1));
      clinicalAudio.playClick();
    } else if (e.key === 'Enter') {
      e.preventDefault();
      if (filtered[selectedIndex]) {
        clinicalAudio.playSuccess();
        filtered[selectedIndex].action();
      }
    } else if (e.key === 'Escape') {
      e.preventDefault();
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="Command Palette"
      className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-slate-900/40 backdrop-blur-sm transition-all"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div
        className="w-full max-w-xl bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden transform transition-all flex flex-col max-h-[80vh]"
        onKeyDown={handleKeyDown}
      >
        {/* Search Header */}
        <div className="flex items-center px-4 py-3.5 border-b border-slate-100 bg-slate-50/50">
          <Search className="w-5 h-5 text-slate-400 mr-3 shrink-0" />
          <input
            ref={inputRef}
            type="text"
            value={query}
            onChange={(e) => {
              setQuery(e.target.value);
              setSelectedIndex(0);
            }}
            placeholder="Type a patient name, clinical command, or view... (Cmd+K)"
            className="w-full text-sm text-slate-800 placeholder-slate-400 bg-transparent border-none focus:outline-none focus:ring-0"
          />
          <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-mono font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded">
            ESC
          </kbd>
        </div>

        {/* Results List */}
        <div ref={listRef} className="overflow-y-auto p-2 divide-y divide-slate-50 space-y-1">
          {filtered.length === 0 ? (
            <div className="py-12 text-center text-slate-400 text-xs">
              No matching patients or clinical commands found for &ldquo;{query}&rdquo;
            </div>
          ) : (
            filtered.map((item, idx) => {
              const isSelected = idx === selectedIndex;
              return (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => {
                    clinicalAudio.playSuccess();
                    item.action();
                  }}
                  onMouseEnter={() => setSelectedIndex(idx)}
                  className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-left transition-all ${
                    isSelected ? 'bg-sky-50/80 border border-sky-200' : 'hover:bg-slate-50 border border-transparent'
                  }`}
                >
                  <div className="flex items-center gap-3 min-w-0">
                    <div
                      className={`p-2 rounded-lg shrink-0 ${
                        isSelected ? 'bg-white shadow-xs' : 'bg-slate-100'
                      }`}
                    >
                      {item.icon}
                    </div>
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-semibold text-slate-800 truncate">
                          {item.title}
                        </span>
                        {item.badge && (
                          <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-slate-100 text-slate-600">
                            {item.badge}
                          </span>
                        )}
                      </div>
                      {item.subtitle && (
                        <p className="text-[11px] text-slate-500 truncate mt-0.5">
                          {item.subtitle}
                        </p>
                      )}
                    </div>
                  </div>

                  <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wider shrink-0 ml-2">
                    {item.category}
                  </span>
                </button>
              );
            })
          )}
        </div>

        {/* Footer shortcuts helper */}
        <div className="px-4 py-2.5 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
          <div className="flex items-center gap-3">
            <span className="flex items-center gap-1">
              <kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↑</kbd>
              <kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↓</kbd>
              Navigate
            </span>
            <span className="flex items-center gap-1">
              <kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↵</kbd>
              Select
            </span>
          </div>
          <div className="flex items-center gap-1 text-[10px] text-sky-700 font-medium">
            <Sparkles className="w-3 h-3" /> Mediusa Quick Command Hub
          </div>
        </div>
      </div>
    </div>
  );
};