import type { Metadata } from 'next';
import Link from 'next/link';
import { Terminal, Check } from 'lucide-react';

export const metadata: Metadata = {
  title: 'MCP Server — Connect PredictIQ Pro to Claude & AI Agents',
  description: 'Run the PredictIQ Pro MCP server locally to give Claude, Claude Code, or any MCP-compatible AI agent direct access to live football predictions, fixtures, and odds.',
};

const CONFIG_SNIPPET = `{
  "mcpServers": {
    "predictiq-pro": {
      "command": "python",
      "args": ["/absolute/path/to/mcp_server.py"],
      "env": { "PREDICTIQ_API_KEY": "your_key_here" }
    }
  }
}`;

const TOOLS = [
  { name: 'get_live_predictions', desc: "Current live and upcoming matches with the model's probabilities, expected goals, and best bet." },
  { name: 'get_fixtures', desc: 'Fixtures filtered by status or league — finished results, scheduled, or live.' },
  { name: 'get_match_details', desc: 'Full detail for one match: fixture info, prediction (if available), and confirmed lineups.' },
  { name: 'get_odds', desc: 'Bookmaker odds comparison for a specific match, if available.' },
  { name: 'get_account_info', desc: 'Your API key\'s plan and usage — check your rate-limit status.' },
];

export default function McpPage() {
  return (
    <main className="max-w-[720px] mx-auto px-6 py-16">
      <div className="flex items-center gap-2 text-[11px] font-mono text-lime uppercase tracking-widest mb-3">
        <Terminal className="w-3.5 h-3.5" /> For developers
      </div>
      <h1 className="font-display text-4xl sm:text-5xl uppercase tracking-tight mb-3">
        MCP <span className="text-lime">Server</span>
      </h1>
      <p className="text-ash text-sm mb-10 max-w-[520px]">
        Give Claude, Claude Code, or any MCP-compatible AI agent direct access to live predictions,
        fixtures, and odds — no copy-pasting API responses into chat.
      </p>

      <div className="bg-surface border border-steel rounded-xl p-6 mb-8">
        <h2 className="font-display text-lg uppercase mb-4">Setup</h2>
        <ol className="space-y-4 text-sm text-paper">
          <li>
            <span className="font-semibold">1. Get an API key</span>
            <p className="text-ash text-xs mt-1">
              <Link href="/register" className="text-lime hover:underline">Register for free</Link> if you don't have one yet.
            </p>
          </li>
          <li>
            <span className="font-semibold">2. Download the server script</span>
            <p className="text-ash text-xs mt-1">
              <a href="/mcp_server.py" download className="text-lime hover:underline">Download mcp_server.py</a> — install its two dependencies:
              <code className="block bg-ink rounded px-2 py-1 mt-1 font-mono">pip install mcp requests</code>
            </p>
          </li>
          <li>
            <span className="font-semibold">3. Add it to your AI agent's config</span>
            <p className="text-ash text-xs mt-1 mb-2">
              For Claude Desktop, edit <code className="text-lime">claude_desktop_config.json</code>:
            </p>
            <pre className="bg-ink border border-steel rounded-lg p-4 text-[11px] font-mono text-paper overflow-x-auto">
              {CONFIG_SNIPPET}
            </pre>
          </li>
          <li>
            <span className="font-semibold">4. Restart your AI agent</span>
            <p className="text-ash text-xs mt-1">
              It'll now see PredictIQ Pro's tools automatically and can call them mid-conversation.
            </p>
          </li>
        </ol>
      </div>

      <div className="bg-surface border border-steel rounded-xl p-6">
        <h2 className="font-display text-lg uppercase mb-4">Available Tools</h2>
        <ul className="space-y-3">
          {TOOLS.map((tool) => (
            <li key={tool.name} className="flex items-start gap-2">
              <Check className="w-4 h-4 text-lime shrink-0 mt-0.5" />
              <div>
                <code className="text-sm text-lime font-mono">{tool.name}</code>
                <p className="text-xs text-ash mt-0.5">{tool.desc}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>

      <p className="text-ash text-[11px] font-mono text-center mt-8">
        Every tool call uses your normal API key and counts against your plan's rate limit —{' '}
        <Link href="/pricing" className="text-lime hover:underline">view plans</Link>.
      </p>
    </main>
  );
}