// Documentation Hub
import { Metadata } from 'next';
import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { Factory, Ghost, Book, Cpu, Shield, Zap, ArrowRight, FileCode, TestTube, Settings, Brain, Eye, GitBranch, Crown, Lock, Unlock, Monitor, BarChart3, Users, Wallet, Package, Megaphone, Play, LogIn } from 'lucide-react';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export const metadata: Metadata = {
  title: `Documentation | ${BRAND.companyName}`,
  description: `Complete documentation, user manuals, and technical guides for ${VOCAB.factory}, Foundry agent orchestration, ERP modules, Memory, Perception, and the full ${BRAND.companyName} platform.`,
};

const docs = [
  {
    title: 'Product Tiers',
    description: 'A comprehensive breakdown of Standard and Enterprise (GOD MODE) tiers. Understand exactly what each tier unlocks — from core ERP automation and agent orchestration in Standard, to full self-modification, The Hearth code generation, and God Mode overrides in Enterprise. Includes a detailed feature comparison matrix, pricing guidance, and upgrade path.',
    href: '/docs/product-tiers',
    icon: Crown,
    color: 'from-amber-500 to-brand-secondary',
    featured: true,
    sections: [
      { name: 'Standard Mode — Guardrails, approvals, and supervised automation', icon: Shield },
      { name: 'GOD MODE — Full autonomy, self-modification, and zero-friction overrides', icon: Unlock },
      { name: 'Feature Comparison — Side-by-side matrix of every capability by tier', icon: Zap },
    ],
  },
  {
    title: VOCAB.factory,
    description: 'The self-building software factory at the heart of Foundry Familiars. Describe what you need in natural language, choose your tech stack (React, Postgres, multiple LLMs), and The Hearth\'s three-agent pipeline — Prompt Engineer, UI Engineer, and QA Agent — generates production-ready code, tests it, and deploys it. Includes specification format, testing scenarios, deployment targets, and the Weft engine deep-dive.',
    href: '/docs/dark-factory',
    icon: Factory,
    color: 'from-brand-secondary to-pink-500',
    sections: [
      { name: 'Spec Format — How to write generation specifications', icon: FileCode },
      { name: 'Testing Scenarios — Add and manage automated test coverage', icon: TestTube },
      { name: 'Deployment — Multi-platform deploy targets and CI/CD integration', icon: Zap },
      { name: 'Weft Engine — The template and generation engine internals', icon: Settings },
    ],
  },
  {
    title: 'Foundry Familiars System',
    description: 'The nervous system that coordinates everything. The Foundry is the agent orchestration layer — Tes (Lead Familiar) delegates to domain-specific executives like Sentinel (compliance), Ledger (finance), Nexus (CRM), Harmony (HR), StockWatch (supply chain), Pipeline (sales), Conductor (operations), and Milestone (projects). This documentation covers setup, the event bus architecture, the self-modification engine, the Observer pattern, and how agents learn and evolve autonomously.',
    href: '/docs/gfs',
    icon: Ghost,
    color: 'from-brand-deep to-blue-500',
    sections: [
      { name: 'Setup Guide — Initialize the nervous system end-to-end', icon: Settings },
      { name: 'Event Bus — Real-time event routing between agents', icon: GitBranch },
      { name: 'Self-Modification Engine — How agents evolve their own capabilities', icon: Brain },
      { name: 'Observer — Continuous monitoring, anomaly detection, and learning', icon: Eye },
    ],
  },
  {
    title: 'Memory System',
    description: 'The Ghost\'s persistent mind. Every interaction, decision, and outcome is captured in the episodic memory store. Semantic knowledge distills these experiences into reusable patterns. The consolidation process transforms raw experience into organizational wisdom — your AI gets smarter every single week without retraining. Covers the three-tier architecture, retention policies, and how memory feeds back into agent decision-making.',
    href: '/docs/memory',
    icon: Brain,
    color: 'from-yellow-500 to-orange-500',
    sections: [
      { name: 'Episodic Store — Raw event and decision capture', icon: Book },
      { name: 'Semantic Store — Distilled patterns and organizational knowledge', icon: Cpu },
      { name: 'Consolidation — Automatic learning from accumulated experience', icon: Zap },
    ],
  },
  {
    title: 'Perception System',
    description: 'The Ghost\'s senses. The Perception System processes incoming documents (invoices, contracts, POs), analyzes email threads for sentiment and action items, detects anomalies in financial and operational data streams, and monitors external signals. It converts unstructured noise into structured intelligence that agents can act on immediately. Covers document processing pipelines, email analysis workflows, and anomaly detection thresholds.',
    href: '/docs/perception',
    icon: Eye,
    color: 'from-green-500 to-teal-500',
    sections: [
      { name: 'Document Processing — Invoice, contract, and PO extraction', icon: FileCode },
      { name: 'Email Analysis — Sentiment detection and action item extraction', icon: Settings },
      { name: 'Anomaly Detection — Statistical and pattern-based deviation alerts', icon: Shield },
    ],
  },
];

export default function DocsPage() {
  return (
    <div className="min-h-screen bg-brand-bg">
      <Header />
      <main className="pt-24 pb-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          {/* Hero */}
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
              <Book className="w-4 h-4 text-brand" />
              <span className="text-sm text-gray-300">Documentation &amp; User Manual</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              System <span className="gradient-text">Documentation</span>
            </h1>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto mb-6">
              Everything you need to understand, configure, and operate the {BRAND.companyName} platform — from high-level architecture to hands-on module configuration. Whether you&apos;re evaluating the platform, onboarding your team, or building custom capabilities with the {VOCAB.factory}, start here.
            </p>
            <div className="flex flex-wrap items-center justify-center gap-4 text-sm">
              <Link href="/sales" className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg text-emerald-400 hover:bg-emerald-500/20 transition-colors">
                <Play className="w-4 h-4" />
                Watch the Platform Demo
              </Link>
              <Link href="/ghost-control" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-deep/20 border border-brand-deep/30 rounded-lg text-brand hover:bg-brand-deep/30 transition-colors">
                <LogIn className="w-4 h-4" />
                Log In to Ghost Control
              </Link>
            </div>
          </div>

          {/* Getting Started Banner */}
          <div className="bg-gradient-to-r from-brand-deep/10 via-brand-secondary-deep/10 to-brand-deep/10 border border-brand-deep/20 rounded-2xl p-6 mb-12">
            <h3 className="text-lg font-bold text-white mb-2">New here? Start with these three steps:</h3>
            <div className="grid md:grid-cols-3 gap-4 text-sm">
              <div className="flex items-start gap-3">
                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-deep/30 text-brand flex items-center justify-center font-bold text-xs">1</span>
                <div>
                  <p className="text-white font-medium">Understand the tiers</p>
                  <p className="text-gray-400">Read <Link href="/docs/product-tiers" className="text-brand hover:underline">Product Tiers</Link> to see what Standard vs GOD MODE unlocks.</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-deep/30 text-brand flex items-center justify-center font-bold text-xs">2</span>
                <div>
                  <p className="text-white font-medium">Watch Tes walk you through it</p>
                  <p className="text-gray-400">The <Link href="/sales" className="text-brand hover:underline">Platform Demo</Link> introduces every agent and module in under 10 minutes.</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-deep/30 text-brand flex items-center justify-center font-bold text-xs">3</span>
                <div>
                  <p className="text-white font-medium">Log in and explore</p>
                  <p className="text-gray-400">Access <Link href="/ghost-control" className="text-brand hover:underline">Hearth Control</Link> to see the dashboard, toggle modules, and configure agents.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Doc Cards */}
          <div className="grid md:grid-cols-2 gap-8 mb-16">
            {docs.map((doc) => (
              <Link key={doc.title} href={doc.href}>
                <div className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl h-full hover:border-brand-deep/50 transition-all group">
                  <div className={`w-16 h-16 rounded-xl bg-gradient-to-br ${doc.color} flex items-center justify-center mb-6`}>
                    <doc.icon className="w-8 h-8 text-white" />
                  </div>
                  <h2 className="text-2xl font-bold text-white mb-3 group-hover:text-brand transition-colors">
                    {doc.title}
                  </h2>
                  <p className="text-gray-400 mb-6">{doc.description}</p>
                  <div className="space-y-2">
                    {doc.sections.map((section) => (
                      <div key={section.name} className="flex items-center gap-2 text-sm text-gray-400">
                        <section.icon className="w-4 h-4" />
                        <span>{section.name}</span>
                      </div>
                    ))}
                  </div>
                  <div className="mt-6 flex items-center gap-2 text-brand group-hover:gap-3 transition-all">
                    <span>Read Documentation</span>
                    <ArrowRight className="w-4 h-4" />
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {/* Ghost Control User Manual */}
          <div className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8">
            <div className="flex items-center gap-3 mb-4">
              <Monitor className="w-6 h-6 text-brand" />
              <h3 className="text-xl font-bold text-white">Ghost Control — User Manual</h3>
            </div>
            <p className="text-gray-400 mb-4">
              Ghost Control is the unified command center for your entire operation. From the dashboard you can monitor all ERP modules in real-time, toggle modules on or off, chat with AI agents, run compliance audits, view reports, and access The Hearth. Below is a quick map of what&apos;s inside and how to find it.
            </p>
            <Link
              href="/docs/user-manual"
              className="inline-flex items-center gap-2 px-5 py-2.5 mb-6 bg-gradient-to-r from-brand-deep to-brand-secondary text-white rounded-xl font-semibold text-sm hover:opacity-90 transition-opacity"
            >
              <Book className="w-4 h-4" />
              Read the Full User Manual (10 Chapters)
              <ArrowRight className="w-4 h-4" />
            </Link>
            <div className="grid md:grid-cols-3 gap-4 mb-6">
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <Settings className="w-5 h-5 text-brand mb-2" />
                <div className="text-white font-medium mb-1">Configuration Center</div>
                <div className="text-sm text-gray-400">Toggle ERP modules on/off, view agent profiles, manage the agent hierarchy, configure AI and LLM settings, and run backup/restore operations. Access from the top nav &rarr; Configuration.</div>
              </div>
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <Users className="w-5 h-5 text-emerald-400 mb-2" />
                <div className="text-white font-medium mb-1">Agents &amp; Chat</div>
                <div className="text-sm text-gray-400">Open a direct conversation with any AI agent — Sentinel for compliance questions, Ledger for finance, Nexus for CRM insights, or Tes for cross-domain orchestration. Access from the top nav &rarr; Agents.</div>
              </div>
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <BarChart3 className="w-5 h-5 text-blue-400 mb-2" />
                <div className="text-white font-medium mb-1">Reports &amp; Intelligence</div>
                <div className="text-sm text-gray-400">View the Familiar Brief (weekly executive summary), custom report builder, KPI dashboards, and scheduled data exports. Access from the top nav &rarr; Reports.</div>
              </div>
            </div>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <Wallet className="w-5 h-5 text-green-400 mb-2" />
                <div className="text-white font-medium mb-1">Operations — Finance</div>
                <div className="text-sm text-gray-400">General ledger, chart of accounts, transactions, invoicing, budgets, and AP/AR management. Powered by Ledger agent. Access via Operations &rarr; Finance &amp; Accounting.</div>
              </div>
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <Package className="w-5 h-5 text-orange-400 mb-2" />
                <div className="text-white font-medium mb-1">Operations — Inventory &amp; POS</div>
                <div className="text-sm text-gray-400">Product catalog, stock levels, supplier management, purchase orders — plus a full Point of Sale terminal with menu management, split payments, tips, voids, and multi-printer ticketing. Enable POS in Configuration &rarr; Module Control.</div>
              </div>
              <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                <Factory className="w-5 h-5 text-orange-400 mb-2" />
                <div className="text-white font-medium mb-1">The Hearth</div>
                <div className="text-sm text-gray-400">Generate code from natural language, manage generation projects, view build history, and deploy to multiple targets. Access from the top nav &rarr; The Hearth. See the <Link href="/docs/dark-factory" className="text-brand hover:underline">full documentation</Link>.</div>
              </div>
            </div>
          </div>

          {/* Quick Links */}
          <div className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8">
            <h3 className="text-xl font-bold text-white mb-6">Quick Reference</h3>
            <div className="grid md:grid-cols-5 gap-4">
              <Link href="/docs/user-manual" className="p-4 bg-gradient-to-br from-brand-deep/10 to-brand-secondary/10 rounded-lg hover:from-brand-deep/20 hover:to-brand-secondary/20 transition-colors border border-brand-deep/30">
                <Book className="w-5 h-5 text-brand mb-2" />
                <div className="text-white font-medium">User Manual</div>
                <div className="text-sm text-gray-300">Complete 10-chapter reference</div>
              </Link>
              <Link href="/docs/product-tiers" className="p-4 bg-gradient-to-br from-amber-500/10 to-brand-secondary/10 rounded-lg hover:from-amber-500/20 hover:to-brand-secondary/20 transition-colors border border-amber-500/30">
                <Crown className="w-5 h-5 text-amber-400 mb-2" />
                <div className="text-white font-medium">GOD MODE</div>
                <div className="text-sm text-gray-300">Standard vs Enterprise breakdown</div>
              </Link>
              <Link href="/docs/dark-factory" className="p-4 bg-white/5 rounded-lg hover:bg-white/10 transition-colors">
                <FileCode className="w-5 h-5 text-brand-secondary-light mb-2" />
                <div className="text-white font-medium">The Hearth Docs</div>
                <div className="text-sm text-gray-300">Specs, testing, Weft engine</div>
              </Link>
              <Link href="/docs/dark-factory/weft" className="p-4 bg-white/5 rounded-lg hover:bg-white/10 transition-colors">
                <TestTube className="w-5 h-5 text-green-400 mb-2" />
                <div className="text-white font-medium">Weft Engine Deep-Dive</div>
                <div className="text-sm text-gray-300">Template generation internals</div>
              </Link>
              <Link href="/docs/gfs" className="p-4 bg-white/5 rounded-lg hover:bg-white/10 transition-colors">
                <Settings className="w-5 h-5 text-brand mb-2" />
                <div className="text-white font-medium">GFS Setup</div>
                <div className="text-sm text-gray-300">Initialize the nervous system</div>
              </Link>
            </div>
          </div>

          {/* Additional Resources */}
          <div className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl">
            <h3 className="text-xl font-bold text-white mb-6">Sales &amp; Marketing Resources</h3>
            <p className="text-gray-400 mb-6">
              Need to share the platform with your team or stakeholders? These resources cover the business case, competitive positioning, and everything you need to evaluate or champion {BRAND.companyName}.
            </p>
            <div className="grid md:grid-cols-3 gap-4">
              <Link href="/sales" className="p-4 bg-emerald-500/5 rounded-lg border border-emerald-500/20 hover:bg-emerald-500/10 transition-colors">
                <Play className="w-5 h-5 text-emerald-400 mb-2" />
                <div className="text-white font-medium">Platform Demo</div>
                <div className="text-sm text-gray-300">9-minute walkthrough with Tes introducing every agent and module</div>
              </Link>
              <Link href="/vs-erp" className="p-4 bg-red-500/5 rounded-lg border border-red-500/20 hover:bg-red-500/10 transition-colors">
                <Megaphone className="w-5 h-5 text-red-400 mb-2" />
                <div className="text-white font-medium">vs ERP Comparison</div>
                <div className="text-sm text-gray-300">Side-by-side breakdown against legacy enterprise software</div>
              </Link>
              <Link href="/roi-calculator" className="p-4 bg-blue-500/5 rounded-lg border border-blue-500/20 hover:bg-blue-500/10 transition-colors">
                <BarChart3 className="w-5 h-5 text-blue-400 mb-2" />
                <div className="text-white font-medium">ROI Calculator</div>
                <div className="text-sm text-gray-300">Interactive tool — plug in your numbers, see payback period</div>
              </Link>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}
