'use client';

import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useState, useEffect } from 'react';
import { Download, Copy, Check, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import {
  exportAsCSS,
  exportAsSCSS,
  exportAsTailwind,
  exportAsJSON,
  exportAsJavaScript,
  downloadAsFile,
  type ExportColor,
} from '@/lib/color/utils/export';
import { colorAPI } from '@/lib/color/api/client';

interface ExportMenuProps {
  colors: string[];
  className?: string;
}

type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';

export function ExportMenu({ colors, className }: ExportMenuProps) {
  const [format, setFormat] = useState<ExportFormat>('css');
  const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
  const [convertedColors, setConvertedColors] = useState<string[]>(colors);
  const [isConverting, setIsConverting] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    async function convertColors() {
      if (colorSpace === 'hex') {
        setConvertedColors(colors);
        return;
      }

      setIsConverting(true);
      try {
        const response = await colorAPI.convertFormat({
          colors,
          format: colorSpace,
        });

        if (response.success) {
          setConvertedColors(response.data.conversions.map(c => c.output));
        }
      } catch (error) {
        console.error('Failed to convert colors:', error);
        toast.error('Failed to convert colors to selected space');
      } finally {
        setIsConverting(false);
      }
    }

    convertColors();
  }, [colors, colorSpace]);

  const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));

  const getExportContent = (): string => {
    switch (format) {
      case 'css':
        return exportAsCSS(exportColors);
      case 'scss':
        return exportAsSCSS(exportColors);
      case 'tailwind':
        return exportAsTailwind(exportColors);
      case 'json':
        return exportAsJSON(exportColors);
      case 'javascript':
        return exportAsJavaScript(exportColors);
    }
  };

  const getFileExtension = (): string => {
    switch (format) {
      case 'css':
        return 'css';
      case 'scss':
        return 'scss';
      case 'tailwind':
        return 'js';
      case 'json':
        return 'json';
      case 'javascript':
        return 'js';
    }
  };

  const handleCopy = () => {
    const content = getExportContent();
    navigator.clipboard.writeText(content);
    setCopied(true);
    toast.success('Copied to clipboard!');
    setTimeout(() => setCopied(false), 2000);
  };

  const handleDownload = () => {
    const content = getExportContent();
    const extension = getFileExtension();
    downloadAsFile(content, `palette.${extension}`, 'text/plain');
    toast.success('Downloaded!');
  };

  if (colors.length === 0) {
    return null;
  }

  return (
    <div className={className}>
      <div className="space-y-3">
        <div className="flex flex-col md:flex-row gap-3">
          <Select
            value={format}
            onValueChange={(value) => setFormat(value as ExportFormat)}
          >
            <SelectTrigger className="w-full md:flex-1">
              <SelectValue placeholder="Format" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="css">CSS Variables</SelectItem>
              <SelectItem value="scss">SCSS Variables</SelectItem>
              <SelectItem value="tailwind">Tailwind Config</SelectItem>
              <SelectItem value="json">JSON</SelectItem>
              <SelectItem value="javascript">JavaScript Array</SelectItem>
            </SelectContent>
          </Select>

          <Select
            value={colorSpace}
            onValueChange={(value) => setColorSpace(value as ColorSpace)}
          >
            <SelectTrigger className="w-full md:flex-1">
              <SelectValue placeholder="Space" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="hex">Hex</SelectItem>
              <SelectItem value="rgb">RGB</SelectItem>
              <SelectItem value="hsl">HSL</SelectItem>
              <SelectItem value="lab">Lab</SelectItem>
              <SelectItem value="oklab">OkLab</SelectItem>
              <SelectItem value="lch">LCH</SelectItem>
              <SelectItem value="oklch">OkLCH</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="p-3 bg-muted/50 rounded-lg relative min-h-[80px]">
          {isConverting ? (
            <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
            </div>
          ) : null}
          <pre className="text-[11px] overflow-x-auto leading-relaxed">
            <code>{getExportContent()}</code>
          </pre>
        </div>

        <div className="flex flex-col md:flex-row gap-3">
          <Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
            {copied ? (
              <>
                <Check className="h-3.5 w-3.5 mr-1.5" />
                Copied
              </>
            ) : (
              <>
                <Copy className="h-3.5 w-3.5 mr-1.5" />
                Copy
              </>
            )}
          </Button>
          <Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
            <Download className="h-3.5 w-3.5 mr-1.5" />
            Download
          </Button>
        </div>
      </div>
    </div>
  );
}
