import { useState } from "react";
import { ExternalLink, BookOpen, ChevronDown, ShieldCheck } from "lucide-react";
import type { Source } from "@/lib/briefing.functions";

/**
 * Collapsible citation list. Shows verified evidence — excerpt + thumbnail scraped
 * live from each source URL — so users can confirm the claim without leaving the page.
 * Hidden by default behind a "Sources (n) ▾" toggle to keep cards clean.
 */
export function Sources({
  items,
  label = "Sources",
  className = "",
  defaultOpen = false,
}: {
  items?: Source[] | null;
  label?: string;
  className?: string;
  defaultOpen?: boolean;
}) {
  const [open, setOpen] = useState(defaultOpen);
  if (!items || items.length === 0) return null;
  const verifiedCount = items.filter((s) => s.verified).length;

  return (
    <div className={`mt-3 ${className}`}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="inline-flex items-center gap-1.5 rounded-full border bg-background px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground hover:bg-muted/60 transition-colors"
      >
        <BookOpen className="h-3 w-3" />
        {label} ({items.length})
        {verifiedCount > 0 ? (
          <span className="inline-flex items-center gap-0.5 text-accent">
            <ShieldCheck className="h-3 w-3" />
            {verifiedCount}
          </span>
        ) : null}
        <ChevronDown
          className={`h-3 w-3 transition-transform ${open ? "rotate-180" : ""}`}
        />
      </button>

      {open ? (
        <ul className="mt-2 space-y-2">
          {items.map((s, i) => (
            <SourceRow key={i} source={s} />
          ))}
        </ul>
      ) : null}
    </div>
  );
}

function SourceRow({ source: s }: { source: Source }) {
  const meta = [s.publisher, s.date].filter(Boolean).join(" • ");
  const Wrap: React.ElementType = s.url ? "a" : "div";
  const linkProps = s.url
    ? { href: s.url, target: "_blank", rel: "noopener noreferrer" }
    : {};

  return (
    <li>
      <Wrap
        {...linkProps}
        className="group flex gap-3 rounded-lg border bg-background/60 p-2.5 transition-colors hover:bg-muted/60"
      >
        {s.image_url ? (
          <img
            src={s.image_url}
            alt=""
            loading="lazy"
            className="h-14 w-20 shrink-0 rounded-md object-cover ring-1 ring-border"
            onError={(e) => {
              (e.currentTarget as HTMLImageElement).style.display = "none";
            }}
          />
        ) : (
          <div className="flex h-14 w-20 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground ring-1 ring-border">
            <BookOpen className="h-4 w-4" />
          </div>
        )}
        <div className="min-w-0 flex-1">
          <div className="flex items-start gap-1.5">
            <p className="line-clamp-2 flex-1 text-[12px] font-medium leading-snug text-foreground group-hover:text-brand">
              {s.title}
            </p>
            {s.url ? (
              <ExternalLink className="mt-0.5 h-3 w-3 shrink-0 opacity-60" />
            ) : null}
          </div>
          <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-[10px] uppercase tracking-wider text-muted-foreground">
            <span className="truncate">{meta || s.publisher}</span>
            {s.verified ? (
              <span className="inline-flex items-center gap-0.5 rounded-full bg-accent/15 px-1.5 py-px text-[9px] font-medium text-accent">
                <ShieldCheck className="h-2.5 w-2.5" />
                Verified
              </span>
            ) : null}
          </div>
          {s.excerpt ? (
            <p className="mt-1 line-clamp-2 text-[11px] italic leading-snug text-muted-foreground">
              “{s.excerpt}”
            </p>
          ) : null}
        </div>
      </Wrap>
    </li>
  );
}