import { Link } from "react-router-dom";
import {
  Rocket,
  Package,
  Plug,
  Shield,
  GitBranch,
  Scale,
  Ship,
  Lock,
  ArrowRight,
  Sparkles,
} from "lucide-react";
import { Callout } from "./components/Callout";

const cards = [
  {
    icon: Rocket,
    title: "Quick Start",
    description: "Get Veylant IA running in 5 minutes with Docker Compose.",
    href: "/docs/getting-started/quick-start",
    color: "bg-blue-50 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400",
  },
  {
    icon: Package,
    title: "Installation",
    description: "Configure services, providers, and environment variables.",
    href: "/docs/installation/docker",
    color: "bg-purple-50 dark:bg-purple-950/30 text-purple-600 dark:text-purple-400",
  },
  {
    icon: Plug,
    title: "API Reference",
    description: "Full reference for all REST endpoints, parameters, and responses.",
    href: "/docs/api/chat-completions",
    color: "bg-green-50 dark:bg-green-950/30 text-green-600 dark:text-green-400",
  },
  {
    icon: Shield,
    title: "PII & Privacy",
    description: "3-layer PII detection, pseudonymization, and Redis-backed mappings.",
    href: "/docs/guides/pii",
    color: "bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400",
  },
  {
    icon: GitBranch,
    title: "Routing Rules",
    description: "Route AI requests by role, department, model, or sensitivity.",
    href: "/docs/guides/routing",
    color: "bg-amber-50 dark:bg-amber-950/30 text-amber-600 dark:text-amber-400",
  },
  {
    icon: Scale,
    title: "Compliance",
    description: "GDPR Article 30 registry, AI Act risk classification, and DPIA.",
    href: "/docs/guides/compliance",
    color: "bg-teal-50 dark:bg-teal-950/30 text-teal-600 dark:text-teal-400",
  },
  {
    icon: Ship,
    title: "Deployment",
    description: "Docker, Kubernetes Helm chart, and blue/green with Istio.",
    href: "/docs/deployment/kubernetes",
    color: "bg-indigo-50 dark:bg-indigo-950/30 text-indigo-600 dark:text-indigo-400",
  },
  {
    icon: Lock,
    title: "Security",
    description: "Zero Trust, mTLS, AES-256-GCM encryption, and audit trails.",
    href: "/docs/security/model",
    color: "bg-slate-50 dark:bg-slate-950/30 text-slate-600 dark:text-slate-400",
  },
];

export function DocsHomePage() {
  return (
    <div className="py-4">
      {/* Hero */}
      <div className="mb-10">
        <div className="flex items-center gap-2 mb-4">
          <span className="text-xs font-semibold bg-primary/10 text-primary px-2 py-0.5 rounded-full">
            v1.0.0 — Generally Available
          </span>
        </div>
        <h1 className="text-4xl font-extrabold tracking-tight text-foreground mb-4">
          Veylant IA Documentation
        </h1>
        <p className="text-lg text-muted-foreground max-w-2xl leading-relaxed">
          Everything you need to build, configure, and operate your enterprise AI governance
          platform. Prevent Shadow AI, enforce PII anonymization, ensure GDPR compliance, and
          control costs across all LLM usage.
        </p>
      </div>

      {/* What's new */}
      <Callout type="tip" title="What's new in v1.0.0">
        Pentest passed (0 Critical, 0 High), 2 pilot clients migrated, blue/green deployment with
        Istio, HPA autoscaling (3→15 replicas), 7 Prometheus alerts, SLO dashboard (99.5%), and 6
        operational runbooks.{" "}
        <Link to="/docs/changelog" className="text-primary hover:underline font-medium">
          Read the full changelog →
        </Link>
      </Callout>

      {/* Cards grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
        {cards.map((card) => (
          <Link
            key={card.href}
            to={card.href}
            className="group flex items-start gap-4 rounded-xl border bg-card p-5 hover:shadow-md transition-all hover:border-primary/30"
          >
            <div className={`p-2.5 rounded-lg shrink-0 ${card.color}`}>
              <card.icon className="h-5 w-5" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between">
                <h3 className="font-semibold text-foreground">{card.title}</h3>
                <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
              </div>
              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
                {card.description}
              </p>
            </div>
          </Link>
        ))}
      </div>

      {/* Quick links */}
      <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="rounded-xl border bg-card p-4">
          <div className="flex items-center gap-2 mb-3">
            <Sparkles className="h-4 w-4 text-primary" />
            <span className="text-sm font-semibold">Popular pages</span>
          </div>
          <ul className="space-y-1.5">
            {[
              { title: "Chat Completions API", href: "/docs/api/chat-completions" },
              { title: "Routing Rules Engine", href: "/docs/guides/routing" },
              { title: "RBAC & Permissions", href: "/docs/guides/rbac" },
              { title: "GDPR Compliance", href: "/docs/guides/compliance" },
            ].map((l) => (
              <li key={l.href}>
                <Link
                  to={l.href}
                  className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1.5"
                >
                  <ArrowRight className="h-3 w-3" />
                  {l.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div className="rounded-xl border bg-card p-4">
          <div className="flex items-center gap-2 mb-3">
            <Package className="h-4 w-4 text-primary" />
            <span className="text-sm font-semibold">AI Providers</span>
          </div>
          <ul className="space-y-1.5">
            {[
              "OpenAI (gpt-4o, gpt-4-turbo)",
              "Anthropic (claude-3-5-sonnet)",
              "Azure OpenAI",
              "Mistral AI",
              "Ollama (self-hosted)",
            ].map((p) => (
              <li key={p} className="text-sm text-muted-foreground flex items-center gap-1.5">
                <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
                {p}
              </li>
            ))}
          </ul>
        </div>

        <div className="rounded-xl border bg-card p-4">
          <div className="flex items-center gap-2 mb-3">
            <Plug className="h-4 w-4 text-primary" />
            <span className="text-sm font-semibold">Compatibility</span>
          </div>
          <p className="text-sm text-muted-foreground mb-2">
            OpenAI-compatible API — drop-in replacement:
          </p>
          <ul className="space-y-1.5">
            {[
              "openai Python SDK",
              "openai Node.js SDK",
              "LangChain",
              "LlamaIndex",
              "Any HTTP client",
            ].map((c) => (
              <li key={c} className="text-sm text-muted-foreground flex items-center gap-1.5">
                <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                {c}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
