kit-ui/components/units/MainConverter.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { ArrowLeftRight, BarChart3, Grid3X3 } from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
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';

type Tab = 'category' | 'convert';

const CATEGORY_ICONS: Partial<Record<Measure, string>> = {
  length: '📏', mass: '⚖️', temperature: '🌡️', speed: '⚡', time: '⏱️',
  area: '⬛', volume: '🧊', digital: '💾', energy: '⚡', pressure: '🔵',
  power: '🔆', frequency: '〰️', angle: '📐', current: '⚡', voltage: '🔌',
};

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">

      {/* ── Mobile tab switcher ────────────────────────────────── */}
      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
        {(['category', 'convert'] as Tab[]).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={cn(
              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
              tab === t
                ? 'bg-primary text-primary-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            {t === 'category' ? 'Category' : 'Convert'}
          </button>
        ))}
      </div>

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

        {/* 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',
                      'border-l-2',
                      isSelected
                        ? 'bg-primary/10 border-primary text-primary'
                        : 'border-transparent text-foreground/65 hover:bg-primary/8 hover:text-foreground'
                    )}
                  >
                    <span className="text-xs leading-none shrink-0 opacity-70">
                      {CATEGORY_ICONS[measure] ?? '📦'}
                    </span>
                    <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 items-center gap-2">
              {/* Value input */}
              <input
                type="text"
                inputMode="decimal"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="0"
                className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/30 tabular-nums"
              />

              {/* From unit */}
              <Select value={selectedUnit} onValueChange={setSelectedUnit}>
                <SelectTrigger className="w-28 h-9 shrink-0 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors font-mono">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {units.map((unit) => (
                    <SelectItem key={unit} value={unit} className="font-mono text-xs">
                      {unit}
                    </SelectItem>
                  ))}
                </SelectContent>
              </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} onValueChange={setTargetUnit}>
                <SelectTrigger className="w-28 h-9 shrink-0 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors font-mono">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {units.map((unit) => (
                    <SelectItem key={unit} value={unit} className="font-mono text-xs">
                      {unit}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </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="text-[10px] text-muted-foreground/50 font-mono mb-0.5">Result</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>
  );
}