App.tsx

import React, { useState, useRef, useCallback, useEffect } from 'react';
import { OGCardTemplate } from './components/Templates';
import { CardData, ThemeMode } from './types';
import { generateSmartSuggestions } from './services/geminiService';
import * as htmlToImage from 'html-to-image';

const FONTS_DISPLAY = [
  { name: 'Bricolage Grotesque', family: '"Bricolage Grotesque", sans-serif' },
  { name: 'Space Grotesk', family: '"Space Grotesk", sans-serif' },
  { name: 'Playfair Display', family: '"Playfair Display", serif' },
  { name: 'Montserrat', family: '"Montserrat", sans-serif' },
  { name: 'Inter', family: '"Inter", sans-serif' },
];

const FONTS_BODY = [
  { name: 'Space Grotesk', family: '"Space Grotesk", sans-serif' },
  { name: 'Inter', family: '"Inter", sans-serif' },
  { name: 'Lora', family: '"Lora", serif' },
  { name: 'Montserrat', family: '"Montserrat", sans-serif' },
];

const GRADIENT_DIRECTIONS = [
  { name: 'To Right', value: 'to right' },
  { name: 'To Bottom', value: 'to bottom' },
  { name: 'To Bottom Right', value: 'to bottom right' },
  { name: 'To Top Right', value: 'to top right' },
  { name: 'To Top', value: 'to top' },
  { name: 'To Left', value: 'to left' },
];

const INITIAL_DATA: CardData = {
  title: "The Navigator’s Map: Product Trends for 2026",
  author: "Somaditya Roy",
  role: "Product Leader",
  date: "Jan 8, 2026",
  readTime: "4 min read",
  tags: ["Product", "Strategy", "Trends"],
  avatarUrl: "https://picsum.photos/seed/user/200/200",
  coverUrl: "https://picsum.photos/seed/cover/800/600",
  initials: "S",
  theme: ThemeMode.LIGHT,
  showRole: true,
  showReadTime: true,
  showCoverImage: true,
  showInitials: true,
  displayFont: '"Bricolage Grotesque", sans-serif',
  bodyFont: '"Space Grotesk", sans-serif',
  accentColor: "#ff6b6b",
  customBg: false,
  bgType: 'solid',
  bgColorStart: "#fcfcfc",
  bgColorEnd: "#e2e8f0",
  bgDirection: 'to right',
};

const App: React.FC = () => {
  const [data, setData] = useState<CardData>(INITIAL_DATA);
  const [isGenerating, setIsGenerating] = useState(false);
  const [topicPrompt, setTopicPrompt] = useState('');
  const [isExporting, setIsExporting] = useState(false);
  const [isCopying, setIsCopying] = useState(false);
  const [hasCopied, setHasCopied] = useState(false);
  const [previewScale, setPreviewScale] = useState(0.5);
  
  const cardRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLElement>(null);

  // Dynamic Scaling Logic
  const updateScale = useCallback(() => {
    if (!containerRef.current) return;
    const padding = 40; // Total padding
    const containerWidth = containerRef.current.clientWidth - padding;
    const containerHeight = containerRef.current.clientHeight - padding;
    
    const cardWidth = 1200;
    const cardHeight = 630;
    
    const scaleX = containerWidth / cardWidth;
    const scaleY = containerHeight / cardHeight;
    
    // We want the minimum scale to fit both dimensions
    const scale = Math.min(scaleX, scaleY, 1); // Max scale of 1 to keep it crisp
    setPreviewScale(scale);
  }, []);

  useEffect(() => {
    const observer = new ResizeObserver(updateScale);
    if (containerRef.current) {
      observer.observe(containerRef.current);
    }
    updateScale();
    return () => observer.disconnect();
  }, [updateScale]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setData(prev => ({ ...prev, [name]: value }));
  };

  const handleToggleChange = (field: keyof CardData) => {
    setData(prev => ({ ...prev, [field]: !prev[field] }));
  };

  const handleTagsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const tags = e.target.value.split(',').map(t => t.trim()).filter(t => t !== '');
    setData(prev => ({ ...prev, tags }));
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>, field: 'avatarUrl' | 'coverUrl') => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setData(prev => ({ ...prev, [field]: reader.result as string }));
      };
      reader.readAsDataURL(file);
    }
  };

  const handleAISuggest = async () => {
    if (!topicPrompt.trim()) return;
    setIsGenerating(true);
    const suggestions = await generateSmartSuggestions(topicPrompt);
    if (suggestions) {
      setData(prev => ({
        ...prev,
        title: suggestions.titles[0],
        tags: suggestions.tags
      }));
    }
    setIsGenerating(false);
  };

  const exportImage = useCallback(async () => {
    if (!cardRef.current) return;
    setIsExporting(true);
    try {
      const dataUrl = await htmlToImage.toPng(cardRef.current, {
        pixelRatio: 2,
        cacheBust: true,
      });
      const link = document.createElement('a');
      link.download = `og-image-${Date.now()}.png`;
      link.href = dataUrl;
      link.click();
    } catch (err) {
      console.error('oops, something went wrong!', err);
    } finally {
      setIsExporting(false);
    }
  }, []);

  const copyToClipboard = useCallback(async () => {
    if (!cardRef.current) return;
    setIsCopying(true);
    try {
      const blob = await htmlToImage.toBlob(cardRef.current, {
        pixelRatio: 2,
        cacheBust: true,
      });
      if (blob) {
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        setHasCopied(true);
        setTimeout(() => setHasCopied(false), 2000);
      }
    } catch (err) {
      console.error('Failed to copy image to clipboard', err);
    } finally {
      setIsCopying(false);
    }
  }, []);

  return (
    <div className="min-h-screen flex flex-col lg:flex-row bg-gray-50 lg:h-screen lg:overflow-hidden overflow-y-auto">
      {/* Sidebar Editor */}
      <aside className="w-full lg:w-[420px] bg-white border-r border-gray-200 lg:h-full lg:overflow-y-auto p-6 order-2 lg:order-1 shrink-0 pb-20 lg:pb-6 z-30">
        <header className="mb-8">
          <h1 className="text-2xl font-black font-display text-gray-900 tracking-tight flex items-center gap-2">
            <span className="bg-primary p-1.5 rounded-lg text-white material-symbols-outlined">image</span>
            OG Studio
          </h1>
          <p className="text-sm text-gray-500 mt-1">Design premium Open Graph images instantly.</p>
        </header>

        <section className="space-y-8">
          <div className="bg-gradient-to-br from-indigo-50 to-blue-50 p-4 rounded-xl border border-blue-100">
            <label className="text-xs font-bold text-blue-600 uppercase tracking-wider mb-2 block">AI Copywriter</label>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Topic (e.g. Next.js performance)"
                className="flex-1 text-sm border-none bg-white rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-primary"
                value={topicPrompt}
                onChange={(e) => setTopicPrompt(e.target.value)}
              />
              <button
                onClick={handleAISuggest}
                disabled={isGenerating}
                className="bg-primary hover:bg-red-500 text-white p-2 rounded-lg transition-colors disabled:opacity-50"
              >
                <span className={`material-symbols-outlined text-sm ${isGenerating ? 'animate-spin' : ''}`}>
                  {isGenerating ? 'progress_activity' : 'auto_awesome'}
                </span>
              </button>
            </div>
          </div>

          <div className="space-y-6">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <button
                  onClick={() => setData(prev => ({ ...prev, theme: ThemeMode.LIGHT, customBg: false }))}
                  className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-1 ${
                    data.theme === ThemeMode.LIGHT && !data.customBg ? 'border-primary bg-red-50 text-primary' : 'border-gray-100 bg-white hover:border-gray-200 text-gray-400'
                  }`}
                >
                  <span className="material-symbols-outlined">light_mode</span>
                  <span className="text-xs font-bold uppercase">Light</span>
                </button>
                <button
                  onClick={() => setData(prev => ({ ...prev, theme: ThemeMode.DARK, customBg: false }))}
                  className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-1 ${
                    data.theme === ThemeMode.DARK && !data.customBg ? 'border-primary bg-red-50 text-primary' : 'border-gray-100 bg-white hover:border-gray-200 text-gray-400'
                  }`}
                >
                  <span className="material-symbols-outlined">dark_mode</span>
                  <span className="text-xs font-bold uppercase">Dark</span>
                </button>
              </div>

              <div className="p-4 bg-gray-50 rounded-xl border border-gray-100 space-y-4">
                <label className="text-xs font-bold text-gray-500 uppercase tracking-widest block">Layout & Visibility</label>
                <div className="grid grid-cols-2 gap-2">
                  {[
                    { id: 'showRole', label: 'Role', icon: 'person_outline' },
                    { id: 'showReadTime', label: 'Time', icon: 'timer' },
                    { id: 'showCoverImage', label: 'Cover', icon: 'image' },
                    { id: 'showInitials', label: 'Initials', icon: 'badge' },
                  ].map(opt => (
                    <button
                      key={opt.id}
                      onClick={() => handleToggleChange(opt.id as keyof CardData)}
                      className={`px-3 py-2 rounded-lg text-[11px] font-bold flex items-center justify-center gap-2 transition-all border ${
                        data[opt.id as keyof CardData] ? 'bg-white border-primary text-primary shadow-sm' : 'bg-transparent border-gray-200 text-gray-400'
                      }`}
                    >
                      <span className="material-symbols-outlined text-sm">{opt.icon}</span>
                      {opt.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="p-4 bg-gray-50 rounded-xl border border-gray-100 space-y-4">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-widest block">Typography</label>
              <div className="space-y-3">
                <div className="space-y-1">
                  <label className="text-[10px] font-bold text-gray-400 uppercase">Display Font</label>
                  <select 
                    name="displayFont"
                    value={data.displayFont}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-lg focus:ring-primary focus:border-primary"
                  >
                    {FONTS_DISPLAY.map(f => <option key={f.family} value={f.family}>{f.name}</option>)}
                  </select>
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-bold text-gray-400 uppercase">Body Font</label>
                  <select 
                    name="bodyFont"
                    value={data.bodyFont}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-lg focus:ring-primary focus:border-primary"
                  >
                    {FONTS_BODY.map(f => <option key={f.family} value={f.family}>{f.name}</option>)}
                  </select>
                </div>
              </div>
            </div>

            <div className="p-4 bg-gray-50 rounded-xl border border-gray-100 space-y-4">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-widest block">Branding & Colors</label>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-bold text-gray-600">Accent Color</span>
                  <input 
                    type="color" 
                    name="accentColor" 
                    value={data.accentColor} 
                    onChange={handleInputChange}
                    className="w-12 h-8 rounded cursor-pointer border-none bg-transparent"
                  />
                </div>
                <div className="pt-2 border-t border-gray-200">
                  <div className="flex items-center justify-between mb-3">
                    <span className="text-xs font-bold text-gray-600">Custom Background</span>
                    <button 
                      onClick={() => handleToggleChange('customBg')}
                      className={`w-10 h-5 rounded-full relative transition-colors ${data.customBg ? 'bg-primary' : 'bg-gray-300'}`}
                    >
                      <div className={`absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform ${data.customBg ? 'translate-x-5' : ''}`}></div>
                    </button>
                  </div>
                  {data.customBg && (
                    <div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
                      <div className="flex gap-2">
                        <button 
                          onClick={() => setData(prev => ({ ...prev, bgType: 'solid' }))}
                          className={`flex-1 text-[10px] font-bold py-1.5 rounded border transition-all ${data.bgType === 'solid' ? 'bg-primary text-white border-primary' : 'border-gray-200 text-gray-400'}`}
                        >Solid</button>
                        <button 
                          onClick={() => setData(prev => ({ ...prev, bgType: 'gradient' }))}
                          className={`flex-1 text-[10px] font-bold py-1.5 rounded border transition-all ${data.bgType === 'gradient' ? 'bg-primary text-white border-primary' : 'border-gray-200 text-gray-400'}`}
                        >Gradient</button>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1">
                          <label className="text-[10px] font-bold text-gray-400 uppercase">{data.bgType === 'solid' ? 'Color' : 'Start'}</label>
                          <input 
                            type="color" 
                            name="bgColorStart" 
                            value={data.bgColorStart} 
                            onChange={handleInputChange}
                            className="w-full h-10 rounded cursor-pointer border border-gray-200"
                          />
                        </div>
                        {data.bgType === 'gradient' && (
                          <div className="space-y-1">
                            <label className="text-[10px] font-bold text-gray-400 uppercase">End</label>
                            <input 
                              type="color" 
                              name="bgColorEnd" 
                              value={data.bgColorEnd} 
                              onChange={handleInputChange}
                              className="w-full h-10 rounded cursor-pointer border border-gray-200"
                            />
                          </div>
                        )}
                      </div>
                      {data.bgType === 'gradient' && (
                        <div className="space-y-1">
                          <label className="text-[10px] font-bold text-gray-400 uppercase">Direction</label>
                          <select 
                            name="bgDirection"
                            value={data.bgDirection}
                            onChange={handleInputChange}
                            className="w-full text-xs border-gray-200 rounded-lg focus:ring-primary focus:border-primary"
                          >
                            {GRADIENT_DIRECTIONS.map(dir => <option key={dir.value} value={dir.value}>{dir.name}</option>)}
                          </select>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <div className="space-y-1">
                <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Title</label>
                <textarea
                  name="title"
                  value={data.title}
                  onChange={handleInputChange}
                  rows={3}
                  className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Author</label>
                  <input
                    name="author"
                    value={data.author}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary"
                  />
                </div>
                <div className={`space-y-1 transition-opacity ${data.showRole ? 'opacity-100' : 'opacity-40'}`}>
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Role</label>
                  <input
                    name="role"
                    disabled={!data.showRole}
                    value={data.role}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary disabled:bg-gray-50"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Date</label>
                  <input
                    name="date"
                    value={data.date}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary"
                  />
                </div>
                <div className={`space-y-1 transition-opacity ${data.showReadTime ? 'opacity-100' : 'opacity-40'}`}>
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Read Time</label>
                  <input
                    name="readTime"
                    disabled={!data.showReadTime}
                    value={data.readTime}
                    onChange={handleInputChange}
                    className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary disabled:bg-gray-50"
                  />
                </div>
              </div>
              <div className="space-y-1">
                <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Tags (comma separated)</label>
                <input
                  value={data.tags.join(', ')}
                  onChange={handleTagsChange}
                  className="w-full text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary"
                />
              </div>
              <div className={`space-y-2 transition-opacity ${data.showInitials ? 'opacity-100' : 'opacity-40'}`}>
                <label className="text-xs font-bold text-gray-500 uppercase tracking-widest block mb-1">Initials</label>
                <input
                  name="initials"
                  disabled={!data.showInitials}
                  maxLength={2}
                  value={data.initials}
                  onChange={handleInputChange}
                  className="w-32 text-sm border-gray-200 rounded-xl focus:ring-primary focus:border-primary uppercase text-center font-bold disabled:bg-gray-50"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Profile Photo</label>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handleFileUpload(e, 'avatarUrl')}
                    className="w-full text-xs text-gray-500 file:mr-2 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-gray-800 file:text-white hover:file:bg-gray-900"
                  />
                </div>
                <div className={`space-y-1 transition-opacity ${data.showCoverImage ? 'opacity-100' : 'opacity-40'}`}>
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Cover Image</label>
                  <input
                    type="file"
                    disabled={!data.showCoverImage}
                    accept="image/*"
                    onChange={(e) => handleFileUpload(e, 'coverUrl')}
                    className="w-full text-xs text-gray-500 file:mr-2 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-gray-800 file:text-white hover:file:bg-gray-900 disabled:opacity-50"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

        <footer className="mt-12 pt-6 border-t border-gray-100">
           <div className="flex gap-2">
             <button 
               onClick={exportImage}
               disabled={isExporting || isCopying}
               className="flex-1 bg-gray-900 hover:bg-black text-white py-4 rounded-xl font-bold flex items-center justify-center gap-2 transition-all active:scale-95 disabled:opacity-50"
             >
               <span className={`material-symbols-outlined ${isExporting ? 'animate-spin' : ''}`}>
                 {isExporting ? 'progress_activity' : 'download'}
               </span>
               {isExporting ? 'Generating...' : 'Download Image'}
             </button>
             
             <button
               onClick={copyToClipboard}
               disabled={isExporting || isCopying}
               title="Copy to Clipboard"
               className={`w-14 bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-xl flex items-center justify-center transition-all active:scale-90 disabled:opacity-50 ${hasCopied ? 'bg-green-100 text-green-600' : ''}`}
             >
               <span className={`material-symbols-outlined ${isCopying ? 'animate-spin' : ''}`}>
                 {isCopying ? 'progress_activity' : (hasCopied ? 'check' : 'content_copy')}
               </span>
             </button>
           </div>
           <p className="text-[10px] text-gray-400 text-center mt-3 uppercase tracking-widest font-bold">High-Resolution (2x) PNG Optimized for OpenGraph</p>
        </footer>
      </aside>

      {/* Main Preview Area */}
      <main 
        ref={containerRef}
        className="w-full lg:flex-1 h-[400px] sm:h-[500px] lg:h-full bg-slate-200 flex items-center justify-center relative order-1 lg:order-2 shrink-0 overflow-hidden"
      >
        {/* Dynamic Scaled Wrapper */}
        <div 
          style={{ 
            transform: `scale(${previewScale})`,
            transformOrigin: 'center center',
            transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)'
          }}
          className="shadow-2xl flex-shrink-0"
        >
          <OGCardTemplate data={data} innerRef={cardRef} />
        </div>

        {/* Floating Indicator */}
        <div className="absolute bottom-6 right-6 flex items-center gap-3 pointer-events-none">
          <div className="bg-white/90 backdrop-blur px-4 py-2 rounded-full border border-gray-200 shadow-sm flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
            <span className="text-xs font-bold text-gray-600 uppercase tracking-wider">
              Preview Fit: {Math.round(previewScale * 100)}%
            </span>
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;