import { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FREE_PROVIDERS } from '../freeProviders';
import { CHROME_STORE, REPO, VSCODE_MARKETPLACE } from '../links';

function scrollToSection(id: string) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

export function DocsPage() {
  useEffect(() => {
    const fromPath = window.location.href.match(/docs[#/]+([\w-]+)/i)?.[1];
    const target = fromPath && fromPath !== 'docs' ? fromPath : undefined;
    if (target) {
      window.setTimeout(() => scrollToSection(target), 80);
    }
  }, []);

  const nav = [
    ['overview', 'Overview'],
    ['free', 'Free LLM setup'],
    ['chrome', 'Chrome'],
    ['vscode', 'VS Code'],
    ['cli', 'CLI'],
    ['shared', 'Shared core'],
    ['install', 'Install'],
    ['privacy', 'Privacy'],
  ] as const;

  return (
    <div className="wrap docs-layout">
      <aside className="docs-nav" aria-label="Docs sections">
        {nav.map(([id, label]) => (
          <button key={id} type="button" className="nav-link-btn" onClick={() => scrollToSection(id)}>
            {label}
          </button>
        ))}
      </aside>

      <article className="docs-content">
        <h1>Documentation</h1>
        <p className="intro">
          LexAI is an open-source, bring-your-own-LLM assistant. This page covers every package and
          its features. Contributor setup lives on the{' '}
          <Link to="/contribute">Contribute</Link> page.
        </p>

        <section className="docs-block" id="overview">
          <h2>Overview</h2>
          <p>
            Three clients share one provider/prompt core. There is no LexAI backend — you supply an
            API key for OpenAI, Anthropic, Groq, or OpenRouter.
          </p>
          <ul>
            <li>
              <strong>Chrome</strong> — writing help on any webpage
            </li>
            <li>
              <strong>VS Code / Cursor</strong> — writing actions + workspace-aware Code Assist
            </li>
            <li>
              <strong>CLI</strong> — Prompt Builder for the terminal
            </li>
          </ul>
        </section>

        <section className="docs-block" id="free">
          <h2>Free LLM setup</h2>
          <p>
            LexAI is free — no subscription, no LexAI account. To use it at $0 ongoing, connect a
            provider that offers a free API tier. Groq and OpenRouter are the most practical; Anthropic
            and OpenAI offer small trial credits but not a permanent free API.
          </p>
          <h3>Recommended path</h3>
          <ol>
            <li>
              Install LexAI (Chrome, VS Code, or CLI) — see <a href="#install">Install</a>.
            </li>
            <li>
              Sign up for <a href="https://console.groq.com/keys" target="_blank" rel="noreferrer">Groq</a>{' '}
              (no credit card) or{' '}
              <a href="https://openrouter.ai/settings/keys" target="_blank" rel="noreferrer">
                OpenRouter
              </a>{' '}
              (no card for free models).
            </li>
            <li>Create an API key on that provider&apos;s dashboard.</li>
            <li>
              In LexAI: choose the provider, paste the key, and set the model slug below (Chrome
              Options → Model; VS Code Settings → Model; CLI{' '}
              <code>LEXAI_MODEL</code>).
            </li>
            <li>Select text and run an action — requests go directly to your provider, not LexAI.</li>
          </ol>
          <h3>Providers</h3>
          {FREE_PROVIDERS.map((provider) => (
            <div key={provider.id} className="docs-provider">
              <h4>{provider.name}</h4>
              <p>{provider.summary}</p>
              <ul>
                <li>
                  <strong>Credit card:</strong> {provider.creditCard}
                </li>
                <li>
                  <strong>Limits:</strong> {provider.limits}
                </li>
                <li>
                  <strong>Suggested LexAI model:</strong> <code>{provider.lexaiModel}</code>
                </li>
              </ul>
              <p>
                <strong>Setup</strong>
              </p>
              <ol>
                {provider.steps.map((step) => (
                  <li key={step}>{step}</li>
                ))}
              </ol>
              <div className="docs-meta">
                <a className="btn btn-ghost" href={provider.signupUrl} target="_blank" rel="noreferrer">
                  Get API key
                </a>
                <a className="btn btn-ghost" href={provider.docsUrl} target="_blank" rel="noreferrer">
                  Provider docs
                </a>
              </div>
            </div>
          ))}
          <h3>CLI example (Groq, free tier)</h3>
          <pre className="mono">{`# PowerShell
$env:LEXAI_API_KEY = "gsk_..."
$env:LEXAI_PROVIDER = "groq"
$env:LEXAI_MODEL = "llama-3.3-70b-versatile"
lexai prompt "rewrite this email to sound more professional"

# bash
export LEXAI_API_KEY=gsk_...
export LEXAI_PROVIDER=groq
export LEXAI_MODEL=llama-3.3-70b-versatile
lexai prompt "summarize this README"`}</pre>
          <h3>CLI example (OpenRouter, free models)</h3>
          <pre className="mono">{`export LEXAI_API_KEY=sk-or-...
export LEXAI_PROVIDER=openrouter
export LEXAI_MODEL=openrouter/free
lexai prompt "turn this bullet list into a user story"`}</pre>
          <p>
            Limits and trial amounts change. Check each provider&apos;s pricing and rate-limit pages
            before relying on a free tier in production.
          </p>
        </section>

        <section className="docs-block" id="chrome">
          <h2>Chrome extension</h2>
          <p>
            Manifest V3. Select text on any page, run an action, Replace or Copy. API key encrypted
            locally with tweetnacl secretbox.
          </p>
          <h3>Setup</h3>
          <p>
            Options page → choose provider (OpenAI, Anthropic, Groq, or OpenRouter) and paste your
            API key. There are no environment variables.
          </p>
          <h3>Features</h3>
          <ul>
            <li>Fix Grammar, Rephrase, Shorten, Expand, Explain, Make Prompt</li>
            <li>Writing styles: Formal, Casual, Academic, Creative, Concise</li>
            <li>Floating toolbar, right-click context menu, popup editor</li>
            <li>Prompt Builder — patterns, persona, output format</li>
            <li>Providers: OpenAI · Anthropic · Groq · OpenRouter</li>
            <li>Works in text boxes, email composers, forms, and contenteditable pages</li>
          </ul>
          <div className="docs-meta">
            <a className="btn btn-primary" href={CHROME_STORE} target="_blank" rel="noreferrer">
              Chrome Web Store
            </a>
            <a
              className="btn btn-ghost"
              href={`${REPO}/src/branch/main/packages/chrome`}
              target="_blank"
              rel="noreferrer"
            >
              Package README
            </a>
          </div>
        </section>

        <section className="docs-block" id="vscode">
          <h2>VS Code / Cursor extension</h2>
          <p>
            Editor twin of LexAI. Select text or code → action or Code Assist → Accept / Regenerate
            / Discard. Key lives in VS Code Secret Storage.
          </p>
          <p>
            Published listing:{' '}
            <a href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
              JuanKibin.lexai-vscode
            </a>
          </p>
          <h3>Setup</h3>
          <p>
            Command Palette → <code>LexAI: Open Settings</code> → provider, model, and API key.
            The key is stored in VS Code Secret Storage. There are no environment variables.
          </p>
          <h3>Code Assist</h3>
          <ul>
            <li>Freeform instruction in an inline prompt above the selection</li>
            <li>
              Workspace context: surrounding code, imports, and symbol definitions from other files
            </li>
            <li>Entry points: CodeLens, context menu, Command Palette, Activity Bar sidebar</li>
          </ul>
          <h3>Writing actions</h3>
          <ul>
            <li>Fix Grammar · Rephrase · Shorten · Expand · Explain · Make Prompt</li>
            <li>Writing styles + Prompt Builder option chips in the suggestion zone</li>
            <li>Suggestion UI: zone (default), side panel, or both</li>
            <li>Status bar: ready / processing / not configured</li>
            <li>Sidebar workspace panel for paste → run → Copy</li>
          </ul>
          <div className="docs-meta">
            <a className="btn btn-primary" href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
              VS Code Marketplace
            </a>
            <a
              className="btn btn-ghost"
              href={`${REPO}/src/branch/main/packages/vscode`}
              target="_blank"
              rel="noreferrer"
            >
              Package README
            </a>
          </div>
        </section>

        <section className="docs-block" id="cli">
          <h2>CLI — Prompt Builder</h2>
          <p>
            Improves a rough idea into a paste-ready engineered prompt before you send it to another
            agent.
          </p>
          <h3>Setup</h3>
          <p>Environment variables (PowerShell shown; bash uses <code>export NAME=value</code>):</p>
          <pre className="mono">{`$env:LEXAI_API_KEY = "sk-..."              # required
$env:LEXAI_PROVIDER = "openai"              # optional: openai | anthropic | groq | openrouter
$env:LEXAI_MODEL = "gpt-4o"                 # optional`}</pre>
          <p>
            Optional defaults file (never put the API key here): <code>~/.lexai/config.json</code>
          </p>
          <pre className="mono">{`{
  "provider": "openai",
  "model": "gpt-4o",
  "pattern": "role",
  "persona": "Expert Developer",
  "format": "Markdown",
  "style": "Concise"
}`}</pre>
          <p>
            Precedence: flags → config file → env → defaults. The key is always{' '}
            <code>LEXAI_API_KEY</code>.
          </p>
          <h3>Features</h3>
          <ul>
            <li>
              Command: <code>lexai prompt</code>
            </li>
            <li>
              Input from args, stdin, or <code>-f/--file</code>
            </li>
            <li>Flags: pattern, persona, format, style, provider, model</li>
            <li>
              Also <code>--list</code> (patterns, personas, formats, styles) and{' '}
              <code>--help</code>
            </li>
            <li>Engineered prompt on stdout (pipe-safe); progress and errors on stderr</li>
          </ul>
          <h3>Examples</h3>
          <pre className="mono">{`lexai prompt "add rate limiting to the express auth routes"

echo "debug flaky playwright on CI" | lexai prompt --pattern role

lexai prompt -f draft.txt --format Markdown --model gpt-4o`}</pre>
          <div className="docs-meta">
            <a
              className="btn btn-ghost"
              href={`${REPO}/src/branch/main/packages/cli`}
              target="_blank"
              rel="noreferrer"
            >
              Package README
            </a>
          </div>
        </section>

        <section className="docs-block" id="shared">
          <h2>Shared core</h2>
          <ul>
            <li>
              Location: <code>src/lib</code> (<code>providers</code>, <code>actions</code>,{' '}
              <code>types</code>)
            </li>
            <li>Chrome-only modules: crypto (key encryption), messaging helpers</li>
            <li>VS Code and CLI must not import Chrome-only modules</li>
          </ul>
        </section>

        <section className="docs-block" id="install">
          <h2>Install</h2>
          <p>Published builds:</p>
          <ul>
            <li>
              Chrome —{' '}
              <a href={CHROME_STORE} target="_blank" rel="noreferrer">
                Chrome Web Store
              </a>
            </li>
            <li>
              VS Code / Cursor —{' '}
              <a href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
                Visual Studio Marketplace
              </a>{' '}
              (<code>JuanKibin.lexai-vscode</code>)
            </li>
          </ul>
          <p style={{ marginTop: '1rem' }}>From source (Node.js 22+):</p>
          <pre className="mono">{`git clone https://git.juankibin.space/kibin/LexAI.git
cd LexAI
npm run install:all

# Chrome
npm run chrome:dev          # or chrome:build → load packages/chrome/.output/chrome-mv3

# VS Code
npm run vscode:build        # or install from Marketplace

# CLI
npm run cli:build
export LEXAI_API_KEY=sk-...          # required
export LEXAI_PROVIDER=openai         # optional: openai | anthropic | groq | openrouter
export LEXAI_MODEL=gpt-4o            # optional
node packages/cli/out/cli.js prompt "your rough idea"

# Website
npm run website:dev`}</pre>
        </section>

        <section className="docs-block" id="privacy">
          <h2>Privacy</h2>
          <ul>
            <li>No LexAI backend, account, or subscription</li>
            <li>No LexAI telemetry</li>
            <li>
              Chrome: encrypted key in <code>chrome.storage.local</code>
            </li>
            <li>VS Code: Secret Storage</li>
            <li>
              CLI: <code>LEXAI_API_KEY</code> required; optional <code>LEXAI_PROVIDER</code> and{' '}
              <code>LEXAI_MODEL</code>. Never store the key in <code>~/.lexai/config.json</code>
            </li>
            <li>Text is sent only to the LLM provider you configure</li>
          </ul>
        </section>
      </article>
    </div>
  );
}