'use client';

import React, { useState, useEffect } from 'react';
import {
  Brain as BrainIcon,
  Terminal,
  Copy,
  Check,
  ChevronLeft,
  Database,
  ShieldCheck,
  Zap,
  Command,
  Settings,
  Link as LinkIcon,
  RefreshCw,
  Trash2,
  ExternalLink,
  Download,
  MessageSquare,
  FileCode,
  Box,
  CheckCircle2,
  FolderOpen
} from 'lucide-react';
import Link from 'next/link';

export default function DocsPage() {
  const [copied, setCopied] = useState<string | null>(null);
  const [toast, setToast] = useState<{ message: string; visible: boolean }>({ message: '', visible: false });

  const showToast = (message: string) => {
    setToast({ message, visible: true });
    setTimeout(() => setToast({ message: '', visible: false }), 3000);
  };

  const handleCopy = (cmd: string, label: string) => {
    navigator.clipboard.writeText(cmd);
    setCopied(cmd);
    showToast(`${label} Copied`);
    setTimeout(() => setCopied(null), 2000);
  };

  const DocCommand = ({ cmd, label }: { cmd: string, label: string }) => (
    <div className="group relative bg-white/[0.02] border border-white/5 rounded-sm p-4 font-mono text-[11px] text-white/80 flex items-center justify-between hover:border-white/20 transition-all mb-4">
      <span className="text-white/40 mr-2">$</span>
      <span className="flex-1">{cmd}</span>
      <button
        onClick={() => handleCopy(cmd, label)}
        className="text-white/20 hover:text-white transition-colors"
      >
        {copied === cmd ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
      </button>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-white/20 font-outfit">
      {/* Structural Background */}
      <div className="fixed inset-0 bg-grid opacity-20 pointer-events-none" />
      <div className="fixed inset-0 bg-gradient-to-b from-[#0a0a0a] via-[#0a0a0a]/80 to-[#0a0a0a] pointer-events-none" />

      {/* Toast Notification */}
      <div className={`fixed bottom-12 left-1/2 -translate-x-1/2 z-[100] transition-all duration-500 transform ${toast.visible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0 pointer-events-none'}`}>
        <div className="bg-white text-black px-6 py-3 rounded-sm flex items-center gap-3 shadow-2xl">
          <Check className="w-4 h-4" />
          <span className="text-[10px] font-black uppercase tracking-widest">{toast.message}</span>
        </div>
      </div>

      {/* Navbar */}
      <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 backdrop-blur-xl">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3">
            <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
              <BrainIcon className="w-5 h-5 text-black" />
            </div>
            <span className="text-lg font-bold tracking-tighter uppercase italic">Ever Brain</span>
          </Link>

          <div className="flex items-center gap-10 text-[10px] font-black uppercase tracking-[0.2em] text-white/40">
            <span className="text-white">Protocol</span>
          </div>

          <div className="flex items-center gap-6">
            <Link href="/" className="text-white/40 hover:text-white transition-colors text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
              <ChevronLeft className="w-3 h-3" /> Back
            </Link>
          </div>
        </div>
      </nav>

      <main className="relative z-10 pt-40 pb-32 px-6 max-w-4xl mx-auto">
        <header className="mb-24">
          <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 border border-white/10 text-[10px] font-bold text-white/50 mb-8 uppercase tracking-[0.3em]">
            DOCUMENTATION // PROTOCOL V0.1
          </div>
          <h1 className="text-6xl font-bold tracking-tighter mb-6 uppercase italic">The Core <br />Protocol</h1>
          <p className="text-xl text-white/40 leading-relaxed font-medium">
            Master the "Handshake" between your code and your intelligence.
          </p>
        </header>

        {/* Section: End-to-End Guide */}
        <section className="mb-32">
          <h2 className="text-xs font-black uppercase tracking-[0.3em] text-white/20 mb-12 flex items-center gap-4">
            <div className="h-px w-8 bg-white/20" />
            01 // END-TO-END WORKFLOW
          </h2>

          <div className="space-y-24">
            {/* Step 1: Install */}
            <div className="relative pl-16">
              <div className="absolute left-0 top-0 w-10 h-10 border border-white/20 flex items-center justify-center text-xs font-black">01</div>
              <h3 className="text-xl font-bold mb-4 italic">Installation</h3>
              <p className="text-sm text-white/40 mb-6 leading-relaxed">
                Install Ever Brain globally via Pip (recommended) or use our one-line installer.
              </p>
              <div className="space-y-4">
                <div>
                  <span className="text-[9px] font-black uppercase tracking-widest text-white/20 block mb-2">Option A: Python Package</span>
                  <DocCommand cmd="pip install ever-brain-cli" label="Pip Install" />
                </div>
                <div>
                  <span className="text-[9px] font-black uppercase tracking-widest text-white/20 block mb-2">Option B: PowerShell One-Liner</span>
                  <DocCommand cmd={`irm ${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8000'}/install.ps1 | iex`} label="One-Line Install" />
                </div>
              </div>
            </div>

            {/* Step 2: Initialize */}
            <div className="relative pl-16">
              <div className="absolute left-0 top-0 w-10 h-10 border border-white/20 flex items-center justify-center text-xs font-black">02</div>
              <h3 className="text-xl font-bold mb-4 italic">Initialize Your Cognition</h3>
              <p className="text-sm text-white/40 mb-6 leading-relaxed">
                Create and select a brain instance. This creates the <code>.brains/</code> folder where your project memories live.
              </p>
              <div className="space-y-2">
                <DocCommand cmd="ever-brain create my-brain" label="Create" />
                <DocCommand cmd="ever-brain use my-brain" label="Use" />
              </div>
            </div>

            {/* Step 3: Attach */}
            <div className="relative pl-16">
              <div className="absolute left-0 top-0 w-10 h-10 border border-white/20 flex items-center justify-center text-xs font-black">03</div>
              <h3 className="text-xl font-bold mb-4 italic">Perform the Handshake</h3>
              <p className="text-sm text-white/40 mb-6 leading-relaxed">
                Run <code>ever-brain attach</code>. This generates <strong><code>AGENT.md</code></strong> in your project root. This is the file your AI will read to understand how to connect to the brain.
              </p>
              <DocCommand cmd="ever-brain attach" label="Attach" />
              <div className="flex items-center gap-3 p-4 bg-emerald-500/5 border border-emerald-500/10 rounded-sm mt-4">
                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                <span className="text-[10px] text-emerald-500/80 uppercase font-black tracking-widest">Handshake Complete</span>
              </div>
            </div>

            {/* Step 4: The Agent Interaction */}
            <div className="relative pl-16">
              <div className="absolute left-0 top-0 w-10 h-10 border border-white/20 flex items-center justify-center text-xs font-black">04</div>
              <h3 className="text-xl font-bold mb-4 italic">Directing Your Agent</h3>
              <p className="text-sm text-white/40 mb-6 leading-relaxed">
                Now, open your AI Agent (Cursor, Claude, etc.) and give it its first order.
              </p>

              <div className="bg-white/[0.03] border border-white/10 p-8 space-y-6">
                <div className="flex items-center gap-3 text-[10px] font-black text-white/20 uppercase tracking-[0.2em]">
                  <MessageSquare className="w-3.5 h-3.5" />
                  Suggested Prompt
                </div>
                <p className="text-white italic text-lg leading-relaxed">
                  "Please read AGENT.md in the root directory. You are now connected to my Cognition OS. Use the 'ever-brain' tools to remember architectural decisions and project context."
                </p>
                <button
                  onClick={() => handleCopy("Please read AGENT.md in the root directory. You are now connected to my Cognition OS. Use the 'ever-brain' tools to remember architectural decisions and project context.", "Prompt")}
                  className="bg-white text-black px-6 py-2 rounded-sm text-[10px] font-black uppercase tracking-widest hover:bg-white/90"
                >
                  Copy Prompt
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* Section: Command Reference */}
        <section className="mb-32">
          <h2 className="text-xs font-black uppercase tracking-[0.3em] text-white/20 mb-12 flex items-center gap-4">
            <div className="h-px w-8 bg-white/20" />
            02 // COMMAND REFERENCE
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            <div className="space-y-4">
              <h3 className="text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                <Zap className="w-4 h-4 text-white/20" /> ever-brain create
              </h3>
              <DocCommand cmd="ever-brain create <name>" label="Create" />
            </div>
            <div className="space-y-4">
              <h3 className="text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                <Settings className="w-4 h-4 text-white/20" /> ever-brain use
              </h3>
              <DocCommand cmd="ever-brain use <name>" label="Use" />
            </div>
            <div className="space-y-4">
              <h3 className="text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                <LinkIcon className="w-4 h-4 text-white/20" /> ever-brain attach
              </h3>
              <DocCommand cmd="ever-brain attach" label="Attach" />
            </div>
            <div className="space-y-4">
              <h3 className="text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                <RefreshCw className="w-4 h-4 text-white/20" /> ever-brain sync
              </h3>
              <DocCommand cmd="ever-brain sync" label="Sync" />
            </div>
          </div>
        </section>

        {/* Section: Folder Structure */}
        <section>
          <h2 className="text-xs font-black uppercase tracking-[0.3em] text-white/20 mb-12 flex items-center gap-4">
            <div className="h-px w-8 bg-white/20" />
            03 // PROJECT ANATOMY
          </h2>
          <div className="space-y-4 font-mono text-[11px] text-white/40">
            <div className="flex items-center gap-3">
              <Box className="w-4 h-4" />
              <span>.brains/</span>
              <span className="text-white/10 italic">// The Storage (Permanent Memory)</span>
            </div>
            <div className="flex items-center gap-3 pl-6">
              <span>my-brain/</span>
              <span className="text-white/10 italic">// Your actual cognitive instance</span>
            </div>
            <div className="flex items-center gap-3">
              <FolderOpen className="w-4 h-4" />
              <span>.brain/</span>
              <span className="text-white/10 italic">// The Runtime (Active Session Config)</span>
            </div>
            <div className="flex items-center gap-3">
              <FileCode className="w-4 h-4 text-emerald-500/40" />
              <span className="text-white/60 font-bold tracking-tight">AGENT.md</span>
              <span className="text-emerald-500/20 italic">// The Protocol (Show this to your AI)</span>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="relative z-10 py-20 px-6 border-t border-white/5 mt-32">
        <div className="max-w-7xl mx-auto flex flex-col md:row justify-between items-center gap-12">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <BrainIcon className="w-5 h-5 text-white" />
            <span className="text-sm font-black uppercase tracking-tighter italic">Ever Brain</span>
          </div>
          <p className="text-white/20 text-[10px] font-bold uppercase tracking-[0.2em]">
            &copy; MMXXVI Ever Brain // System Ready
          </p>
        </div>
      </footer>
    </div>
  );
}