'use client';

import { useState } from 'react';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
import {
  useLighten,
  useDarken,
  useSaturate,
  useDesaturate,
  useRotate,
  useComplement
} from '@/lib/color/api/queries';
import { toast } from 'sonner';

interface ManipulationPanelProps {
  color: string;
  onColorChange: (color: string) => void;
}

export function ManipulationPanel({ color, onColorChange }: ManipulationPanelProps) {
  const [lightenAmount, setLightenAmount] = useState(0.2);
  const [darkenAmount, setDarkenAmount] = useState(0.2);
  const [saturateAmount, setSaturateAmount] = useState(0.2);
  const [desaturateAmount, setDesaturateAmount] = useState(0.2);
  const [rotateAmount, setRotateAmount] = useState(30);

  const lightenMutation = useLighten();
  const darkenMutation = useDarken();
  const saturateMutation = useSaturate();
  const desaturateMutation = useDesaturate();
  const rotateMutation = useRotate();
  const complementMutation = useComplement();

  const handleLighten = async () => {
    try {
      const result = await lightenMutation.mutateAsync({
        colors: [color],
        amount: lightenAmount,
      });
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success(`Lightened by ${(lightenAmount * 100).toFixed(0)}%`);
      }
    } catch (error) {
      toast.error('Failed to lighten color');
    }
  };

  const handleDarken = async () => {
    try {
      const result = await darkenMutation.mutateAsync({
        colors: [color],
        amount: darkenAmount,
      });
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success(`Darkened by ${(darkenAmount * 100).toFixed(0)}%`);
      }
    } catch (error) {
      toast.error('Failed to darken color');
    }
  };

  const handleSaturate = async () => {
    try {
      const result = await saturateMutation.mutateAsync({
        colors: [color],
        amount: saturateAmount,
      });
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success(`Saturated by ${(saturateAmount * 100).toFixed(0)}%`);
      }
    } catch (error) {
      toast.error('Failed to saturate color');
    }
  };

  const handleDesaturate = async () => {
    try {
      const result = await desaturateMutation.mutateAsync({
        colors: [color],
        amount: desaturateAmount,
      });
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success(`Desaturated by ${(desaturateAmount * 100).toFixed(0)}%`);
      }
    } catch (error) {
      toast.error('Failed to desaturate color');
    }
  };

  const handleRotate = async () => {
    try {
      const result = await rotateMutation.mutateAsync({
        colors: [color],
        amount: rotateAmount,
      });
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success(`Rotated hue by ${rotateAmount}°`);
      }
    } catch (error) {
      toast.error('Failed to rotate hue');
    }
  };

  const handleComplement = async () => {
    try {
      const result = await complementMutation.mutateAsync([color]);
      if (result.colors[0]) {
        onColorChange(result.colors[0].output);
        toast.success('Generated complementary color');
      }
    } catch (error) {
      toast.error('Failed to generate complement');
    }
  };

  const isLoading =
    lightenMutation.isPending ||
    darkenMutation.isPending ||
    saturateMutation.isPending ||
    desaturateMutation.isPending ||
    rotateMutation.isPending ||
    complementMutation.isPending;

  return (
    <div className="space-y-6">
      {/* Lighten */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Lighten</label>
          <span className="text-xs text-muted-foreground">{(lightenAmount * 100).toFixed(0)}%</span>
        </div>
        <Slider
          min={0}
          max={1}
          step={0.05}
          value={[lightenAmount]}
          onValueChange={(vals) => setLightenAmount(vals[0])}
        />
        <Button onClick={handleLighten} disabled={isLoading} className="w-full">
          Apply Lighten
        </Button>
      </div>

      {/* Darken */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Darken</label>
          <span className="text-xs text-muted-foreground">{(darkenAmount * 100).toFixed(0)}%</span>
        </div>
        <Slider
          min={0}
          max={1}
          step={0.05}
          value={[darkenAmount]}
          onValueChange={(vals) => setDarkenAmount(vals[0])}
        />
        <Button onClick={handleDarken} disabled={isLoading} className="w-full">
          Apply Darken
        </Button>
      </div>

      {/* Saturate */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Saturate</label>
          <span className="text-xs text-muted-foreground">{(saturateAmount * 100).toFixed(0)}%</span>
        </div>
        <Slider
          min={0}
          max={1}
          step={0.05}
          value={[saturateAmount]}
          onValueChange={(vals) => setSaturateAmount(vals[0])}
        />
        <Button onClick={handleSaturate} disabled={isLoading} className="w-full">
          Apply Saturate
        </Button>
      </div>

      {/* Desaturate */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Desaturate</label>
          <span className="text-xs text-muted-foreground">{(desaturateAmount * 100).toFixed(0)}%</span>
        </div>
        <Slider
          min={0}
          max={1}
          step={0.05}
          value={[desaturateAmount]}
          onValueChange={(vals) => setDesaturateAmount(vals[0])}
        />
        <Button onClick={handleDesaturate} disabled={isLoading} className="w-full">
          Apply Desaturate
        </Button>
      </div>

      {/* Rotate Hue */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Rotate Hue</label>
          <span className="text-xs text-muted-foreground">{rotateAmount}°</span>
        </div>
        <Slider
          min={-180}
          max={180}
          step={5}
          value={[rotateAmount]}
          onValueChange={(vals) => setRotateAmount(vals[0])}
        />
        <Button onClick={handleRotate} disabled={isLoading} className="w-full">
          Apply Rotation
        </Button>
      </div>

      {/* Quick Actions */}
      <div className="pt-4 border-t space-y-2">
        <h3 className="text-sm font-medium mb-3">Quick Actions</h3>
        <Button
          onClick={handleComplement}
          disabled={isLoading}
          variant="outline"
          className="w-full"
        >
          Get Complementary Color
        </Button>
      </div>
    </div>
  );
}
