import Link from "next/link";
import { BookOpen, ExternalLink, Plug } from "lucide-react";
import { Header } from "@/components/layout/header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { getAllProviders } from "@/lib/integrations/registry";

const CATEGORY_LABELS: Record<string, string> = {
  chms: "Church Management",
  project_mgmt: "Project Management",
  spreadsheet: "Spreadsheet",
  export: "Export",
  webhook: "Webhook",
};

export const metadata = {
  title: "Integration Documentation",
};

export default function IntegrationDocsPage() {
  const providers = getAllProviders();
  const providersWithGuides = providers.filter((p) => p.setupGuide);

  return (
    <div className="space-y-8">
      <Header
        title="Integration Documentation"
        description="Step-by-step setup guides for every integration Echo OCR supports."
        icon={BookOpen}
      >
        <Link href="/settings/integrations">
          <Button variant="outline" size="sm">
            <Plug className="mr-1.5 size-3.5" />
            Manage Integrations
          </Button>
        </Link>
      </Header>

      {/* Table of contents */}
      <Card className="glass-card">
        <CardContent className="p-5">
          <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Jump to an integration
          </p>
          <nav className="flex flex-wrap gap-2">
            {providersWithGuides.map((p) => (
              <a
                key={p.id}
                href={`#${p.id}`}
                className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-muted/40 px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
              >
                {p.name}
                <Badge
                  variant="outline"
                  className="border-border/40 bg-background/60 text-[10px] text-muted-foreground"
                >
                  {CATEGORY_LABELS[p.category] || p.category}
                </Badge>
              </a>
            ))}
          </nav>
        </CardContent>
      </Card>

      {/* Guides */}
      <div className="space-y-10">
        {providersWithGuides.map((provider) => {
          const guide = provider.setupGuide;
          if (!guide) return null;
          return (
            <section
              key={provider.id}
              id={provider.id}
              className="scroll-mt-24 space-y-4"
            >
              <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/50 pb-3">
                <div>
                  <h2 className="text-lg font-semibold tracking-tight">
                    {provider.name}
                  </h2>
                  <p className="mt-0.5 text-sm text-muted-foreground">
                    {provider.description}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <Badge
                    variant="outline"
                    className="text-xs text-muted-foreground"
                  >
                    {CATEGORY_LABELS[provider.category] || provider.category}
                  </Badge>
                  {provider.supportsOAuth && (
                    <Badge
                      variant="outline"
                      className="border-primary/30 text-xs text-primary"
                    >
                      OAuth
                    </Badge>
                  )}
                  <Link
                    href={`/settings/integrations/new?provider=${provider.id}`}
                  >
                    <Button size="sm" variant="outline">
                      <Plug className="mr-1.5 size-3.5" />
                      Connect
                    </Button>
                  </Link>
                </div>
              </div>

              <p className="text-sm text-muted-foreground">{guide.summary}</p>

              <ol className="space-y-4">
                {guide.steps.map((step, idx) => (
                  <li key={idx} className="flex gap-4">
                    <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-bold text-primary">
                      {idx + 1}
                    </span>
                    <div className="min-w-0 flex-1 space-y-1 pt-0.5">
                      <p className="text-sm font-semibold">{step.title}</p>
                      <p className="text-sm leading-relaxed text-muted-foreground">
                        {step.body}
                      </p>
                      {step.linkUrl && (
                        <a
                          href={step.linkUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
                        >
                          {step.linkLabel || step.linkUrl}
                          <ExternalLink className="size-3" />
                        </a>
                      )}
                    </div>
                  </li>
                ))}
              </ol>

              {guide.docsUrl && (
                <div className="flex items-center justify-between rounded-lg border border-border/40 bg-muted/30 px-4 py-3">
                  <p className="text-xs text-muted-foreground">
                    Full official reference
                  </p>
                  <a
                    href={guide.docsUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
                  >
                    {guide.docsUrl}
                    <ExternalLink className="size-3" />
                  </a>
                </div>
              )}
            </section>
          );
        })}
      </div>
    </div>
  );
}
