"use client";

import type { ProvenanceDTO } from "@dci/core";
import { ExternalLink, Info } from "lucide-react";
import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { fmtDate, fmtValue } from "@/lib/format";
import { CONFIDENCE_LABEL, SOURCE_KIND_LABEL } from "@/lib/labels";
import { cn } from "./cn";
import { ConfidenceBadge } from "./badge";

type Placement = "top" | "bottom";

function usePosition(open: boolean, anchor: HTMLElement | null, panel: HTMLElement | null, prefer: Placement) {
  const [pos, setPos] = useState<{ top: number; left: number; placement: Placement } | null>(null);
  useLayoutEffect(() => {
    if (!open || !anchor || !panel) return;
    const compute = () => {
      const a = anchor.getBoundingClientRect();
      const p = panel.getBoundingClientRect();
      const vw = window.innerWidth;
      const vh = window.innerHeight;
      let placement = prefer;
      if (prefer === "top" && a.top - p.height - 8 < 8) placement = "bottom";
      if (prefer === "bottom" && a.bottom + p.height + 8 > vh - 8) placement = "top";
      const top = placement === "top" ? a.top - p.height - 6 : a.bottom + 6;
      let left = a.left + a.width / 2 - p.width / 2;
      left = Math.max(8, Math.min(left, vw - p.width - 8));
      setPos({ top: top + window.scrollY, left: left + window.scrollX, placement });
    };
    compute();
    window.addEventListener("resize", compute);
    window.addEventListener("scroll", compute, true);
    return () => {
      window.removeEventListener("resize", compute);
      window.removeEventListener("scroll", compute, true);
    };
  }, [open, anchor, panel, prefer]);
  return pos;
}

/** Hover/focus tooltip (short text). Touch: tap toggles. */
export function Tooltip({ content, children, placement = "top", className }: { content: ReactNode; children: ReactNode; placement?: Placement; className?: string }) {
  const [open, setOpen] = useState(false);
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
  const [panel, setPanel] = useState<HTMLElement | null>(null);
  const id = useId();
  const pos = usePosition(open, anchor, panel, placement);
  return (
    <>
      <span
        ref={setAnchor}
        aria-describedby={open ? id : undefined}
        tabIndex={0}
        className={cn("inline-flex cursor-help", className)}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
        onClick={() => setOpen((o) => !o)}
      >
        {children}
      </span>
      {open &&
        typeof document !== "undefined" &&
        createPortal(
          <div
            ref={setPanel}
            role="tooltip"
            id={id}
            style={pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 }}
            className="pointer-events-none absolute z-[90] max-w-[260px] rounded-sm border border-hair-2 bg-ink px-2 py-1.5 text-[11.5px] leading-snug text-paper shadow-none animate-fade-in dark:bg-surface-3 dark:text-ink"
          >
            {content}
          </div>,
          document.body,
        )}
    </>
  );
}

/** Click popover with focus management and outside-click dismissal. */
export function Popover({ trigger, children, placement = "bottom", className, label }: { trigger: ReactNode; children: ReactNode; placement?: Placement; className?: string; label?: string }) {
  const [open, setOpen] = useState(false);
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
  const [panel, setPanel] = useState<HTMLElement | null>(null);
  const pos = usePosition(open, anchor, panel, placement);
  const id = useId();
  const btnRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent | TouchEvent) => {
      const t = e.target as Node;
      if (panel?.contains(t) || anchor?.contains(t)) return;
      setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false);
        btnRef.current?.focus();
      }
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("touchstart", onDoc, { passive: true });
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("touchstart", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open, panel, anchor]);

  return (
    <>
      <button
        type="button"
        ref={(el) => {
          btnRef.current = el;
          setAnchor(el);
        }}
        aria-expanded={open}
        aria-controls={open ? id : undefined}
        aria-label={label}
        onClick={() => setOpen((o) => !o)}
        className={cn("inline-flex items-center rounded-xs", className)}
      >
        {trigger}
      </button>
      {open &&
        typeof document !== "undefined" &&
        createPortal(
          <div
            ref={setPanel}
            id={id}
            role="dialog"
            style={pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 }}
            className="absolute z-[90] w-[min(320px,calc(100vw-16px))] rounded-sm border border-hair-2 bg-surface p-3 text-[12.5px] text-ink animate-fade-in"
          >
            {children}
          </div>,
          document.body,
        )}
    </>
  );
}

/** Provenance popover: source, URL, first/last observed, confidence, method, estimate flag. */
export function ProvenancePopover({ items, className, size = 13 }: { items: ProvenanceDTO[]; className?: string; size?: number }) {
  if (!items.length) return null;
  return (
    <Popover
      label={`Provenance (${items.length} ${items.length === 1 ? "source" : "sources"})`}
      className={cn("text-ink-4 hover:text-ink-2 max-sm:-m-3.5 max-sm:size-10 max-sm:justify-center", className)}
      trigger={<Info style={{ width: size, height: size }} strokeWidth={1.75} />}
    >
      <div className="label-caps mb-2">Provenance</div>
      <ul className="divide-y divide-hair">
        {items.map((p, i) => (
          <li key={i} className="py-2 first:pt-0 last:pb-0">
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                <div className="truncate font-medium">{p.sourceName}</div>
                <div className="text-[11px] text-ink-3">
                  {SOURCE_KIND_LABEL[p.sourceKind]}
                  {p.method && <> · {p.method}</>}
                  {p.isEstimate && <> · estimate</>}
                </div>
              </div>
              <ConfidenceBadge level={p.confidence} size="xs" />
            </div>
            <div className="mt-1 figure text-[11.5px] text-ink-2">{fmtValue(p.value)}</div>
            <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11px] text-ink-3">
              <span title="First observed">first {fmtDate(p.firstObserved)}</span>
              <span title="Last observed">last {fmtDate(p.lastObserved)}</span>
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-2 hover:text-accent">
                source <ExternalLink className="size-3" />
              </a>
            </div>
          </li>
        ))}
      </ul>
      <p className="mt-2 text-[10.5px] text-ink-4">{CONFIDENCE_LABEL[items[0]!.confidence]} — see methodology for how confidence is computed.</p>
    </Popover>
  );
}