"""Setup page — one-click MCP install + CLAUDE.md generator."""
import json as _json
from html import escape
from fastapi import APIRouter, Request
from fastapi.responses import HTMLResponse, PlainTextResponse
from indiestack.routes.components import page_shell

router = APIRouter()

# ── Install commands per IDE ─────────────────────────────────────────────
IDES = {
    "claude-code": {
        "name": "Claude Code",
        "install": "claude mcp add indiestack -- uvx --from indiestack indiestack-mcp",
        "note": "Run this in your terminal. IndieStack will appear as a tool source in your next session.",
    },
    "cursor": {
        "name": "Cursor",
        "install": '{\n  "mcpServers": {\n    "indiestack": {\n      "command": "uvx",\n      "args": ["--from", "indiestack", "indiestack-mcp"]\n    }\n  }\n}',
        "note": "Add this to <code>.cursor/mcp.json</code> in your project root, or to your global Cursor settings.",
    },
    "windsurf": {
        "name": "Windsurf",
        "install": '{\n  "mcpServers": {\n    "indiestack": {\n      "command": "uvx",\n      "args": ["--from", "indiestack", "indiestack-mcp"]\n    }\n  }\n}',
        "note": "Add this to your Windsurf MCP configuration file.",
    },
    "other": {
        "name": "Other / Manual",
        "install": "pip install indiestack\npython -m indiestack.mcp_server",
        "note": "Install from PyPI and point your MCP client at the server process.",
    },
}

# ── CLAUDE.md content ────────────────────────────────────────────────────
CLAUDE_MD_TEMPLATE = """# Dependency Health Rules

## Setup
MCP: `claude mcp add indiestack -- uvx --from indiestack indiestack-mcp`

## CRITICAL: Dependency Verification
Before installing ANY new package via npm, pip, yarn, or pnpm:
1. Read the current package.json or requirements.txt
2. Call `analyze_dependencies` with the full manifest content
3. If the health score is below 70: STOP. Show the user which dependencies
   are unmaintained or risky. Propose the alternatives from the report.
   Do NOT proceed with installation until the user explicitly approves.
4. After successfully integrating any tool, call `report_outcome(slug, success=true)`
5. If integration fails, call `report_outcome(slug, success=false)`

## Before Writing Infrastructure
Before writing auth, payments, databases, email, monitoring, or any common
infrastructure from scratch, call `find_tools(query)` first. Use an existing
tool instead of generating boilerplate. 8,000+ curated tools indexed. 10,000+ installs.

## Available Tools
- `analyze_dependencies(manifest)` — 0-100 health score (MUST use before installs)
- `find_tools(query)` — search developer tools by need
- `get_tool_details(slug)` — integration docs, API specs, install commands
- `check_health(slugs)` — verify tools are still maintained
- `report_outcome(slug, success)` — report integration result (improves recommendations)
- `report_compatibility(tool_a, tool_b)` — report that two tools work together
"""

CURSORRULES_TEMPLATE = """# IndieStack — Dependency Intelligence

## MCP Setup
Add to `.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "indiestack": {
      "command": "uvx",
      "args": ["--from", "indiestack", "indiestack-mcp"]
    }
  }
}
```

## CRITICAL: Dependency Verification
Before installing ANY new package via npm, pip, yarn, or pnpm:
1. Read the current manifest (package.json or requirements.txt)
2. Call `analyze_dependencies` with the full manifest content
3. If score < 70: STOP. Show the user which deps are risky. Propose alternatives.
   Do NOT proceed until the user explicitly approves.
4. After integrating a tool, call `report_outcome(slug, success=true/false)`

Before writing auth, payments, databases, email, or monitoring from scratch,
call `find_tools(query)` first. Use an existing tool instead of generating code.
"""

_COPY_BTN = '''<button class="copy-btn" style="position:absolute;top:8px;right:8px;padding:6px 14px;
font-size:12px;font-weight:600;background:rgba(255,255,255,0.1);color:#e2e8f0;
border:1px solid rgba(255,255,255,0.2);border-radius:6px;cursor:pointer;">Copy</button>'''


@router.get("/setup", response_class=HTMLResponse)
async def setup_page(request: Request):
    user = request.state.user

    # Build IDE tab buttons and content panels
    tab_buttons = ""
    tab_panels = ""
    for i, (ide_key, ide) in enumerate(IDES.items()):
        active = "active" if i == 0 else ""
        tab_buttons += f'''
            <button class="setup-tab {active}" data-tab="{ide_key}"
                    style="padding:10px 20px;font-size:14px;font-weight:600;
                           border:1px solid var(--border);background:{"var(--card-bg)" if i == 0 else "transparent"};
                           color:var(--ink);border-radius:8px;cursor:pointer;
                           min-height:44px;white-space:nowrap;">
                {ide["name"]}
            </button>'''

        install_escaped = escape(ide["install"])

        tab_panels += f'''
            <div class="setup-panel" data-tab="{ide_key}" style="display:{"block" if i == 0 else "none"};">
                <div style="position:relative;">
                    <pre class="copyable" style="background:var(--ink);color:#e2e8f0;padding:16px 50px 16px 16px;
                                border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-mono);
                                overflow-x:auto;line-height:1.6;margin:0;">{install_escaped}</pre>
                    {_COPY_BTN}
                </div>
                <p style="font-size:13px;color:var(--ink-muted);margin:10px 0 0;">{ide["note"]}</p>
            </div>'''

    # CLAUDE.md section
    claude_md_escaped = escape(CLAUDE_MD_TEMPLATE.strip())

    is_welcome = request.query_params.get("welcome") == "1"
    welcome_banner = ''
    if is_welcome and user:
        from html import escape as _esc
        _name = _esc(user.get('name', '').split()[0] or 'there')
        welcome_banner = f'''
        <div style="background:linear-gradient(135deg,#065F46,#064E3B);border:1px solid rgba(110,231,183,0.3);
                    border-radius:var(--radius);padding:20px 24px;margin-bottom:24px;text-align:center;">
            <p style="color:#6EE7B7;font-size:20px;font-weight:700;margin:0 0 4px;">Welcome to IndieStack, {_name}!</p>
            <p style="color:rgba(255,255,255,0.7);font-size:14px;margin:0;">Follow these steps to connect your AI agent to 8,000+ developer tools. 10,000+ installs and growing.</p>
        </div>'''

    body = f'''
    <div class="container" style="max-width:760px;padding:48px 24px 80px;">

        {welcome_banner}

        <div style="text-align:center;margin-bottom:40px;">
            <h1 style="font-family:var(--font-display);font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0 0 12px;">
                Set up IndieStack
            </h1>
            <p style="color:var(--ink-muted);font-size:17px;line-height:1.6;max-width:520px;margin:0 auto;">
                Stop your AI from reinventing infrastructure.
                Connect it to curated tools, real migration data, and verified combinations — one command.
            </p>
        </div>

        <!-- Why IndieStack -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px;">

          <div class="card" style="padding:20px;">
            <p style="font-weight:700;color:var(--ink);font-size:14px;margin:0 0 6px;">
              Curated, not crawled
            </p>
            <p style="color:var(--ink-muted);font-size:13px;line-height:1.7;margin:0;">
              Every tool is reviewed by a human before listing. No abandoned projects, no spam,
              no enterprise products dressed up as indie. What your agent finds is actually maintained.
            </p>
          </div>

          <div class="card" style="padding:20px;">
            <p style="font-weight:700;color:var(--ink);font-size:14px;margin:0 0 6px;">
              Migration data from 4,500+ repos
            </p>
            <p style="color:var(--ink-muted);font-size:13px;line-height:1.7;margin:0;">
              Not opinions &mdash; git history. We parsed real repos to find what developers are
              actually switching to. Your agent gets recommendations backed by 422 confirmed
              migration paths, not blog posts.
            </p>
          </div>

          <div class="card" style="padding:20px;">
            <p style="font-weight:700;color:var(--ink);font-size:14px;margin:0 0 6px;">
              Verified tool combinations
            </p>
            <p style="color:var(--ink-muted);font-size:13px;line-height:1.7;margin:0;">
              93,000+ tool pairings observed in real projects. When your agent recommends
              Supabase + Prisma, it&rsquo;s because they coexist in hundreds of repos &mdash; not because
              both have &ldquo;database&rdquo; in their description.
            </p>
          </div>

          <div class="card" style="padding:20px;">
            <p style="font-weight:700;color:var(--ink);font-size:14px;margin:0 0 6px;">
              Built for agent workflows
            </p>
            <p style="color:var(--ink-muted);font-size:13px;line-height:1.7;margin:0;">
              21 purpose-built MCP tools: search by need, get integration docs, analyze
              dependency health, report outcomes. Agents get structured data, not HTML
              to parse.
            </p>
          </div>

        </div>

        <!-- Step 1: Install MCP -->
        <div style="margin-bottom:40px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                <span style="width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0F1D30;
                             display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;">1</span>
                <h2 style="font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0;">Install the MCP server</h2>
            </div>

            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
                {tab_buttons}
            </div>

            {tab_panels}
        </div>

        <!-- Step 2: Add CLAUDE.md -->
        <div style="margin-bottom:40px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                <span style="width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0F1D30;
                             display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;">2</span>
                <h2 style="font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0;">Add to your project <span style="font-size:14px;font-weight:400;color:var(--ink-muted);">(optional)</span></h2>
            </div>
            <p style="font-size:14px;color:var(--ink-muted);margin:0 0 12px;line-height:1.6;">
                Drop this in your project root. Your agent will check dependency health scores and search for existing tools before writing infrastructure from scratch.
            </p>

            <div style="position:relative;">
                <pre class="copyable" style="background:var(--ink);color:#e2e8f0;padding:16px 50px 16px 16px;
                            border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-mono);
                            overflow-x:auto;line-height:1.6;margin:0;max-height:240px;overflow-y:auto;">{claude_md_escaped}</pre>
                {_COPY_BTN}
            </div>
            <p style="font-size:12px;color:var(--ink-light);margin:8px 0 0;">
                Download: <a href="/setup/claude.md" style="color:var(--accent);">CLAUDE.md</a> | <a href="/setup/cursorrules" style="color:var(--accent);">.cursorrules</a>
            </p>
        </div>

        <!-- Step 3: GitHub Action -->
        <div style="margin-bottom:40px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                <span style="width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0F1D30;
                             display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;">3</span>
                <h2 style="font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0;">Add CI health check <span style="font-size:14px;font-weight:400;color:var(--ink-muted);">(optional)</span></h2>
            </div>
            <p style="font-size:14px;color:var(--ink-muted);margin:0 0 12px;line-height:1.6;">
                Automatically score dependency health on every pull request that changes your manifest.
            </p>

            <div style="position:relative;">
                <pre class="copyable" style="background:var(--ink);color:#e2e8f0;padding:16px 50px 16px 16px;
                            border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-mono);
                            overflow-x:auto;line-height:1.6;margin:0;">name: Stack Health Check
on:
  pull_request:
    paths:
      - &#x27;package.json&#x27;
      - &#x27;requirements.txt&#x27;
permissions:
  pull-requests: write
jobs:
  health-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: Pattyboi101/stack-health-check@master</pre>
                {_COPY_BTN}
            </div>
            <p style="font-size:13px;color:var(--ink-muted);margin:10px 0 0;">
                Add this to <code>.github/workflows/stack-health.yml</code> — every PR that changes dependencies gets a health score comment.
            </p>
        </div>

        <!-- Step 4: Get API key -->
        <div style="margin-bottom:40px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                <span style="width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0F1D30;
                             display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;">4</span>
                <h2 style="font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0;">Get your API key <span style="font-size:14px;font-weight:400;color:var(--ink-muted);">(free)</span></h2>
            </div>
            <p style="font-size:14px;color:var(--ink-muted);margin:0 0 16px;line-height:1.6;">
                An API key unlocks personalized recommendations and tracks your tool discovery history.
            </p>
            <div style="display:flex;gap:12px;flex-wrap:wrap;">
                <a href="{"/dashboard" if user else "/login?next=/dashboard"}"
                   class="btn btn-primary" style="padding:12px 24px;font-size:14px;text-decoration:none;min-height:44px;">
                    {"Get your API key" if user else "Sign in to get your API key"}
                </a>
            </div>
        </div>

        <!-- What happens next -->
        <div class="card" style="padding:24px;">
            <h3 style="font-family:var(--font-display);font-size:18px;color:var(--ink);margin:0 0 12px;">What happens next</h3>
            <div style="font-size:14px;color:var(--ink-muted);line-height:1.8;">
                Your AI agent will automatically search IndieStack when you need developer infrastructure.
                Instead of generating auth code from scratch, it finds Clerk or Lucia. Instead of writing
                a payment flow, it finds LemonSqueezy or Polar. 40 categories, 8,000+ tools, verified
                compatibility data.
            </div>
        </div>

    </div>

    <script>
    // Tab switching
    document.querySelectorAll('.setup-tab').forEach(btn => {{
        btn.addEventListener('click', () => {{
            document.querySelectorAll('.setup-tab').forEach(b => {{
                b.classList.remove('active');
                b.style.background = 'transparent';
            }});
            btn.classList.add('active');
            btn.style.background = 'var(--card-bg)';
            const tab = btn.dataset.tab;
            document.querySelectorAll('.setup-panel').forEach(p => {{
                p.style.display = p.dataset.tab === tab ? 'block' : 'none';
            }});
        }});
    }});

    // Copy buttons — copy the text content of the adjacent <pre>
    document.querySelectorAll('.copy-btn').forEach(btn => {{
        btn.addEventListener('click', () => {{
            const pre = btn.parentElement.querySelector('pre.copyable');
            if (pre) {{
                navigator.clipboard.writeText(pre.textContent);
                btn.textContent = 'Copied!';
                setTimeout(() => btn.textContent = 'Copy', 2000);
            }}
        }});
    }});
    </script>
    '''

    return HTMLResponse(page_shell("Set up IndieStack", body, description="IndieStack gives your AI agent curated access to 8,000+ developer tools, migration data from 4,500+ repos, and 93,000+ verified tool combinations. One command.", user=user))


@router.get("/setup/claude.md", response_class=PlainTextResponse)
async def claude_md_download(request: Request):
    """Downloadable CLAUDE.md file."""
    return PlainTextResponse(
        CLAUDE_MD_TEMPLATE.strip(),
        media_type="text/markdown",
        headers={"Content-Disposition": "attachment; filename=CLAUDE.md"},
    )


@router.get("/setup/cursorrules", response_class=PlainTextResponse)
async def cursorrules_download(request: Request):
    """Downloadable .cursorrules file."""
    return PlainTextResponse(
        CURSORRULES_TEMPLATE.strip(),
        media_type="text/markdown",
        headers={"Content-Disposition": "attachment; filename=.cursorrules"},
    )
