/* Commands — les vraies commandes dbpilot */

const COMMANDS = [
  {
    key: 'detect',
    label: 'dbpilot detect',
    desc: 'Scanne le cluster et génère backup.yaml',
    output: [
      { html: `<span class="prompt">$</span><span class="cmd">dbpilot detect</span>` },
      { html: `<span class="dim">  scanning cluster prod-eu-west-1 for PostgreSQL instances...</span>` },
      { html: `&nbsp;` },
      { html: `<span class="ok">✓</span><span class="info"> 3 PostgreSQL instances found</span>` },
      { html: `&nbsp;` },
      { html: `  app           <span style="color:var(--fg)">postgres-main</span>    <span class="dim">pg 16.2</span>  <span class="ok">reachable</span>` },
      { html: `  app           <span style="color:var(--fg)">postgres-events</span>  <span class="dim">pg 15.6</span>  <span class="ok">reachable</span>` },
      { html: `  billing       <span style="color:var(--fg)">postgres-main</span>    <span class="dim">pg 16.1</span>  <span class="ok">reachable</span>` },
      { html: `&nbsp;` },
      { html: `<span class="dim">  → config written to ~/.config/dbpilot/backup.yaml</span>` },
      { html: `<span class="dim">  → edit the file to set your S3 bucket and credentials</span>` },
    ],
  },
  {
    key: 'deploy',
    label: 'dbpilot deploy',
    desc: 'Déploie les CronJobs dans Kubernetes',
    output: [
      { html: `<span class="prompt">$</span><span class="cmd">dbpilot deploy myapp</span>` },
      { html: `<span class="dim">  Deploying 3 job(s) from config "myapp"...</span>` },
      { html: `&nbsp;` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-postgres-main</span>    <span class="dim">(app/created)</span>` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-postgres-events</span>  <span class="dim">(app/created)</span>` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-billing-main</span>     <span class="dim">(billing/created)</span>` },
      { html: `&nbsp;` },
      { html: `<span class="dim">  3 CronJob(s) deployed.</span>` },
    ],
  },
  {
    key: 'backup',
    label: 'dbpilot backup',
    desc: 'Déclenche un backup, liste les archives S3',
    output: [
      { html: `<span class="prompt">$</span><span class="cmd">dbpilot backup myapp run </span><span class="flag">--wait</span>` },
      { html: `<span class="dim">  Backing up 3 database(s) from config "myapp" → s3://acme-backups</span>` },
      { html: `&nbsp;` },
      { html: `  <span class="arrow">▶</span>  <span style="color:var(--fg)">dbpilot-postgres-main</span>    →  job/dbpilot-postgres-main-manual-20260526` },
      { html: `  <span class="arrow">▶</span>  <span style="color:var(--fg)">dbpilot-postgres-events</span>  →  job/dbpilot-postgres-events-manual-20260526` },
      { html: `  <span class="arrow">▶</span>  <span style="color:var(--fg)">dbpilot-billing-main</span>     →  job/dbpilot-billing-main-manual-20260526` },
      { html: `&nbsp;` },
      { html: `<span class="ok">✓</span> <span style="color:var(--fg)">dbpilot-postgres-main</span>    — done` },
      { html: `<span class="ok">✓</span> <span style="color:var(--fg)">dbpilot-postgres-events</span>  — done` },
      { html: `<span class="ok">✓</span> <span style="color:var(--fg)">dbpilot-billing-main</span>     — done` },
    ],
  },
  {
    key: 'restore',
    label: 'dbpilot restore',
    desc: 'Restaure une base depuis un backup S3',
    output: [
      { html: `<span class="prompt">$</span><span class="cmd">dbpilot restore myapp run postgres-main</span>` },
      { html: `&nbsp;` },
      { html: `<span class="dim">  Listing backups for postgres-main (s3://acme-backups/myapp/postgres)...</span>` },
      { html: `&nbsp;` },
      { html: `  <span class="arrow">></span>  <span style="color:var(--accent)">20260526T030000Z.dump.gz</span>   <span class="dim">2026-05-26 03:00  412 MB</span>` },
      { html: `     <span style="color:var(--fg)">20260525T030000Z.dump.gz</span>   <span class="dim">2026-05-25 03:00  398 MB</span>` },
      { html: `     <span style="color:var(--fg)">20260524T030000Z.dump.gz</span>   <span class="dim">2026-05-24 03:00  391 MB</span>` },
      { html: `&nbsp;` },
      { html: `  <span class="warn">⚠  This will overwrite the current database. Continue? [y/N]</span> <span style="color:var(--accent)">y</span>` },
      { html: `&nbsp;` },
      { html: `  <span class="arrow">▶</span>  Restore job started: job/dbpilot-restore-20260526-152210` },
      { html: `<span class="ok">✓</span>  Restore complete.` },
    ],
  },
  {
    key: 'status',
    label: 'dbpilot status',
    desc: 'État des CronJobs déployés',
    output: [
      { html: `<span class="prompt">$</span><span class="cmd">dbpilot status</span>` },
      { html: `&nbsp;` },
      { html: `<span class="dim">     JOB                          NAMESPACE   SCHEDULE    LAST RUN     STATUS</span>` },
      { html: `<span class="dim">     ---                          ---------   --------    --------     ------</span>` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-postgres-main</span>    app         0 2 * * *   2h ago       success` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-postgres-events</span>  app         0 2 * * *   2h ago       success` },
      { html: `  <span class="ok">✓</span>  <span style="color:var(--fg)">dbpilot-billing-main</span>     billing     0 3 * * *   1h ago       success` },
      { html: `&nbsp;` },
      { html: `<span class="dim">  3 CronJob(s)</span>` },
    ],
  },
];

function Commands() {
  const [active, setActive] = useState('detect');
  const current = COMMANDS.find((c) => c.key === active);

  return (
    <section id="cli">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="eyebrow"><span className="dot"></span>la CLI</span>
            <h2 className="gradient-text">5 commandes.<br/>C'est tout.</h2>
            <p>
              dbpilot reste simple par design. Detect, deploy, backup, restore, status —
              le reste vit dans ton <code style={{fontFamily:'var(--font-mono)',fontSize:'0.85em'}}>backup.yaml</code>.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <div className="cmd-showcase">
            <div className="cmd-nav">
              {COMMANDS.map((c) => (
                <button
                  key={c.key}
                  onClick={() => setActive(c.key)}
                  className={`cmd-nav-btn ${active === c.key ? 'active' : ''}`}
                >
                  <span className="kbd">$</span>
                  <span>
                    <span className="label">{c.label}</span>
                    <span className="desc">{c.desc}</span>
                  </span>
                </button>
              ))}
            </div>

            <div className="term" key={current.key} style={{ animation: 'fadeIn .3s ease' }}>
              <div className="term-head">
                <span className="term-dot r"></span>
                <span className="term-dot y"></span>
                <span className="term-dot g"></span>
                <span className="term-title">{current.label}</span>
              </div>
              <div className="term-body" style={{ minHeight: 420 }}>
                {current.output.map((l, i) => (
                  <span
                    key={i}
                    className="term-line"
                    style={{ animation: `lineIn .35s ${i * 60}ms ease backwards` }}
                    dangerouslySetInnerHTML={{ __html: l.html }}
                  />
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const cmdStyle = document.createElement('style');
cmdStyle.textContent = `
@keyframes lineIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
`;
document.head.appendChild(cmdStyle);

window.Commands = Commands;