'use client';

import { useState } from 'react';
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
import { ExportMenu } from '@/components/pastel/ExportMenu';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useGenerateDistinct } from '@/lib/pastel/api/queries';
import { Loader2 } from 'lucide-react';
import { toast } from 'sonner';

export default function DistinctPage() {
  const [count, setCount] = useState(8);
  const [metric, setMetric] = useState<'cie76' | 'ciede2000'>('ciede2000');
  const [colors, setColors] = useState<string[]>([]);

  const generateMutation = useGenerateDistinct();

  const handleGenerate = async () => {
    try {
      const result = await generateMutation.mutateAsync({
        count,
        metric,
      });
      setColors(result.colors);
      toast.success(`Generated ${result.colors.length} distinct colors`);
    } catch (error) {
      toast.error('Failed to generate distinct colors');
    }
  };

  return (
    <div className="min-h-screen py-12">
      <div className="max-w-7xl mx-auto px-8 space-y-8">
        <div>
          <h1 className="text-4xl font-bold mb-2">Distinct Colors Generator</h1>
          <p className="text-muted-foreground">
            Generate visually distinct colors using simulated annealing
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Controls */}
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Settings</CardTitle>
              </CardHeader>

              <CardContent className="space-y-6">
                <div>
                  <label htmlFor="count" className="text-sm font-medium mb-2 block">
                    Number of Colors
                  </label>
                  <Input
                    id="count"
                    type="number"
                    min={2}
                    max={100}
                    value={count}
                    onChange={(e) => setCount(parseInt(e.target.value))}
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    Higher counts take longer to generate
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium block">
                    Distance Metric
                  </label>
                  <Select
                    value={metric}
                    onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Select metric" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="cie76">CIE76 (Faster)</SelectItem>
                      <SelectItem value="ciede2000">CIEDE2000 (More Accurate)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Button
                  onClick={handleGenerate}
                  disabled={generateMutation.isPending}
                  className="w-full"
                >
                  {generateMutation.isPending ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Generating..
                    </>
                  ) : (
                    'Generate Colors'
                  )}
                </Button>

                {generateMutation.isPending && (
                  <div className="text-sm text-muted-foreground text-center">
                    This may take a few moments..
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Results */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">
                  Generated Colors {colors.length > 0 && `(${colors.length})`}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <PaletteGrid colors={colors} />
              </CardContent>
            </Card>

            {colors.length > 0 && (
              <Card>
                <CardContent className="pt-6">
                  <ExportMenu colors={colors} />
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}