"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { openContactSupport } from "@/components/support/contact-support-dialog";

interface DocArticleProps {
  title: string;
  description?: string;
  /**
   * Icon element, e.g. <Rocket className="size-[18px]" />. Passed as a
   * rendered React element rather than a component type so server-rendered
   * doc pages can pass it to this client component without tripping the
   * "functions cannot be passed to client components" RSC check.
   */
  icon?: React.ReactNode;
  children: React.ReactNode;
}

export function DocArticle({
  title,
  description,
  icon,
  children,
}: DocArticleProps) {
  return (
    <article className="space-y-6">
      <div>
        <Link
          href="/docs"
          className="mb-3 inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
        >
          <ArrowLeft className="size-3" />
          All docs
        </Link>
        <div className="flex items-start gap-3">
          {icon && (
            <div className="mt-1 flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
              {icon}
            </div>
          )}
          <div>
            <h1 className="text-xl font-bold tracking-tight text-foreground sm:text-2xl">
              {title}
            </h1>
            {description && (
              <p className="mt-1 text-sm text-muted-foreground">
                {description}
              </p>
            )}
          </div>
        </div>
      </div>

      <div className="space-y-6 text-sm leading-relaxed text-foreground">
        {children}
      </div>
    </article>
  );
}

interface DocSectionProps {
  title: string;
  children: React.ReactNode;
}

export function DocSection({ title, children }: DocSectionProps) {
  return (
    <section className="space-y-3">
      <h2 className="border-b border-border/50 pb-2 text-base font-semibold tracking-tight text-foreground">
        {title}
      </h2>
      <div className="space-y-3 text-sm leading-relaxed text-muted-foreground [&_code]:rounded-md [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-foreground [&_strong]:text-foreground [&_a]:text-primary [&_a:hover]:underline">
        {children}
      </div>
    </section>
  );
}

interface DocStepsProps {
  children: React.ReactNode;
}

export function DocSteps({ children }: DocStepsProps) {
  return <ol className="space-y-3 pl-0">{children}</ol>;
}

interface DocStepProps {
  title: string;
  children: React.ReactNode;
  index: number;
}

export function DocStep({ title, children, index }: DocStepProps) {
  return (
    <li 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">
        {index}
      </span>
      <div className="min-w-0 flex-1 space-y-1 pt-0.5">
        <p className="text-sm font-semibold text-foreground">{title}</p>
        <div className="text-sm leading-relaxed text-muted-foreground">
          {children}
        </div>
      </div>
    </li>
  );
}

interface DocCalloutProps {
  tone?: "info" | "warning" | "tip";
  title?: string;
  children: React.ReactNode;
}

export function DocCallout({
  tone = "info",
  title,
  children,
}: DocCalloutProps) {
  const tones = {
    info: "border-primary/30 bg-primary/5",
    warning: "border-amber-500/30 bg-amber-500/5",
    tip: "border-emerald-500/30 bg-emerald-500/5",
  } as const;

  return (
    <Card className={tones[tone]}>
      <CardContent className="p-4 text-sm">
        {title && (
          <p className="mb-1 text-sm font-semibold text-foreground">{title}</p>
        )}
        <div className="text-sm leading-relaxed text-muted-foreground">
          {children}
        </div>
      </CardContent>
    </Card>
  );
}

interface DocNextProps {
  href: string;
  title: string;
  description?: string;
}

export function DocNext({ href, title, description }: DocNextProps) {
  return (
    <Card className="border-primary/20 transition-colors hover:border-primary/40">
      <CardContent className="p-4">
        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          Next up
        </p>
        <Link href={href} className="mt-1 block">
          <p className="text-sm font-semibold text-foreground hover:text-primary">
            {title} &rarr;
          </p>
          {description && (
            <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
          )}
        </Link>
      </CardContent>
    </Card>
  );
}

interface DocCtaContactProps {
  label?: string;
}

export function DocContactCta({ label }: DocCtaContactProps) {
  return (
    <Card className="border-primary/20 bg-primary/5">
      <CardContent className="flex flex-col items-start gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-muted-foreground">
          {label || "Still stuck? Our team is happy to help."}
        </p>
        <Button size="sm" type="button" onClick={openContactSupport}>
          Contact support
        </Button>
      </CardContent>
    </Card>
  );
}
