kit-ui/components/figlet/FigletConverter.tsx

'use client';

import * as React from 'react';
import { TextInput } from './TextInput';
import { FontPreview } from './FontPreview';
import { FontSelector } from './FontSelector';
import { textToAscii } from '@/lib/figlet/figletService';
import { getFontList } from '@/lib/figlet/fontLoader';
import { debounce } from '@/lib/utils/debounce';
import { addRecentFont } from '@/lib/storage/favorites';
import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
import { toast } from 'sonner';
import type { FigletFont } from '@/types/figlet';

export function FigletConverter() {
  const [text, setText] = React.useState('Figlet');
  const [selectedFont, setSelectedFont] = React.useState('Standard');
  const [asciiArt, setAsciiArt] = React.useState('');
  const [fonts, setFonts] = React.useState<FigletFont[]>([]);
  const [isLoading, setIsLoading] = React.useState(false);

  // Load fonts and check URL params on mount
  React.useEffect(() => {
    getFontList().then(setFonts);

    // Check for URL parameters
    const urlState = decodeFromUrl();
    if (urlState) {
      if (urlState.text) setText(urlState.text);
      if (urlState.font) setSelectedFont(urlState.font);
    }
  }, []);

  // Generate ASCII art
  const generateAsciiArt = React.useMemo(
    () => debounce(async (inputText: string, fontName: string) => {
      if (!inputText) {
        setAsciiArt('');
        setIsLoading(false);
        return;
      }

      setIsLoading(true);
      try {
        const result = await textToAscii(inputText, fontName);
        setAsciiArt(result);
      } catch (error) {
        console.error('Error generating ASCII art:', error);
        setAsciiArt('Error generating ASCII art. Please try a different font.');
      } finally {
        setIsLoading(false);
      }
    }, 300),
    []
  );

  // Trigger generation when text or font changes
  React.useEffect(() => {
    generateAsciiArt(text, selectedFont);
    // Track recent fonts
    if (selectedFont) {
      addRecentFont(selectedFont);
    }
    // Update URL
    updateUrl(text, selectedFont);
  }, [text, selectedFont, generateAsciiArt]);

  // Copy to clipboard
  const handleCopy = async () => {
    if (!asciiArt) return;

    try {
      await navigator.clipboard.writeText(asciiArt);
      toast.success('Copied to clipboard!');
    } catch (error) {
      console.error('Failed to copy:', error);
      toast.error('Failed to copy');
    }
  };

  // Download as text file
  const handleDownload = () => {
    if (!asciiArt) return;

    const blob = new Blob([asciiArt], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `figlet-${selectedFont}-${Date.now()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // Share (copy URL to clipboard)
  const handleShare = async () => {
    const shareUrl = getShareableUrl(text, selectedFont);

    try {
      await navigator.clipboard.writeText(shareUrl);
      toast.success('Shareable URL copied!');
    } catch (error) {
      console.error('Failed to copy URL:', error);
      toast.error('Failed to copy URL');
    }
  };

  // Random font
  const handleRandomFont = () => {
    if (fonts.length === 0) return;
    const randomIndex = Math.floor(Math.random() * fonts.length);
    setSelectedFont(fonts[randomIndex].name);
    toast.info(`Random font: ${fonts[randomIndex].name}`);
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch lg:max-h-[800px]">
      {/* Left Column - Input and Preview */}
      <div className="lg:col-span-2 space-y-6 overflow-y-auto custom-scrollbar">
        <TextInput
          value={text}
          onChange={setText}
          placeholder="Type your text here..."
        />

        <FontPreview
          text={asciiArt}
          font={selectedFont}
          isLoading={isLoading}
          onCopy={handleCopy}
          onDownload={handleDownload}
          onShare={handleShare}
        />
      </div>

      {/* Right Column - Font Selector */}
      <div className="lg:col-span-1 h-[500px] lg:h-auto relative">
        <div className="lg:absolute lg:inset-0 h-full">
          <FontSelector
            fonts={fonts}
            selectedFont={selectedFont}
            onSelectFont={setSelectedFont}
            onRandomFont={handleRandomFont}
            className="h-full"
          />
        </div>
      </div>
    </div>
  );
}