import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableCaption,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import {
  Terminal,
  Cpu,
  PlayCircle,
  Settings,
  Activity,
  CloudLightning,
  Shield,
  ArrowRight,
} from "lucide-react";

const commands = [
  {
    command: "aethex init [name]",
    description: "Scaffold a new project with opinionated defaults",
    usage: "Creates configuration, environments, and starter services",
  },
  {
    command: "aethex login",
    description: "Authenticate the CLI with your AeThex identity",
    usage: "Support for browser-based login and personal access tokens",
  },
  {
    command: "aethex deploy",
    description: "Build and deploy the current project",
    usage: "Runs tests, packages artifacts, and promotes to the target environment",
  },
  {
    command: "aethex env pull",
    description: "Sync environment variables and secrets",
    usage: "Keeps local .env files mirrored with the dashboard",
  },
  {
    command: "aethex pipeline logs",
    description: "Stream deployment logs in real time",
    usage: "Supports filters by environment, branch, or commit SHA",
  },
];

const automationTips = [
  {
    title: "GitHub Actions",
    description:
      "Use the official AeThex GitHub Action to authenticate, run smoke tests, and deploy on every pull request merge.",
  },
  {
    title: "Audit Trails",
    description:
      "Every CLI deployment emits audit events. Stream them into your SIEM through the webhooks integration.",
  },
  {
    title: "Rollbacks",
    description:
      "`aethex deploy --rollback latest` instantly reverts to the previous stable release and notifies collaborators.",
  },
  {
    title: "Preview Environments",
    description:
      "`aethex preview create` spins up disposable stacks tied to feature branches for stakeholder reviews.",
  },
];

export default function DocsCli() {
  return (
    <div className="space-y-12">
      <section id="overview" className="space-y-4">
        <Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
          <Terminal className="mr-2 h-3 w-3" />
          CLI Tools
        </Badge>
        <h2 className="text-3xl font-semibold text-white">Operate AeThex from the command line</h2>
        <p className="text-gray-300 max-w-3xl">
          The AeThex CLI automates local development, environment management, and production deployments. It is
          built with stability in mind, featuring transactional deploys, shell-friendly output, and native support for
          Linux, macOS, and Windows.
        </p>
      </section>

      <section id="commands" className="space-y-4">
        <div className="flex items-center gap-3">
          <Cpu className="h-6 w-6 text-amber-300" />
          <h3 className="text-2xl font-semibold text-white">Command catalog</h3>
        </div>
        <Card className="bg-slate-900/60 border-slate-700">
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Command</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead>Usage notes</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {commands.map((item) => (
                  <TableRow key={item.command}>
                    <TableCell className="font-mono text-purple-200">{item.command}</TableCell>
                    <TableCell className="text-gray-300">{item.description}</TableCell>
                    <TableCell className="text-gray-400 text-sm">{item.usage}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
              <TableCaption>Run <code className="bg-black/40 px-1">aethex --help</code> for the full command tree.</TableCaption>
            </Table>
          </CardContent>
        </Card>
      </section>

      <section className="grid gap-6 lg:grid-cols-3">
        <Card className="bg-slate-900/60 border-slate-700">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-white">
              <PlayCircle className="h-5 w-5 text-amber-300" />
              Local development
            </CardTitle>
          </CardHeader>
          <CardContent className="text-gray-300 space-y-3 text-sm">
            <p>
              Run <code className="bg-black/40 px-1">aethex dev</code> to start local services with hot reloading and the
              AeThex mock identity provider. Inspect logs via the integrated tail view.
            </p>
            <p>
              Use <code className="bg-black/40 px-1">aethex data seed</code> to populate sample datasets for QA or demo
              accounts.
            </p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900/60 border-slate-700">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-white">
              <Settings className="h-5 w-5 text-amber-300" />
              Environment management
            </CardTitle>
          </CardHeader>
          <CardContent className="text-gray-300 space-y-3 text-sm">
            <p>
              Synchronize configuration with <code className="bg-black/40 px-1">aethex env pull</code> or populate remote
              environments from local files using <code className="bg-black/40 px-1">aethex env push</code>.
            </p>
            <p>
              Inspect secrets securely through <code className="bg-black/40 px-1">aethex env inspect</code>. Output is redacted
              by default, keeping sensitive data safe in terminal logs.
            </p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900/60 border-slate-700">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-white">
              <Activity className="h-5 w-5 text-amber-300" />
              Deployment safety
            </CardTitle>
          </CardHeader>
          <CardContent className="text-gray-300 space-y-3 text-sm">
            <p>
              Each deployment is transactional: a failure during build or migration automatically halts promotion and
              emits alerts to subscribed channels.
            </p>
            <p>
              Gates such as quality checks or approvals can be configured in <code className="bg-black/40 px-1">aethex.config.ts</code>
              and enforced automatically by the CLI.
            </p>
          </CardContent>
        </Card>
      </section>

      <section id="automation" className="space-y-4">
        <div className="flex items-center gap-3">
          <CloudLightning className="h-6 w-6 text-amber-300" />
          <h3 className="text-2xl font-semibold text-white">Automate everything</h3>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          {automationTips.map((tip) => (
            <Card key={tip.title} className="bg-slate-900/60 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white text-lg">{tip.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-sm text-gray-300">
                  {tip.description}
                </CardDescription>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section id="security" className="rounded-2xl border border-amber-500/40 bg-amber-900/20 p-8">
        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div className="space-y-2">
            <h3 className="text-2xl font-semibold text-white">Stay safe in production</h3>
            <p className="text-gray-200 max-w-2xl text-sm">
              The CLI signs every build artifact and enforces checksums during deployment. Combine this with RBAC token
              policies to guarantee only trusted pipelines can trigger releases.
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Button asChild size="lg" className="bg-amber-500 hover:bg-amber-400 text-black">
              <Link to="/docs/getting-started">
                <ArrowRight className="mr-2 h-5 w-5" />
                Return to setup guide
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="border-amber-300/60 text-amber-100">
              <Link to="/support">
                <Shield className="mr-2 h-5 w-5" />
                Security best practices
              </Link>
            </Button>
            <Button asChild variant="ghost" size="lg" className="text-amber-100 hover:text-amber-50">
              <Link to="/docs/platform">
                Discover platform features
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
