kit-ui/components/color/ExportMenu.tsx

'use client';

import { useState, useEffect } from 'react';
import { Download, 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 { CodeSnippet } from '@/components/ui/code-snippet';
import { cn, actionBtn } from '@/lib/utils';

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

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

const selectCls =
  'flex-1 bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer';


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);

  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 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}
          onChange={(e) => setFormat(e.target.value as ExportFormat)}
          className={selectCls}
        >
          <option value="css">CSS Vars</option>
          <option value="scss">SCSS</option>
          <option value="tailwind">Tailwind</option>
          <option value="json">JSON</option>
          <option value="javascript">JS Array</option>
        </select>
        <select
          value={colorSpace}
          onChange={(e) => setColorSpace(e.target.value as ColorSpace)}
          className={selectCls}
        >
          {['hex', 'rgb', 'hsl', 'lab', 'oklab', 'lch', 'oklch'].map((s) => (
            <option key={s} value={s}>{s}</option>
          ))}
        </select>
      </div>

      {/* Code preview */}
      <div className="relative">
        {isConverting && (
          <div className="absolute inset-0 flex items-center justify-center z-20 rounded-xl bg-black/40">
            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
          </div>
        )}
        <CodeSnippet code={getContent()} />
      </div>

      {/* Actions */}
      <button onClick={handleDownload} disabled={isConverting} className={cn(actionBtn, 'w-full justify-center')}>
        <Download className="w-3 h-3" />
        Download
      </button>
    </div>
  );
}