"use client";

import * as React from "react";
import { ChevronDown, ChevronRight, BookOpen, ExternalLink } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export type SetupStep = {
  title: string;
  body: string;
  linkUrl?: string;
  linkLabel?: string;
};

export type SetupGuide = {
  summary: string;
  steps: SetupStep[];
  docsUrl?: string;
};

type SetupGuidePanelProps = {
  providerName: string;
  guide: SetupGuide;
  defaultOpen?: boolean;
  className?: string;
};

export function SetupGuidePanel({
  providerName,
  guide,
  defaultOpen = false,
  className,
}: SetupGuidePanelProps) {
  const [open, setOpen] = React.useState(defaultOpen);

  return (
    <Card className={cn("glass-card border-primary/20", className)}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center gap-3 px-5 py-4 text-left transition-colors hover:bg-primary/5"
      >
        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
          <BookOpen className="size-4" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-semibold">
            Setup instructions for {providerName}
          </p>
          <p className="mt-0.5 text-xs text-muted-foreground">
            {guide.steps.length} steps ·{" "}
            {open ? "Click to collapse" : "Click to expand"}
          </p>
        </div>
        {open ? (
          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
        ) : (
          <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
        )}
      </button>

      {open && (
        <CardContent className="space-y-4 border-t border-border/50 px-5 pb-5 pt-4">
          <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-3">
                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-bold text-primary">
                  {idx + 1}
                </span>
                <div className="min-w-0 flex-1 space-y-1">
                  <p className="text-sm font-medium">{step.title}</p>
                  <p className="text-xs 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 border-t border-border/50 pt-4">
              <p className="text-xs text-muted-foreground">
                Need more detail?
              </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"
              >
                Official documentation
                <ExternalLink className="size-3" />
              </a>
            </div>
          )}
        </CardContent>
      )}
    </Card>
  );
}
