'use client';

import { useState, useEffect, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { ColorPicker } from '@/components/color/ColorPicker';
import { ColorInfo } from '@/components/color/ColorInfo';
import { ManipulationPanel } from '@/components/color/ManipulationPanel';
import { PaletteGrid } from '@/components/color/PaletteGrid';
import { ExportMenu } from '@/components/color/ExportMenu';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/color/api/queries';
import { Loader2, Share2, Palette, Plus, X, Layers } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { toast } from 'sonner';

type HarmonyType =
  | 'monochromatic'
  | 'analogous'
  | 'complementary'
  | 'triadic'
  | 'tetradic';

function ColorManipulationContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [color, setColor] = useState(() => {
    const urlColor = searchParams.get('color');
    return urlColor ? `#${urlColor.replace('#', '')}` : '#ff0099';
  });

  // Harmony state
  const [harmonyType, setHarmonyType] = useState<HarmonyType>('complementary');
  const [palette, setPalette] = useState<string[]>([]);
  const paletteMutation = useGeneratePalette();

  // Gradient state
  const [stops, setStops] = useState<string[]>(['#ff0099', '#0099ff']);
  const [gradientCount, setGradientCount] = useState(10);
  const [gradientResult, setGradientResult] = useState<string[]>([]);
  const gradientMutation = useGenerateGradient();

  const { data, isLoading, isError, error } = useColorInfo({
    colors: [color],
  });

  const colorInfo = data?.colors[0];

  // Update URL when color changes
  useEffect(() => {
    const hex = color.replace('#', '');
    if (hex.length === 6 || hex.length === 3) {
      router.push(`/color?color=${hex}`, { scroll: false });
    }
  }, [color, router]);

  // Sync first gradient stop with active color
  useEffect(() => {
    const newStops = [...stops];
    newStops[0] = color;
    setStops(newStops);
  }, [color]);

  const handleShare = () => {
    const url = `${window.location.origin}/color?color=${color.replace('#', '')}`;
    navigator.clipboard.writeText(url);
    toast.success('Link copied to clipboard!');
  };

  const generateHarmony = async () => {
    try {
      const result = await paletteMutation.mutateAsync({
        base: color,
        scheme: harmonyType,
      });

      const colors = [result.palette.primary, ...result.palette.secondary];
      setPalette(colors);
      toast.success(`Generated ${harmonyType} harmony palette`);
    } catch (error) {
      toast.error('Failed to generate harmony palette');
      console.error(error);
    }
  };

  const generateGradient = async () => {
    try {
      const result = await gradientMutation.mutateAsync({
        stops,
        count: gradientCount,
      });
      setGradientResult(result.gradient);
      toast.success(`Generated ${result.gradient.length} colors`);
    } catch (error) {
      toast.error('Failed to generate gradient');
    }
  };

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

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

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

  const harmonyDescriptions: Record<HarmonyType, string> = {
    monochromatic: 'Single color with variations',
    analogous: 'Colors adjacent on the color wheel (±30°)',
    complementary: 'Colors opposite on the color wheel (180°)',
    triadic: 'Three colors evenly spaced on the color wheel (120°)',
    tetradic: 'Four colors evenly spaced on the color wheel (90°)',
  };

  return (
    <div className="space-y-6">
      {/* Row 1: Workspace */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
        {/* Main Workspace: Color Picker and Information */}
        <div className="lg:col-span-2">
          <Card className="h-full">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle>Color Picker</CardTitle>
              <Button onClick={handleShare} variant="outline" size="xs">
                <Share2 className="h-3 w-3 mr-1" />
                Share
              </Button>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col md:flex-row gap-8">
                <div className="flex-shrink-0 mx-auto md:mx-0">
                  <ColorPicker color={color} onChange={setColor} />
                </div>

                <div className="flex-1 min-w-0">
                  {isLoading && (
                    <div className="flex items-center justify-center py-12">
                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                    </div>
                  )}

                  {isError && (
                    <div className="p-3 bg-destructive/10 text-destructive rounded-lg text-sm">
                      <p className="font-medium">Error loading color information</p>
                      <p className="mt-1">{error?.message || 'Unknown error'}</p>
                    </div>
                  )}

                  {colorInfo && <ColorInfo info={colorInfo} />}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Sidebar: Color Manipulation */}
        <div className="lg:col-span-1">
          <Card className="h-full">
            <CardHeader>
              <CardTitle>Adjustments</CardTitle>
            </CardHeader>
            <CardContent>
              <ManipulationPanel color={color} onColorChange={setColor} />
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Row 2: Harmony Generator */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
        {/* Harmony Controls */}
        <div className="lg:col-span-1">
          <Card className="h-full">
            <CardHeader>
              <CardTitle>Harmony</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Select
                value={harmonyType}
                onValueChange={(value) => setHarmonyType(value as HarmonyType)}
              >
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="Select harmony" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="monochromatic">Monochromatic</SelectItem>
                  <SelectItem value="analogous">Analogous</SelectItem>
                  <SelectItem value="complementary">Complementary</SelectItem>
                  <SelectItem value="triadic">Triadic</SelectItem>
                  <SelectItem value="tetradic">Tetradic (Square)</SelectItem>
                </SelectContent>
              </Select>

              <p className="text-xs text-muted-foreground">
                {harmonyDescriptions[harmonyType]}
              </p>

              <Button
                onClick={generateHarmony}
                disabled={paletteMutation.isPending}
                className="w-full"
              >
                {paletteMutation.isPending ? (
                  <>
                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                    Generating...
                  </>
                ) : (
                  'Generate'
                )}
              </Button>
            </CardContent>
          </Card>
        </div>

        {/* Harmony Results */}
        <div className="lg:col-span-2">
          <Card className="h-full">
            <CardHeader>
              <CardTitle>
                Palette {palette.length > 0 && <span className="text-muted-foreground font-normal text-sm ml-1">({palette.length})</span>}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {palette.length > 0 ? (
                <div className="space-y-5">
                  <PaletteGrid colors={palette} onColorClick={setColor} />
                  <div className="pt-3 border-t">
                    <ExportMenu colors={palette} />
                  </div>
                </div>
              ) : (
                <div className="py-8 text-center text-muted-foreground text-xs">
                  <Palette className="h-8 w-8 mx-auto mb-2 opacity-20" />
                  <p>Generate a harmony palette from the current color</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Row 3: Gradient Generator */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
        {/* Gradient Controls */}
        <div className="lg:col-span-1">
          <Card className="h-full">
            <CardHeader>
              <CardTitle>Gradient</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label className="text-xs">Color Stops</Label>
                {stops.map((stop, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <Input
                      type="color"
                      value={stop}
                      onChange={(e) => updateStop(index, e.target.value)}
                      className="w-9 h-9 p-1 shrink-0 cursor-pointer"
                    />
                    <Input
                      type="text"
                      value={stop}
                      onChange={(e) => updateStop(index, e.target.value)}
                      className="font-mono text-xs flex-1"
                    />
                    {index !== 0 && stops.length > 2 && (
                      <Button
                        variant="ghost"
                        size="icon-xs"
                        onClick={() => removeStop(index)}
                      >
                        <X className="h-3.5 w-3.5" />
                      </Button>
                    )}
                  </div>
                ))}
                <Button onClick={addStop} variant="outline" className="w-full">
                  <Plus className="h-3.5 w-3.5 mr-1.5" />
                  Add Stop
                </Button>
              </div>

              <div className="space-y-2">
                <Label className="text-xs">Steps</Label>
                <Input
                  type="number"
                  min={2}
                  max={100}
                  value={gradientCount}
                  onChange={(e) => setGradientCount(parseInt(e.target.value))}
                />
              </div>

              <Button
                onClick={generateGradient}
                disabled={gradientMutation.isPending}
                className="w-full"
              >
                {gradientMutation.isPending ? (
                  <>
                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                    Generating...
                  </>
                ) : (
                  'Generate'
                )}
              </Button>
            </CardContent>
          </Card>
        </div>

        {/* Gradient Results */}
        <div className="lg:col-span-2">
          <Card className="h-full">
            <CardHeader>
              <CardTitle>
                Gradient {gradientResult.length > 0 && <span className="text-muted-foreground font-normal text-sm ml-1">({gradientResult.length})</span>}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {gradientResult.length > 0 ? (
                <div className="space-y-5">
                  <div
                    className="h-16 w-full rounded-lg border"
                    style={{
                      background: `linear-gradient(to right, ${gradientResult.join(', ')})`,
                    }}
                  />
                  <PaletteGrid colors={gradientResult} onColorClick={setColor} />
                  <div className="pt-3 border-t">
                    <ExportMenu colors={gradientResult} />
                  </div>
                </div>
              ) : (
                <div className="py-8 text-center text-muted-foreground text-xs">
                  <Layers className="h-8 w-8 mx-auto mb-2 opacity-20" />
                  <p>Add color stops and generate a smooth gradient</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

export function ColorManipulation() {
  return (
    <Suspense fallback={
      <div className="flex items-center justify-center py-12">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    }>
      <ColorManipulationContent />
    </Suspense>
  );
}
