import { useAILookup, useIdentity } from '@deplixo/sdk';
import ScriptView from './components/ScriptView.jsx';
import BriefForm from './components/BriefForm.jsx';
import EmptyState from './components/EmptyState.jsx';

function App() {
  const { user } = useIdentity();
  const [subject, setSubject] = useState('');
  const [script, setScript] = useState(null);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('script');

  const lookup = useAILookup({
    example: {
      titre: 'ChatGPT caché : le mode qui change tout',
      hookAlternatif: 'Ce raccourci ChatGPT économise 2h par jour.',
      legende: 'Sauvegarde cette vidéo avant qu\'elle disparaisse 🔖 #IA #Astuce',
      commentaireEpingle: 'Quel outil underground tu veux que je décortique ensuite ?',
      outil: {
        nom: 'Nom exact de l\'outil',
        url: 'https://exemple.com',
        gratuit: 'Ce qui est gratuit',
        payant: 'Ce qui nécessite un abonnement',
      },
      scenes: [
        {
          timecode: '0–2 s',
          phase: 'Hook',
          voixOff: 'Phrase courte, percutante, en français naturel.',
          texteEcran: 'TEXTE GROS ET LISIBLE',
          visuel: 'Description précise de ce que l\'on voit (capture, zoom, curseur).',
          sonBruitage: 'Whoosh grave + glitch léger',
          montage: 'Cut sec, zoom 110%, flash 1 frame',
        },
      ],
      instructionsMontage: [
        'Format vertical 1080x1920, 30 fps',
        'Fond #0a0a0a, accent néon vert menthe',
      ],
      checklistSansSon: [
        'Sous-titres mot-à-mot karaoké',
        'Nom de l\'outil visible 4 secondes minimum',
      ],
      avertissements: 'Rappeler ce qui est vérifié vs supposé.',
    },
  });

  const handleGenerate = async (sujet) => {
    setError(null);
    setScript(null);
    setSubject(sujet);
    try {
      const prompt = `Tu es directeur créatif spécialisé dans les vidéos virales courtes sur les astuces IA underground, les outils méconnus et les workflows sous-exploités.

Crée un script COMPLET de vidéo verticale 9:16 de 30 à 40 secondes sur le sujet suivant :
"${sujet}"

Contraintes NON NÉGOCIABLES :
- Utiliser une astuce CONCRÈTE et REPRODUCTIBLE qui existe réellement.
- Donner le nom EXACT de l'outil et l'URL réelle quand ils sont connus.
- Ne JAMAIS inventer de fonctionnalité, de bouton, de menu, ou de résultat.
- Si tu n'es pas certain d'un détail, utilise une formulation prudente ou ne l'inclus pas.
- Distinguer clairement ce qui est gratuit de ce qui est payant.
- Éviter les promesses exagérées ("x10 ta productivité", "secret caché", etc.).
- Voix off en FRANÇAIS naturel, phrases courtes.
- Compréhensible même sans le son (sous-titres + texte à l'écran).

Structure OBLIGATOIRE des scènes avec horodatages précis :
1. 0–2 s : hook audacieux, intriguant, SPÉCIFIQUE (pas générique).
2. 2–7 s : exposer un problème ou une croyance courante.
3. 7–22 s : démonstration visuelle ÉTAPE PAR ÉTAPE (clics exacts, menus réels).
4. 22–30 s : révélation du résultat + pourquoi c'est utile.
5. 30–40 s : résultat final, question engageante, boucle visuelle vers le début.

Esthétique : montage nerveux, tech underground, fond sombre, typo lisible, captures d'écran réalistes, zooms, curseur visible, bruitages subtils.

Fournis AUSSI : titre court (<40 car), hook alternatif, légende avec hashtags, commentaire épinglé, checklist "compréhensible sans son", instructions de montage précises (format, fps, palette, typo), et un champ "avertissements" si tu as dû faire des hypothèses.

Au moins 6 scènes couvrant toute la timeline.`;

      const result = await lookup.run(prompt);
      setScript(result);
      setActiveTab('script');
    } catch (e) {
      setError(e?.message || 'Erreur de génération. Réessaie.');
    }
  };

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <rect x="3" y="3" width="18" height="18" rx="4" stroke="currentColor" strokeWidth="2" />
            <path d="M10 8l6 4-6 4V8z" fill="currentColor" />
          </svg>
          <span>underground.reels</span>
        </div>
        <nav className="tabs" aria-label="Vues principales">
          <button
            className={activeTab === 'script' ? 'tab active' : 'tab'}
            onClick={() => setActiveTab('script')}
            aria-current={activeTab === 'script'}
            data-testid="tab-script"
          >
            Script
          </button>
          <button
            className={activeTab === 'guide' ? 'tab active' : 'tab'}
            onClick={() => setActiveTab('guide')}
            aria-current={activeTab === 'guide'}
            data-testid="tab-guide"
          >
            Méthode
          </button>
        </nav>
        <div className="who" title={user?.name || 'Invité'}>
          {user?.name ? user.name.slice(0, 14) : '…'}
        </div>
      </header>

      <main className="main">
        <section className="panel left">
          <BriefForm
            onGenerate={handleGenerate}
            loading={lookup.loading}
            initial={subject}
          />
          {error && (
            <div className="error" role="status" aria-live="polite">
              {error}
            </div>
          )}
          <aside className="tips">
            <h3>Sujets qui marchent</h3>
            <ul>
              <li>Un prompt système ChatGPT méconnu</li>
              <li>Un mode caché de Perplexity</li>
              <li>Workflow n8n + Whisper gratuit</li>
              <li>Astuce Claude Projects pour la recherche</li>
              <li>NotebookLM pour transformer un PDF</li>
            </ul>
          </aside>
        </section>

        <section className="panel right">
          {activeTab === 'guide' ? (
            <MethodGuide />
          ) : script ? (
            <ScriptView script={script} subject={subject} />
          ) : (
            <EmptyState loading={lookup.loading} />
          )}
        </section>
      </main>
    </div>
  );
}

function MethodGuide() {
  return (
    <article className="guide">
      <h1>La méthode « underground reel »</h1>
      <p className="lede">
        Un cadre de direction créative pour des vidéos verticales 9:16 de 30 à 40 secondes
        sur les astuces IA sous-exploitées.
      </p>

      <h2>Structure imposée</h2>
      <ol>
        <li><b>0–2 s</b> — Hook audacieux, intriguant, spécifique.</li>
        <li><b>2–7 s</b> — Problème ou croyance courante à démonter.</li>
        <li><b>7–22 s</b> — Démonstration pas-à-pas, curseur visible.</li>
        <li><b>22–30 s</b> — Révélation du résultat et pourquoi c'est utile.</li>
        <li><b>30–40 s</b> — Résultat final, question, boucle vers le début.</li>
      </ol>

      <h2>Règles de véracité</h2>
      <ul>
        <li>Nommer l'outil exact et donner les étapes réelles.</li>
        <li>Ne jamais inventer une fonctionnalité ou un résultat.</li>
        <li>Distinguer <span className="pill free">gratuit</span> et <span className="pill paid">payant</span>.</li>
        <li>Pas de promesses exagérées ni d'intros génériques.</li>
      </ul>

      <h2>Compréhension sans le son</h2>
      <ul>
        <li>Sous-titres karaoké mot-à-mot.</li>
        <li>Texte-écran gros, contrasté, 1 idée par carte.</li>
        <li>Nom de l'outil affiché 4 s minimum.</li>
      </ul>

      <h2>Esthétique tech underground</h2>
      <ul>
        <li>Fond sombre, accent néon unique.</li>
        <li>Montage nerveux, cuts secs, zooms courts.</li>
        <li>Bruitages subtils (whoosh, click, glitch léger).</li>
        <li>Voix off française naturelle, phrases courtes.</li>
      </ul>
    </article>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);