pastel-ui/app/palettes/distinct/page.tsx

'use client';

import { useState } from 'react';
import { PaletteGrid } from '@/components/color/PaletteGrid';
import { ExportMenu } from '@/components/tools/ExportMenu';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { useGenerateDistinct } from '@/lib/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 [stats, setStats] = useState<{
    min_distance: number;
    avg_distance: number;
    generation_time_ms: number;
  } | null>(null);

  const generateMutation = useGenerateDistinct();

  const handleGenerate = async () => {
    try {
      const result = await generateMutation.mutateAsync({
        count,
        metric,
      });
      setColors(result.colors);
      setStats(result.stats);
      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">
            <div className="p-6 border rounded-lg bg-card space-y-6">
              <div>
                <h2 className="text-xl font-semibold mb-4">Settings</h2>
              </div>

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

              <Select
                label="Distance Metric"
                value={metric}
                onChange={(e) => setMetric(e.target.value as 'cie76' | 'ciede2000')}
              >
                <option value="cie76">CIE76 (Faster)</option>
                <option value="ciede2000">CIEDE2000 (More Accurate)</option>
              </Select>

              <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>
              )}

              {stats && (
                <div className="pt-4 border-t space-y-2">
                  <h3 className="font-semibold text-sm">Statistics</h3>
                  <div className="space-y-1 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Min Distance:</span>
                      <span className="font-mono">{stats.min_distance.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Avg Distance:</span>
                      <span className="font-mono">{stats.avg_distance.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Generation Time:</span>
                      <span className="font-mono">
                        {(stats.generation_time_ms / 1000).toFixed(2)}s
                      </span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Results */}
          <div className="lg:col-span-2 space-y-6">
            <div className="p-6 border rounded-lg bg-card">
              <h2 className="text-xl font-semibold mb-4">
                Generated Colors {colors.length > 0 && `(${colors.length})`}
              </h2>
              <PaletteGrid colors={colors} />
            </div>

            {colors.length > 0 && (
              <div className="p-6 border rounded-lg bg-card">
                <ExportMenu colors={colors} />
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}