import type { EventDTO } from "@dci/core";
import { ArrowRight, ExternalLink } from "lucide-react";
import Link from "next/link";
import { AiMark, ConfidenceBadge, EventBadge, SignificanceBadge } from "@/components/ui/badge";
import { SourceBadge } from "@/components/ui/source-badge";
import { Tooltip } from "@/components/ui/popover";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { RelativeTime } from "@/components/ui/relative-time";
import { EmptyState } from "@/components/ui/states";
import { dayKey, fmtDayHeading, fmtValue } from "@/lib/format";
import { ENTITY_TYPE_LABEL, SIGNIFICANCE_LABEL, SOURCE_KIND_LABEL, significanceBand } from "@/lib/labels";
import { entityHref } from "@/lib/routes";

function valueHint(e: EventDTO): "mw" | "date" | "usd" | undefined {
  switch (e.eventType) {
    case "capacity_changed":
    case "planned_capacity_changed":
      return "mw";
    case "opening_date_changed":
      return "date";
    case "investment_announced":
      return "usd";
    default:
      return undefined;
  }
}

/** "120 MW → 180 MW" */
export function ValueChange({ e, className }: { e: EventDTO; className?: string }) {
  const hint = valueHint(e);
  const hasOld = e.oldValue !== null && e.oldValue !== undefined && e.oldValue !== "";
  const hasNew = e.newValue !== null && e.newValue !== undefined && e.newValue !== "";
  if (!hasOld && !hasNew) return null;
  return (
    <span className={cn("figure inline-flex flex-wrap items-center gap-1.5 text-[12.5px]", className)}>
      {hasOld && <span className="text-ink-3 line-through decoration-ink-4">{fmtValue(e.oldValue, hint)}</span>}
      {hasOld && hasNew && <ArrowRight className="size-3 text-ink-4" aria-label="changed to" />}
      {hasNew && <span className="font-medium text-ink">{fmtValue(e.newValue, hint)}</span>}
    </span>
  );
}

export function SignificanceMark({ value, band, className }: { value: number; band?: EventDTO["significanceBand"]; className?: string }) {
  const b = significanceBand(value, band);
  const level = b === "major" ? 3 : b === "medium" ? 2 : 1;
  return (
    <span className={cn("inline-flex items-end gap-[2px]", className)} title={`${SIGNIFICANCE_LABEL[b]} significance (${value}/100)`} aria-label={`${SIGNIFICANCE_LABEL[b]} significance, ${value} out of 100`}>
      {[0, 1, 2].map((i) => (
        <span key={i} className={cn("inline-block w-[3px] rounded-[1px]", i === 0 ? "h-[6px]" : i === 1 ? "h-[9px]" : "h-[12px]", i < level ? (level === 3 ? "bg-accent" : "bg-ink-2") : "bg-hair-2")} />
      ))}
    </span>
  );
}

export function EventRow({ e, dense, highlight }: { e: EventDTO; dense?: boolean; highlight?: boolean }) {
  const href = e.entity ? entityHref(e.entityType, e.entity.slug, e.entity.name) : null;
  return (
    <li className={cn("relative grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 py-2.5", highlight && "animate-row-in", dense ? "py-2" : "py-3")}>
      <div className="flex flex-col items-center gap-1.5 pt-1">
        <SignificanceMark value={e.significance} band={e.significanceBand} />
      </div>
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <EventBadge type={e.eventType} size="xs" />
          {significanceBand(e.significance, e.significanceBand) === "major" && <SignificanceBadge value={e.significance} band={e.significanceBand} />}
          {e.isAi && <AiMark />}
          {e.countryIso2 && <CountryFlag iso2={e.countryIso2} size={12} />}
          <span className="text-[11px] text-ink-3">{ENTITY_TYPE_LABEL[e.entityType] ?? e.entityType}</span>
          <RelativeTime iso={e.detectedAt} className="figure ml-auto text-[11px] text-ink-3" />
        </div>
        <div className="mt-1 text-[13.5px] leading-snug">
          {href && e.entity ? (
            // stretched link: the whole row is the tap target for the entity (secondary links sit above it via z-index)
            <Link href={href} className="font-medium text-ink hover:text-accent hover:underline after:absolute after:inset-0 after:content-['']">
              {e.entity.name}
            </Link>
          ) : (
            <span className="font-medium text-ink">{e.title}</span>
          )}
          {href && e.entity && e.title && e.title !== e.entity.name && <span className="text-ink-2"> — {e.title}</span>}
        </div>
        <ValueChange e={e} className="mt-1" />
        {!dense && e.summary && <p className="mt-1 line-clamp-2 text-[12.5px] text-ink-2">{e.summary}</p>}
        <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11.5px] text-ink-3">
          {e.operator && (
            <Link href={entityHref("operator", e.operator.slug)} className="relative z-[1] inline-flex min-h-6 items-center hover:text-ink">
              {e.operator.name}
            </Link>
          )}
          <span className="relative z-[1] inline-flex items-center gap-1.5">
            <SourceBadge kind={e.sourceKind} name={e.sourceName} url={e.url} publishedAt={e.effectiveDate} retrievedAt={e.detectedAt} documentId={e.documentId} />
            <a href={e.url} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-6 items-center gap-1 hover:text-accent" title={`${SOURCE_KIND_LABEL[e.sourceKind]} source`}>
              {e.sourceName}
              <ExternalLink className="size-3" />
            </a>
          </span>
          {(e.evidenceCount ?? 0) > 1 && <AlsoReported e={e} />}
          <ConfidenceBadge level={e.confidence} size="xs" className="ml-auto" />
        </div>
      </div>
    </li>
  );
}

/** "also reported by 4 sources" with the other documents on hover (deduplicated cluster). */
function AlsoReported({ e }: { e: EventDTO }) {
  const n = (e.evidenceCount ?? 1) - 1;
  const others = e.otherSources ?? [];
  const label = `also reported by ${n} ${n === 1 ? "source" : "sources"}`;
  if (!others.length) return <span className="figure text-[11px] text-ink-3">{label}</span>;
  return (
    <Tooltip
      content={
        <ul className="flex flex-col gap-0.5">
          {others.slice(0, 6).map((o, i) => (
            <li key={i} className="truncate">
              {o.sourceName} <span className="opacity-70">· {SOURCE_KIND_LABEL[o.sourceKind]}</span>
            </li>
          ))}
          {others.length > 6 && <li className="opacity-70">+{others.length - 6} more</li>}
        </ul>
      }
    >
      <span className="relative z-[1] inline-flex min-h-6 items-center rounded-xs border border-hair px-1.5 text-[11px] text-ink-2">{label}</span>
    </Tooltip>
  );
}

/** Flat list (home module) or grouped by day (live feed). */
export function EventList({ events, groupByDay, dense, highlightIds, emptyTitle = "No changes detected yet", emptyDescription = "New facilities, capacity and status changes will appear here as connectors run." }: { events: EventDTO[]; groupByDay?: boolean; dense?: boolean; highlightIds?: Set<string>; emptyTitle?: string; emptyDescription?: string }) {
  if (!events.length) return <EmptyState title={emptyTitle} description={emptyDescription} compact />;
  if (!groupByDay) {
    return (
      <ul className="divide-y divide-hair">
        {events.map((e) => (
          <EventRow key={e.id} e={e} dense={dense} highlight={highlightIds?.has(e.id)} />
        ))}
      </ul>
    );
  }
  const groups = new Map<string, EventDTO[]>();
  for (const e of events) {
    const k = dayKey(e.detectedAt);
    if (!groups.has(k)) groups.set(k, []);
    groups.get(k)!.push(e);
  }
  return (
    <div className="flex flex-col gap-4">
      {Array.from(groups.entries()).map(([day, list]) => (
        <section key={day} aria-label={fmtDayHeading(day)}>
          <div className="sticky top-12 z-[5] -mx-3 flex items-baseline gap-2 border-y border-hair bg-paper/95 px-3 py-1.5 backdrop-blur sm:top-14 sm:mx-0 sm:px-0">
            <h2 className="text-[12.5px] font-semibold text-ink">{fmtDayHeading(day)}</h2>
            <span className="figure text-[11px] text-ink-3">
              {day} · {list.length} {list.length === 1 ? "change" : "changes"}
            </span>
          </div>
          <ul className="divide-y divide-hair">
            {list.map((e) => (
              <EventRow key={e.id} e={e} dense={dense} highlight={highlightIds?.has(e.id)} />
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}