kit-ui/components/color/ExportMenu.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
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';
import { cn } from '@/lib/utils/cn';

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

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

const actionBtn =
  'flex items-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';

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 {
        toast.error('Failed to convert colors');
      } finally {
        setIsConverting(false);
      }
    }
    convertColors();
  }, [colors, colorSpace]);

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

  const getContent = (): 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 getExt = () => ({ css: 'css', scss: 'scss', tailwind: 'js', json: 'json', javascript: 'js' }[format]);

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

  const handleDownload = () => {
    downloadAsFile(getContent(), `palette.${getExt()}`, 'text/plain');
    toast.success('Downloaded!');
  };

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

  return (
    <div className={cn('space-y-3', className)}>
      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Export</span>

      {/* Selectors */}
      <div className="flex gap-2">
        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="css">CSS Vars</SelectItem>
            <SelectItem value="scss">SCSS</SelectItem>
            <SelectItem value="tailwind">Tailwind</SelectItem>
            <SelectItem value="json">JSON</SelectItem>
            <SelectItem value="javascript">JS Array</SelectItem>
          </SelectContent>
        </Select>
        <Select value={colorSpace} onValueChange={(v) => setColorSpace(v as ColorSpace)}>
          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {['hex', 'rgb', 'hsl', 'lab', 'oklab', 'lch', 'oklch'].map((s) => (
              <SelectItem key={s} value={s} className="font-mono text-xs">{s}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Code preview */}
      <div
        className="relative rounded-xl overflow-hidden border border-white/5 min-h-[80px]"
        style={{ background: '#06060e' }}
      >
        {isConverting && (
          <div className="absolute inset-0 flex items-center justify-center z-10 bg-black/30">
            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
          </div>
        )}
        <pre className="p-3 text-[10px] font-mono text-white/60 overflow-x-auto leading-relaxed">
          <code>{getContent()}</code>
        </pre>
      </div>

      {/* Actions */}
      <div className="flex gap-2">
        <button onClick={handleCopy} disabled={isConverting} className={cn(actionBtn, 'flex-1 justify-center')}>
          {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
          {copied ? 'Copied' : 'Copy'}
        </button>
        <button onClick={handleDownload} disabled={isConverting} className={cn(actionBtn, 'flex-1 justify-center')}>
          <Download className="w-3 h-3" />
          Download
        </button>
      </div>
    </div>
  );
}