'use client';

import { useState, useRef, useEffect, KeyboardEvent } from 'react';
import { ChevronDown, Trash2 } from 'lucide-react';

interface Chart {
  id: number;
  name: string;
  created_at: number;
}

interface ChartSelectorProps {
  charts: Chart[];
  activeChartId: number | null;
  onSelectChart: (chartId: number) => void;
  onDeleteChart: (chartId: number) => void;
}

export default function ChartSelector({
  charts,
  activeChartId,
  onSelectChart,
  onDeleteChart,
}: ChartSelectorProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
  const [focusedIndex, setFocusedIndex] = useState<number>(-1);

  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  const activeChart = charts.find((c) => c.id === activeChartId);

  // Click-outside handler
  useEffect(() => {
    function handleMouseDown(event: MouseEvent) {
      if (
        containerRef.current &&
        !containerRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
        setFocusedIndex(-1);
      }
    }

    document.addEventListener('mousedown', handleMouseDown);
    return () => {
      document.removeEventListener('mousedown', handleMouseDown);
    };
  }, []);

  // Scroll focused item into view
  useEffect(() => {
    if (isOpen && focusedIndex >= 0 && itemRefs.current[focusedIndex]) {
      itemRefs.current[focusedIndex]?.scrollIntoView({ block: 'nearest' });
    }
  }, [focusedIndex, isOpen]);

  // Reset focused index when dropdown closes
  useEffect(() => {
    if (!isOpen) {
      setFocusedIndex(-1);
    }
  }, [isOpen]);

  function handleToggleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      setIsOpen((prev) => !prev);
      if (!isOpen) {
        setFocusedIndex(0);
      }
    } else if (event.key === 'Escape') {
      setIsOpen(false);
      setFocusedIndex(-1);
    } else if (event.key === 'ArrowDown') {
      event.preventDefault();
      if (!isOpen) {
        setIsOpen(true);
        setFocusedIndex(0);
      } else {
        setFocusedIndex((prev) => Math.min(prev + 1, charts.length - 1));
      }
    } else if (event.key === 'ArrowUp') {
      event.preventDefault();
      if (isOpen) {
        setFocusedIndex((prev) => Math.max(prev - 1, 0));
      }
    }
  }

  function handleListKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      setFocusedIndex((prev) => Math.min(prev + 1, charts.length - 1));
    } else if (event.key === 'ArrowUp') {
      event.preventDefault();
      setFocusedIndex((prev) => Math.max(prev - 1, 0));
    } else if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      if (focusedIndex >= 0 && focusedIndex < charts.length) {
        onSelectChart(charts[focusedIndex].id);
        setIsOpen(false);
      }
    } else if (event.key === 'Escape') {
      setIsOpen(false);
      setFocusedIndex(-1);
    }
  }

  if (charts.length === 0) {
    return (
      <p className="text-[10px] text-muted-foreground italic">
        No charts — upload a CSV to get started
      </p>
    );
  }

  return (
    <div className="relative" ref={containerRef}>
      <button
        onClick={() => {
          setIsOpen(!isOpen);
          if (!isOpen) {
            setFocusedIndex(0);
          }
        }}
        onKeyDown={handleToggleKeyDown}
        aria-haspopup="listbox"
        aria-expanded={isOpen}
        className="w-full flex items-center justify-between px-2 py-1.5 text-xs rounded bg-secondary/50 hover:bg-secondary text-foreground transition-colors"
      >
        <span className="font-mono font-medium truncate">{activeChart?.name || 'Select chart'}</span>
        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen && (
        <div
          role="listbox"
          aria-label="Chart list"
          tabIndex={-1}
          onKeyDown={handleListKeyDown}
          className="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md max-h-48 overflow-y-auto"
        >
          {charts.map((chart, index) => (
            <div
              key={chart.id}
              ref={(el) => { itemRefs.current[index] = el; }}
              role="option"
              aria-selected={chart.id === activeChartId}
              tabIndex={focusedIndex === index ? 0 : -1}
              className={`flex items-center justify-between px-2 py-1.5 text-xs hover:bg-accent cursor-pointer outline-none ${
                chart.id === activeChartId ? 'bg-accent/50' : ''
              } ${focusedIndex === index ? 'ring-1 ring-inset ring-ring' : ''}`}
              onMouseEnter={() => setFocusedIndex(index)}
            >
              <div
                className="flex-1 min-w-0"
                onClick={() => {
                  onSelectChart(chart.id);
                  setIsOpen(false);
                }}
              >
                <div className="truncate font-mono text-foreground">{chart.name}</div>
              </div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setConfirmDeleteId(chart.id);
                }}
                className="ml-2 p-0.5 text-muted-foreground hover:text-destructive flex-shrink-0"
                title="Delete chart"
                aria-label={`Delete chart ${chart.name}`}
              >
                <Trash2 className="h-3 w-3" />
              </button>
            </div>
          ))}
        </div>
      )}

      {confirmDeleteId !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-popover border border-border rounded-lg p-4 max-w-sm mx-4 shadow-lg">
            <p className="text-xs text-foreground">
              Delete &ldquo;{charts.find((c) => c.id === confirmDeleteId)?.name}&rdquo; and all its data? This cannot be undone.
            </p>
            <div className="flex justify-end gap-2 mt-3">
              <button
                onClick={() => setConfirmDeleteId(null)}
                className="px-3 py-1 text-xs rounded border border-border hover:bg-accent text-foreground"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  onDeleteChart(confirmDeleteId);
                  setConfirmDeleteId(null);
                  setIsOpen(false);
                }}
                className="px-3 py-1 text-xs rounded bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
