kit-ui/components/ascii/ASCIIConverter.tsx

'use client';

import * as React from 'react';
import { TextInput } from './TextInput';
import { FontPreview } from './FontPreview';
import { FontSelector } from './FontSelector';
import { textToAscii } from '@/lib/ascii/asciiService';
import { getFontList } from '@/lib/ascii/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 { ASCIIFont } from '@/types/ascii';
import { cn } from '@/lib/utils';
import { MobileTabs } from '@/components/ui/mobile-tabs';

type Tab = 'editor' | 'preview';

export function ASCIIConverter() {
  const [text, setText] = React.useState('ASCII');
  const [selectedFont, setSelectedFont] = React.useState('Standard');
  const [asciiArt, setAsciiArt] = React.useState('');
  const [fonts, setFonts] = React.useState<ASCIIFont[]>([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const [tab, setTab] = React.useState<Tab>('editor');
  const commentedTextRef = React.useRef('');

  React.useEffect(() => {
    getFontList().then(setFonts);
    const urlState = decodeFromUrl();
    if (urlState) {
      if (urlState.text) setText(urlState.text);
      if (urlState.font) setSelectedFont(urlState.font);
    }
  }, []);

  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 {
          setAsciiArt('Error generating ASCII art. Please try a different font.');
        } finally {
          setIsLoading(false);
        }
      }, 300),
    []
  );

  React.useEffect(() => {
    generateAsciiArt(text, selectedFont);
    if (selectedFont) addRecentFont(selectedFont);
    updateUrl(text, selectedFont);
  }, [text, selectedFont, generateAsciiArt]);

  const handleCopy = async () => {
    if (!asciiArt) return;
    try {
      await navigator.clipboard.writeText(commentedTextRef.current || asciiArt);
      toast.success('Copied to clipboard!');
    } catch {
      toast.error('Failed to copy');
    }
  };

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

  const handleShare = async () => {
    try {
      await navigator.clipboard.writeText(getShareableUrl(text, selectedFont));
      toast.success('Shareable URL copied!');
    } catch {
      toast.error('Failed to copy URL');
    }
  };

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

  return (
    <div className="flex flex-col gap-4">

      <MobileTabs
        tabs={[{ value: 'editor', label: 'Editor' }, { value: 'preview', label: 'Preview' }]}
        active={tab}
        onChange={(v) => setTab(v as Tab)}
      />

      {/* ── Main layout ────────────────────────────────────────── */}
      <div
        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
        style={{ height: 'calc(100svh - 120px)'  }}
      >
        {/* Left panel: text input + font selector */}
        <div
          className={cn(
            'lg:col-span-2 flex flex-col gap-3 overflow-hidden',
            tab !== 'editor' && 'hidden lg:flex'
          )}
        >
          {/* Text input */}
          <div className="glass rounded-xl p-4 shrink-0">
            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
              Text
            </span>
            <TextInput
              value={text}
              onChange={setText}
              placeholder="Type your text here…"
            />
          </div>

          {/* Font selector — fills remaining height */}
          <div className="flex-1 min-h-0 overflow-hidden">
            <FontSelector
              fonts={fonts}
              selectedFont={selectedFont}
              onSelectFont={setSelectedFont}
              onRandomFont={handleRandomFont}
              className="h-full"
            />
          </div>
        </div>

        {/* Right panel: preview */}
        <div
          className={cn(
            'lg:col-span-3 flex flex-col overflow-hidden',
            tab !== 'preview' && 'hidden lg:flex'
          )}
        >
          <FontPreview
            text={asciiArt}
            font={selectedFont}
            isLoading={isLoading}
            onCopy={handleCopy}
            onDownload={handleDownload}
            onShare={handleShare}
            onCommentedTextChange={React.useCallback(
              (t: string) => { commentedTextRef.current = t; },
              []
            )}
          />
        </div>
      </div>

    </div>
  );
}