'use client'

export default function HowItWorksPage() {
  return (
    <main className="card how-page">
      <header className="how-hero">
        <p className="eyebrow">How this works</p>
        <h1>How Magent works now</h1>
        <p className="lede">
          End-to-end request flow, live status updates, and the exact tools available to users and
          admins.
        </p>
      </header>

      <section className="how-grid">
        <article className="how-card">
          <h2>Jellyseerr</h2>
          <p className="how-title">The request box</p>
          <p>
            This is where you ask for a movie or show. It keeps the request and whether it is
            approved.
          </p>
        </article>
        <article className="how-card">
          <h2>Sonarr / Radarr</h2>
          <p className="how-title">The library manager</p>
          <p>
            These add the request to the library list and decide what quality to look for.
          </p>
        </article>
        <article className="how-card">
          <h2>Prowlarr</h2>
          <p className="how-title">The search helper</p>
          <p>
            This checks your search sources and reports back what it finds.
          </p>
        </article>
        <article className="how-card">
          <h2>qBittorrent</h2>
          <p className="how-title">The downloader</p>
          <p>
            This downloads the file. Magent can tell if it is downloading, paused, or finished.
          </p>
        </article>
        <article className="how-card">
          <h2>Jellyfin</h2>
          <p className="how-title">The place you watch</p>
          <p>
            When the file is ready, Jellyfin shows it in your library so you can watch it.
          </p>
        </article>
      </section>

      <section className="how-flow">
        <h2>The pipeline (request to ready)</h2>
        <ol className="how-steps">
          <li>
            <strong>Request created</strong> in Jellyseerr.
          </li>
          <li>
            <strong>Approved</strong> and sent to Sonarr/Radarr.
          </li>
          <li>
            <strong>Search runs</strong> against indexers via Prowlarr.
          </li>
          <li>
            <strong>Grabbed</strong> and downloaded by qBittorrent.
          </li>
          <li>
            <strong>Imported</strong> by Sonarr/Radarr.
          </li>
          <li>
            <strong>Available</strong> in Jellyfin.
          </li>
        </ol>
      </section>

      <section className="how-flow">
        <h2>Live updates (no refresh needed)</h2>
        <div className="how-step-grid">
          <article className="how-step-card step-arr">
            <div className="step-badge">1</div>
            <h3>Request page updates in real time</h3>
            <p className="step-note">
              Status, timeline hops, and action history update automatically while you are viewing
              the request.
            </p>
          </article>
          <article className="how-step-card step-qbit">
            <div className="step-badge">2</div>
            <h3>Download progress updates live</h3>
            <p className="step-note">
              Torrent progress, queue state, and downloader details refresh automatically so users
              do not need to hard refresh.
            </p>
          </article>
          <article className="how-step-card step-jellyfin">
            <div className="step-badge">3</div>
            <h3>Ready state appears as soon as import finishes</h3>
            <p className="step-note">
              As soon as Sonarr/Radarr import completes and Jellyfin can serve it, the request page
              shows it as ready.
            </p>
          </article>
        </div>
      </section>

      <section className="how-flow">
        <h2>Request actions and when to use them</h2>
        <div className="how-step-grid">
          <article className="how-step-card step-jellyseerr">
            <div className="step-badge">1</div>
            <h3>Re-add to Arr</h3>
            <p className="step-note">Use when a request is approved but never entered the Arr queue.</p>
            <div className="step-fix-title">Best for</div>
            <ul className="step-fix-list">
              <li>Missing NEEDS_ADD / ADDED state transitions</li>
              <li>Queue repair after Arr-side cleanup</li>
            </ul>
          </article>

          <article className="how-step-card step-arr">
            <div className="step-badge">2</div>
            <h3>Search releases</h3>
            <p className="step-note">Runs a search and shows concrete release options.</p>
            <div className="step-fix-title">Best for</div>
            <ul className="step-fix-list">
              <li>Manual selection of a specific release/indexer</li>
              <li>Checking whether results currently exist</li>
            </ul>
          </article>

          <article className="how-step-card step-prowlarr">
            <div className="step-badge">3</div>
            <h3>Search + auto-download</h3>
            <p className="step-note">Runs search and lets Arr pick/grab automatically.</p>
            <div className="step-fix-title">Best for</div>
            <ul className="step-fix-list">
              <li>Fast recovery when users have auto-search access</li>
              <li>Hands-off retry of stalled requests</li>
            </ul>
          </article>

          <article className="how-step-card step-qbit">
            <div className="step-badge">4</div>
            <h3>Resume download</h3>
            <p className="step-note">Resumes a paused/stopped torrent in qBittorrent.</p>
            <div className="step-fix-title">Best for</div>
            <ul className="step-fix-list">
              <li>Paused queue entries</li>
              <li>Downloader restarts</li>
            </ul>
          </article>

          <article className="how-step-card step-jellyfin">
            <div className="step-badge">5</div>
            <h3>Open in Jellyfin</h3>
            <p className="step-note">Available when the item is imported and linked to Jellyfin.</p>
            <div className="step-fix-title">Best for</div>
            <ul className="step-fix-list">
              <li>Immediate playback confirmation</li>
              <li>User handoff from request tracking to watching</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="how-flow">
        <h2>Invite and account flow</h2>
        <ol className="how-steps">
          <li>
            <strong>Invite created</strong> by admin or eligible user.
          </li>
          <li>
            <strong>User signs up</strong> and Magent creates/links the account.
          </li>
          <li>
            <strong>Profile/defaults apply</strong> (role, auto-search, expiry, invite access).
          </li>
          <li>
            <strong>Admin trace map</strong> can show inviter → invited lineage.
          </li>
        </ol>
      </section>

      <section className="how-flow">
        <h2>Admin controls available</h2>
        <div className="how-grid">
          <article className="how-card">
            <h3>General</h3>
            <p>App URL/port, API URL/port, bind host, proxy base URL, and manual SSL bind options.</p>
          </article>
          <article className="how-card">
            <h3>Notifications</h3>
            <p>Email, Discord, Telegram, push/mobile, and generic webhook provider settings.</p>
          </article>
          <article className="how-card">
            <h3>Users</h3>
            <p>Bulk auto-search control, invite access control, per-user roles/profile/expiry, and system actions.</p>
          </article>
          <article className="how-card">
            <h3>Invite management</h3>
            <p>Profiles, invites, blanket rules, master template, and trace map (list/graph with lineage).</p>
          </article>
          <article className="how-card">
            <h3>Request sync + cache</h3>
            <p>Control refresh/sync behavior, view all requests, and manage cached request records.</p>
          </article>
          <article className="how-card">
            <h3>Maintenance + logs</h3>
            <p>Run cleanup/sync tasks, inspect operations, and diagnose pipeline issues quickly.</p>
          </article>
        </div>
      </section>

      <section className="how-callout">
        <h2>Why a request can still wait</h2>
        <p>
          If indexers do not return a valid release yet, Magent will show waiting/search states.
          That usually means content availability is the blocker, not a broken pipeline.
        </p>
      </section>
    </main>
  )
}