'use client';

import { useState, useEffect, useCallback } from 'react';
import { ArrowLeftRight, BarChart3, Grid3X3, Copy } from 'lucide-react';
import { toast } from 'sonner';
import SearchUnits from './SearchUnits';
import VisualComparison from './VisualComparison';
import {
  getAllMeasures,
  getUnitsForMeasure,
  convertToAll,
  convertUnit,
  formatMeasureName,
  type Measure,
  type ConversionResult,
} from '@/lib/units/units';
import { parseNumberInput, formatNumber, cn } from '@/lib/utils';
import { MobileTabs } from '@/components/ui/mobile-tabs';

type Tab = 'category' | 'convert';


export default function MainConverter() {
  const [selectedMeasure, setSelectedMeasure] = useState<Measure>('length');
  const [selectedUnit, setSelectedUnit] = useState<string>('m');
  const [targetUnit, setTargetUnit] = useState<string>('ft');
  const [inputValue, setInputValue] = useState<string>('1');
  const [conversions, setConversions] = useState<ConversionResult[]>([]);
  const [showChart, setShowChart] = useState(false);
  const [tab, setTab] = useState<Tab>('category');

  const measures = getAllMeasures();
  const units = getUnitsForMeasure(selectedMeasure);

  useEffect(() => {
    const numValue = parseNumberInput(inputValue);
    if (numValue !== null && selectedUnit) {
      setConversions(convertToAll(numValue, selectedUnit));
    } else {
      setConversions([]);
    }
  }, [inputValue, selectedUnit]);

  useEffect(() => {
    const availableUnits = getUnitsForMeasure(selectedMeasure);
    if (availableUnits.length > 0) {
      setSelectedUnit(availableUnits[0]);
      setTargetUnit(availableUnits[1] ?? availableUnits[0]);
    }
  }, [selectedMeasure]);

  const handleSwapUnits = useCallback(() => {
    const numValue = parseNumberInput(inputValue);
    if (numValue !== null) {
      setInputValue(convertUnit(numValue, selectedUnit, targetUnit).toString());
    }
    setSelectedUnit(targetUnit);
    setTargetUnit(selectedUnit);
  }, [selectedUnit, targetUnit, inputValue]);

  const handleSearchSelect = useCallback((unit: string, measure: Measure) => {
    setSelectedMeasure(measure);
    setSelectedUnit(unit);
    setTab('convert');
  }, []);

  const handleCategorySelect = useCallback((measure: Measure) => {
    setSelectedMeasure(measure);
    setTab('convert');
  }, []);

  const handleValueChange = useCallback(
    (value: number, unit: string, _dragging: boolean) => {
      setInputValue(convertUnit(value, unit, selectedUnit).toString());
    },
    [selectedUnit]
  );

  const resultValue = (() => {
    const n = parseNumberInput(inputValue);
    return n !== null ? convertUnit(n, selectedUnit, targetUnit) : null;
  })();

  return (
    <div className="flex flex-col gap-4">

      <MobileTabs
        tabs={[{ value: 'category', label: 'Category' }, { value: 'convert', label: 'Convert' }]}
        active={tab}
        onChange={(v) => setTab(v as Tab)}
      />

      {/* ── Main layout ────────────────────────────────────────── */}
      <div
        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
        style={{ height: 'calc(100svh - 120px)'  }}
      >

        {/* Left panel: search + categories */}
        <div
          className={cn(
            'lg:col-span-2 flex flex-col gap-3 overflow-hidden',
            tab !== 'category' && 'hidden lg:flex'
          )}
        >
          {/* Search */}
          <div className="glass rounded-xl p-4 shrink-0">
            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
              Search
            </span>
            <SearchUnits onSelectUnit={handleSearchSelect} />
          </div>

          {/* Category list */}
          <div className="glass rounded-xl p-3 flex flex-col flex-1 min-h-0 overflow-hidden">
            <div className="flex items-center justify-between mb-3 shrink-0">
              <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                Categories
              </span>
              <span className="text-[10px] text-muted-foreground/35 font-mono tabular-nums">
                {measures.length}
              </span>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent space-y-0.5 pr-0.5">
              {measures.map((measure) => {
                const isSelected = selectedMeasure === measure;
                const unitCount = getUnitsForMeasure(measure).length;
                return (
                  <button
                    key={measure}
                    onClick={() => handleCategorySelect(measure)}
                    className={cn(
                      'w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all text-left',
                      isSelected
                        ? 'bg-primary/10 text-primary'
                        : 'text-foreground/65 hover:bg-primary/8 hover:text-foreground'
                    )}
                  >
                    <span className="flex-1 text-xs font-mono truncate">{formatMeasureName(measure)}</span>
                    <span
                      className={cn(
                        'text-[10px] font-mono tabular-nums shrink-0 px-1.5 py-0.5 rounded',
                        isSelected
                          ? 'bg-primary/20 text-primary'
                          : 'bg-muted/40 text-muted-foreground/40'
                      )}
                    >
                      {unitCount}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Right panel: converter + results */}
        <div
          className={cn(
            'lg:col-span-3 flex flex-col gap-3 overflow-hidden',
            tab !== 'convert' && 'hidden lg:flex'
          )}
        >
          {/* Converter card */}
          <div className="glass rounded-xl p-4 shrink-0">
            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-3">
              Convert {formatMeasureName(selectedMeasure)}
            </span>

            {/* Input row */}
            <div className="flex flex-col gap-2">
              {/* Value input */}
              <input
                type="text"
                inputMode="decimal"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="0"
                className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2.5 text-base font-mono outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/30 tabular-nums"
              />

              {/* Unit selectors + swap */}
              <div className="flex items-center gap-2">
                {/* From unit */}
                <select
                  value={selectedUnit}
                  onChange={(e) => setSelectedUnit(e.target.value)}
                  className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer"
                >
                  {units.map((unit) => (
                    <option key={unit} value={unit}>{unit}</option>
                  ))}
                </select>

                {/* Swap */}
                <button
                  onClick={handleSwapUnits}
                  title="Swap units"
                  className="shrink-0 w-8 h-8 flex items-center justify-center glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all"
                >
                  <ArrowLeftRight className="w-3.5 h-3.5" />
                </button>

                {/* To unit */}
                <select
                  value={targetUnit}
                  onChange={(e) => setTargetUnit(e.target.value)}
                  className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer"
                >
                  {units.map((unit) => (
                    <option key={unit} value={unit}>{unit}</option>
                  ))}
                </select>
              </div>
            </div>

            {/* Result display */}
            {resultValue !== null && (
              <div className="mt-3 px-3 py-2.5 rounded-lg bg-primary/5 border border-primary/15">
                <div className="flex items-center justify-between mb-0.5">
                  <div className="text-[10px] text-muted-foreground/50 font-mono">Result</div>
                  <button
                    onClick={() => {
                      const text = `${formatNumber(resultValue)} ${targetUnit}`;
                      navigator.clipboard.writeText(text);
                      toast.success('Copied', { description: text, duration: 2000 });
                    }}
                    title="Copy result"
                    className="w-5 h-5 flex items-center justify-center rounded text-muted-foreground/40 hover:text-primary transition-colors"
                  >
                    <Copy className="w-3 h-3" />
                  </button>
                </div>
                <div className="flex items-baseline gap-2">
                  <span className="text-xl font-bold tabular-nums font-mono bg-gradient-to-r from-primary to-pink-400 bg-clip-text text-transparent">
                    {formatNumber(resultValue)}
                  </span>
                  <span className="text-sm text-muted-foreground/60 font-mono">{targetUnit}</span>
                </div>
              </div>
            )}
          </div>

          {/* All conversions */}
          <div className="glass rounded-xl p-3 flex flex-col flex-1 min-h-0 overflow-hidden">
            <div className="flex items-center justify-between mb-3 shrink-0">
              <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                All Conversions
              </span>
              {/* Grid / Chart toggle */}
              <div className="flex glass rounded-lg p-0.5 gap-0.5">
                <button
                  onClick={() => setShowChart(false)}
                  title="Grid view"
                  className={cn(
                    'flex items-center gap-1 px-2 py-1 rounded-md text-xs transition-all',
                    !showChart
                      ? 'bg-primary text-primary-foreground shadow-sm'
                      : 'text-muted-foreground hover:text-foreground'
                  )}
                >
                  <Grid3X3 className="w-3 h-3" />
                </button>
                <button
                  onClick={() => setShowChart(true)}
                  title="Chart view"
                  className={cn(
                    'flex items-center gap-1 px-2 py-1 rounded-md text-xs transition-all',
                    showChart
                      ? 'bg-primary text-primary-foreground shadow-sm'
                      : 'text-muted-foreground hover:text-foreground'
                  )}
                >
                  <BarChart3 className="w-3 h-3" />
                </button>
              </div>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent pr-0.5">
              {showChart ? (
                <VisualComparison conversions={conversions} onValueChange={handleValueChange} />
              ) : (
                <div className="grid grid-cols-2 lg:grid-cols-3 gap-2">
                  {conversions.map((conversion) => {
                    const isTarget = targetUnit === conversion.unit;
                    return (
                      <button
                        key={conversion.unit}
                        onClick={() => setTargetUnit(conversion.unit)}
                        className={cn(
                          'p-2.5 rounded-lg border text-left transition-all',
                          isTarget
                            ? 'border-primary/50 bg-primary/10 text-primary'
                            : 'border-border/30 hover:border-primary/30 hover:bg-primary/6 text-foreground/75'
                        )}
                      >
                        <div className="text-[10px] text-muted-foreground/50 font-mono truncate mb-0.5">
                          {conversion.unitInfo.plural}
                        </div>
                        <div className="text-sm font-bold tabular-nums font-mono leading-none">
                          {formatNumber(conversion.value)}
                        </div>
                        <div className="text-[10px] text-muted-foreground/40 font-mono mt-0.5">
                          {conversion.unit}
                        </div>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}