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

'use client';

import { useState } from 'react';
import { ColorPicker } from '@/components/color/ColorPicker';
import { PaletteGrid } from '@/components/color/PaletteGrid';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { useGenerateGradient } from '@/lib/api/queries';
import { Loader2, Plus, X } from 'lucide-react';
import { toast } from 'sonner';

export default function GradientPage() {
  const [stops, setStops] = useState<string[]>(['#ff0099', '#0099ff']);
  const [count, setCount] = useState(10);
  const [colorspace, setColorspace] = useState<
    'rgb' | 'hsl' | 'hsv' | 'lab' | 'oklab' | 'lch' | 'oklch'
  >('lch');
  const [gradient, setGradient] = useState<string[]>([]);

  const generateMutation = useGenerateGradient();

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

  const addStop = () => {
    setStops([...stops, '#000000']);
  };

  const removeStop = (index: number) => {
    if (stops.length > 2) {
      setStops(stops.filter((_, i) => i !== index));
    }
  };

  const updateStop = (index: number, color: string) => {
    const newStops = [...stops];
    newStops[index] = color;
    setStops(newStops);
  };

  return (
    <div className="min-h-screen p-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <div>
          <h1 className="text-4xl font-bold mb-2">Gradient Creator</h1>
          <p className="text-muted-foreground">
            Create smooth color gradients with multiple stops
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Controls */}
          <div className="space-y-6">
            <div className="p-6 border rounded-lg bg-card">
              <h2 className="text-xl font-semibold mb-4">Color Stops</h2>
              <div className="space-y-4">
                {stops.map((stop, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <div className="flex-1">
                      <ColorPicker
                        color={stop}
                        onChange={(color) => updateStop(index, color)}
                      />
                    </div>
                    {stops.length > 2 && (
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => removeStop(index)}
                        className="mt-8"
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                ))}
                <Button onClick={addStop} variant="outline" className="w-full">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Stop
                </Button>
              </div>
            </div>

            <div className="p-6 border rounded-lg bg-card">
              <h2 className="text-xl font-semibold mb-4">Settings</h2>
              <div className="space-y-4">
                <div>
                  <label htmlFor="count" className="text-sm font-medium mb-2 block">
                    Number of Colors
                  </label>
                  <Input
                    id="count"
                    type="number"
                    min={2}
                    max={1000}
                    value={count}
                    onChange={(e) => setCount(parseInt(e.target.value))}
                  />
                </div>

                <Select
                  label="Color Space"
                  value={colorspace}
                  onChange={(e) =>
                    setColorspace(
                      e.target.value as
                        | 'rgb'
                        | 'hsl'
                        | 'hsv'
                        | 'lab'
                        | 'oklab'
                        | 'lch'
                        | 'oklch'
                    )
                  }
                >
                  <option value="rgb">RGB</option>
                  <option value="hsl">HSL</option>
                  <option value="hsv">HSV</option>
                  <option value="lab">Lab</option>
                  <option value="oklab">OkLab</option>
                  <option value="lch">LCH</option>
                  <option value="oklch">OkLCH (Recommended)</option>
                </Select>

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

          {/* Preview */}
          <div className="space-y-6">
            {gradient.length > 0 && (
              <>
                <div className="p-6 border rounded-lg bg-card">
                  <h2 className="text-xl font-semibold mb-4">Gradient Preview</h2>
                  <div
                    className="h-32 rounded-lg"
                    style={{
                      background: `linear-gradient(to right, ${gradient.join(', ')})`,
                    }}
                  />
                </div>

                <div className="p-6 border rounded-lg bg-card">
                  <h2 className="text-xl font-semibold mb-4">
                    Colors ({gradient.length})
                  </h2>
                  <PaletteGrid colors={gradient} />
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}