App.tsx

import React, { useState, useEffect } from 'react';
import ConfigPanel from './components/ConfigPanel';
import Editor from './components/Editor';
import Preview from './components/Preview';
import { GithubConfig, GeneratedArticle, AppStatus, AlertMessage } from './types';
import { generateArticleFromText } from './services/geminiService';
import { uploadToGithub } from './services/githubService';
import { Layout, CheckCircle, AlertTriangle } from 'lucide-react';

const CONFIG_KEY = 'autoblog_gh_config';

const App: React.FC = () => {
  const [config, setConfig] = useState<GithubConfig | null>(null);
  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
  const [article, setArticle] = useState<GeneratedArticle | null>(null);
  const [alert, setAlert] = useState<AlertMessage | null>(null);

  useEffect(() => {
    const savedConfig = localStorage.getItem(CONFIG_KEY);
    if (savedConfig) {
      setConfig(JSON.parse(savedConfig));
    }
  }, []);

  const handleSaveConfig = (newConfig: GithubConfig) => {
    setConfig(newConfig);
    localStorage.setItem(CONFIG_KEY, JSON.stringify(newConfig));
    setAlert({ type: 'success', text: 'Konfigurace byla úspěšně uložena.' });
    setTimeout(() => setAlert(null), 3000);
  };

  const handleGenerate = async (rawText: string) => {
    // Note: Config is optional for generation, we only need it for upload.
    setStatus(AppStatus.GENERATING);
    setAlert(null);

    try {
      const generatedData = await generateArticleFromText(rawText);
      setArticle(generatedData);
      setStatus(AppStatus.REVIEW);
    } catch (error) {
      console.error(error);
      setAlert({ type: 'error', text: 'Chyba při generování obsahu. Zkontrolujte API klíč.' });
      setStatus(AppStatus.IDLE);
    }
  };

  const handleUpload = async (fileName: string, content: string) => {
    if (!config) {
      setAlert({ type: 'error', text: 'GitHub není nastaven. Klikněte na ikonu nastavení vpravo nahoře.' });
      return;
    }

    setStatus(AppStatus.UPLOADING);
    try {
      await uploadToGithub(config, fileName, content);
      setStatus(AppStatus.SUCCESS);
      setAlert({ type: 'success', text: 'Článek byl úspěšně nahrán na GitHub! Vercel by měl začít build.' });
    } catch (error: any) {
      console.error(error);
      setAlert({ type: 'error', text: `Chyba při nahrávání: ${error.message}` });
      setStatus(AppStatus.REVIEW); // Let user try again
    }
  };

  const handleReset = () => {
    setArticle(null);
    setStatus(AppStatus.IDLE);
    setAlert(null);
  };

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col font-sans">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="bg-indigo-600 p-2 rounded-lg">
              <Layout className="w-5 h-5 text-white" />
            </div>
            <h1 className="text-xl font-bold text-gray-900 tracking-tight">AutoBlog Publisher</h1>
          </div>
          <div className="text-sm text-gray-500 hidden sm:block">
             Gemini AI &rarr; GitHub &rarr; Vercel
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        {/* Global Alerts */}
        {alert && (
          <div className={`mb-6 p-4 rounded-lg flex items-center gap-3 shadow-sm animate-fade-in ${
            alert.type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' :
            alert.type === 'error' ? 'bg-red-50 text-red-800 border border-red-200' :
            'bg-blue-50 text-blue-800 border border-blue-200'
          }`}>
            {alert.type === 'success' ? <CheckCircle className="w-5 h-5" /> : <AlertTriangle className="w-5 h-5" />}
            <span className="font-medium">{alert.text}</span>
          </div>
        )}

        {/* Success State */}
        {status === AppStatus.SUCCESS ? (
          <div className="max-w-md mx-auto mt-20 text-center">
            <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle className="w-10 h-10 text-green-600" />
            </div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Publikováno!</h2>
            <p className="text-gray-600 mb-8">Váš článek byl odeslán do repozitáře. Za chvíli bude živě na webu.</p>
            <button 
              onClick={handleReset}
              className="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition"
            >
              Vytvořit další článek
            </button>
          </div>
        ) : (
          /* Editor Layout */
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-[calc(100vh-160px)] min-h-[600px]">
            <div className="h-full">
               <Editor 
                 onGenerate={handleGenerate} 
                 isGenerating={status === AppStatus.GENERATING} 
               />
            </div>
            <div className="h-full">
              {article ? (
                <Preview 
                  article={article} 
                  onUpload={handleUpload} 
                  isUploading={status === AppStatus.UPLOADING}
                  onReset={handleReset}
                />
              ) : (
                <div className="h-full bg-white/50 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center text-gray-400 p-8 text-center">
                  <Layout className="w-16 h-16 mb-4 opacity-20" />
                  <p className="text-lg font-medium">Zde se objeví náhled článku</p>
                  <p className="text-sm">Vygenerujte obsah vlevo pro zobrazení náhledu a editoru.</p>
                </div>
              )}
            </div>
          </div>
        )}
      </main>

      {/* Settings Modal */}
      <ConfigPanel onSave={handleSaveConfig} initialConfig={config} />
    </div>
  );
};

export default App;