'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
  getAllMeasures,
  getUnitsForMeasure,
  convertToAll,
  formatMeasureName,
  getCategoryColor,
  type Measure,
  type ConversionResult,
} from '@/lib/units';
import { parseNumberInput, formatNumber } from '@/lib/utils';

export default function MainConverter() {
  const [selectedMeasure, setSelectedMeasure] = useState<Measure>('length');
  const [selectedUnit, setSelectedUnit] = useState<string>('m');
  const [inputValue, setInputValue] = useState<string>('1');
  const [conversions, setConversions] = useState<ConversionResult[]>([]);

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

  // Update conversions when input changes
  useEffect(() => {
    const numValue = parseNumberInput(inputValue);
    if (numValue !== null && selectedUnit) {
      const results = convertToAll(numValue, selectedUnit);
      setConversions(results);
    } else {
      setConversions([]);
    }
  }, [inputValue, selectedUnit]);

  // Update selected unit when measure changes
  useEffect(() => {
    const availableUnits = getUnitsForMeasure(selectedMeasure);
    if (availableUnits.length > 0) {
      setSelectedUnit(availableUnits[0]);
    }
  }, [selectedMeasure]);

  return (
    <div className="w-full max-w-6xl mx-auto space-y-6">
      {/* Category Selection */}
      <Card>
        <CardHeader>
          <CardTitle>Select Category</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
            {measures.map((measure) => (
              <Button
                key={measure}
                variant={selectedMeasure === measure ? 'default' : 'outline'}
                size="sm"
                onClick={() => setSelectedMeasure(measure)}
                className="justify-start"
                style={{
                  backgroundColor:
                    selectedMeasure === measure
                      ? `var(--color-${getCategoryColor(measure)})`
                      : undefined,
                }}
              >
                {formatMeasureName(measure)}
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Input Section */}
      <Card>
        <CardHeader>
          <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-4">
            <div className="flex-1">
              <label className="text-sm font-medium mb-2 block">Value</label>
              <Input
                type="text"
                inputMode="decimal"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="Enter value"
                className="text-lg"
              />
            </div>
            <div className="w-48">
              <label className="text-sm font-medium mb-2 block">From Unit</label>
              <select
                value={selectedUnit}
                onChange={(e) => setSelectedUnit(e.target.value)}
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
              >
                {units.map((unit) => (
                  <option key={unit} value={unit}>
                    {unit}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Results */}
      <Card>
        <CardHeader>
          <CardTitle>Conversions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {conversions.map((conversion) => (
              <div
                key={conversion.unit}
                className="p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
                style={{
                  borderLeftWidth: '4px',
                  borderLeftColor: `var(--color-${getCategoryColor(selectedMeasure)})`,
                }}
              >
                <div className="text-sm text-muted-foreground mb-1">
                  {conversion.unitInfo.plural}
                </div>
                <div className="text-2xl font-bold">
                  {formatNumber(conversion.value)}
                </div>
                <div className="text-sm text-muted-foreground mt-1">
                  {conversion.unit}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}