import type { AiEvidence, AuthorityTier, ClaimScope, ConfidenceLevel, EventType, FacilityStatus, FacilityType, GeoPrecision, ProjectStage, Significance } from "@dci/core";
import type { ReactNode } from "react";
import { AI_EVIDENCE_LABEL, AUTHORITY_TIER_LABEL, CONFIDENCE_LABEL, CONFIDENCE_RANK, CONFIDENCE_SHORT, EVENT_LABEL, PRECISION_LABEL, PRECISION_SHORT, SCOPE_LABEL, SCOPE_SHORT, SIGNIFICANCE_LABEL, STAGE_LABEL, STATUS_LABEL, STATUS_SHORT, STATUS_TONE, TYPE_LABEL, eventTone, isImprecise, isSiteScopeLabel, semanticsLabel, significanceBand, statusVar } from "@/lib/labels";
import { cn } from "./cn";
import { StatusDot } from "./status-dot";

export type BadgeTone = "neutral" | "accent" | "ok" | "warn" | "danger" | "info" | "outline";

const tones: Record<BadgeTone, string> = {
  neutral: "border-hair bg-surface-2 text-ink-2",
  outline: "border-hair-2 bg-transparent text-ink-2",
  accent: "border-accent/30 bg-accent-soft text-accent-ink",
  ok: "border-ok/25 bg-ok/10 text-ok",
  warn: "border-warn/30 bg-warn/10 text-warn",
  danger: "border-danger/30 bg-danger/10 text-danger",
  info: "border-info/25 bg-info/10 text-info",
};

export interface BadgeProps {
  tone?: BadgeTone;
  size?: "xs" | "sm";
  className?: string;
  children: ReactNode;
  title?: string;
  mono?: boolean;
}

export function Badge({ tone = "neutral", size = "sm", className, children, title, mono }: BadgeProps) {
  return (
    <span
      title={title}
      className={cn(
        "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-xs border font-medium leading-none",
        size === "xs" ? "h-[18px] px-1.5 text-[10.5px]" : "h-[22px] px-2 text-[11.5px]",
        mono && "figure",
        tones[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}

/** Facility status badge — dot colored by tone, exact label. */
export function StatusBadge({ status, short, size = "sm", className }: { status: FacilityStatus; short?: boolean; size?: "xs" | "sm"; className?: string }) {
  const tone = STATUS_TONE[status];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 whitespace-nowrap rounded-xs border font-medium leading-none",
        size === "xs" ? "h-[18px] px-1.5 text-[10.5px]" : "h-[22px] px-2 text-[11.5px]",
        "border-hair bg-surface text-ink-2",
        className,
      )}
      style={{ borderColor: `color-mix(in oklab, ${statusVar(tone)} 40%, var(--hair))` }}
      title={STATUS_LABEL[status]}
    >
      <StatusDot status={status} size={7} />
      <span>{short ? STATUS_SHORT[status] : STATUS_LABEL[status]}</span>
    </span>
  );
}

export function TypeBadge({ type, size = "sm", className }: { type: FacilityType; size?: "xs" | "sm"; className?: string }) {
  const emphasis = type === "ai" || type === "hyperscale";
  return (
    <Badge tone={emphasis ? "accent" : "outline"} size={size} className={className} title={`Facility type: ${TYPE_LABEL[type]}`}>
      {TYPE_LABEL[type]}
    </Badge>
  );
}

/** Confidence meter: 4 dots + label. */
export function ConfidenceBadge({ level, short = true, size = "sm", className }: { level: ConfidenceLevel; short?: boolean; size?: "xs" | "sm"; className?: string }) {
  const rank = CONFIDENCE_RANK[level];
  return (
    <Badge tone="outline" size={size} className={className} title={CONFIDENCE_LABEL[level]}>
      <span className="inline-flex items-center gap-[2px]" aria-hidden>
        {[0, 1, 2, 3].map((i) => (
          <span key={i} className={cn("inline-block size-[5px] rounded-full", i < rank ? (level === "estimated" ? "bg-warn" : "bg-ink-2") : "bg-hair-2")} />
        ))}
      </span>
      <span>{short ? CONFIDENCE_SHORT[level] : CONFIDENCE_LABEL[level]}</span>
    </Badge>
  );
}

/** Geo precision: filled square = exact/parcel/street, hollow = city/metro/approx. */
export function PrecisionBadge({ precision, short = true, size = "sm", className }: { precision: GeoPrecision; short?: boolean; size?: "xs" | "sm"; className?: string }) {
  const hollow = isImprecise(precision);
  return (
    <Badge tone="outline" size={size} className={className} title={PRECISION_LABEL[precision]}>
      <span aria-hidden className={cn("inline-block size-[7px] rounded-full", hollow ? "border-[1.5px] border-ink-3" : "bg-ink-2")} />
      <span>{short ? PRECISION_SHORT[precision] : PRECISION_LABEL[precision]}</span>
    </Badge>
  );
}

export function EventBadge({ type, size = "sm", className }: { type: EventType; size?: "xs" | "sm"; className?: string }) {
  const tone = eventTone(type);
  const style = tone === "neutral" || tone === "accent" ? undefined : { borderColor: `color-mix(in oklab, ${statusVar(tone)} 45%, var(--hair))`, color: statusVar(tone) };
  return (
    <Badge tone={tone === "accent" ? "accent" : "outline"} size={size} className={className} title={EVENT_LABEL[type]}>
      <span style={style ? { color: style.color } : undefined}>{EVENT_LABEL[type]}</span>
    </Badge>
  );
}

/** Small "AI" / "Hyperscale" flags for rows. */
export function FlagBadges({ isAi, isHyperscale, size = "xs" }: { isAi?: boolean; isHyperscale?: boolean; size?: "xs" | "sm" }) {
  if (!isAi && !isHyperscale) return null;
  return (
    <span className="inline-flex gap-1">
      {isAi && (
        <Badge tone="accent" size={size} title="AI infrastructure">
          AI
        </Badge>
      )}
      {isHyperscale && (
        <Badge tone="outline" size={size} title="Hyperscale">
          HS
        </Badge>
      )}
    </span>
  );
}

/** Estimated-value marker (≈) with tooltip title. */
export function EstimateMark({ className }: { className?: string }) {
  return (
    <span className={cn("text-ink-3", className)} title="Estimated value" aria-label="estimated">
      ≈
    </span>
  );
}

/* ------------------------------------------------------------------ claim-first visual language (2026-09-12) */

/**
 * Scope of a figure — building / facility / campus (site scopes, filled square) vs metro / country / portfolio /
 * company / unknown (non-site, hollow dashed square). Non-site scopes never populate a record's own MW.
 */
export function ScopeBadge({ scope, size = "xs", short = true, className }: { scope: ClaimScope | string | null | undefined; size?: "xs" | "sm"; short?: boolean; className?: string }) {
  if (!scope) return null;
  const s = (scope in SCOPE_LABEL ? scope : "unknown") as ClaimScope;
  const site = isSiteScopeLabel(s);
  return (
    <Badge tone="outline" size={size} className={className} title={`${SCOPE_LABEL[s]} — ${site ? "site-scoped figure: describes this site" : "not site-scoped: stored as evidence, never summed into this record"}`}>
      <span aria-hidden className={cn("inline-block size-[7px] rounded-[1px]", site ? "bg-ink-2" : "border border-dashed border-ink-3")} />
      <span>{short ? SCOPE_SHORT[s] : SCOPE_LABEL[s]}</span>
    </Badge>
  );
}

/** What a MW figure means (IT capacity / total power / planned / grid connection / utility / ultimate build-out). */
export function SemanticsLabel({ semantics, className, prefix }: { semantics: string | null | undefined; className?: string; prefix?: string }) {
  const label = semanticsLabel(semantics);
  if (!label) return null;
  return (
    <span className={cn("label-caps inline-flex items-center gap-1 normal-case tracking-normal text-[11px] text-ink-3", className)} title="Capacity semantics — what the published figure measures">
      {prefix && <span className="text-ink-4">{prefix}</span>}
      {label}
    </span>
  );
}

/** Event significance band (major / medium / minor) — 3 bars, accent only for major. */
export function SignificanceBadge({ value, band, size = "xs", className, showLabel = true }: { value: number; band?: Significance | null; size?: "xs" | "sm"; className?: string; showLabel?: boolean }) {
  const b = significanceBand(value, band);
  const level = b === "major" ? 3 : b === "medium" ? 2 : 1;
  return (
    <Badge tone={b === "major" ? "accent" : "outline"} size={size} className={className} title={`${SIGNIFICANCE_LABEL[b]} significance (${value}/100)`}>
      <span className="inline-flex items-end gap-[2px]" aria-hidden>
        {[0, 1, 2].map((i) => (
          <span key={i} className={cn("inline-block w-[3px] rounded-[1px]", i === 0 ? "h-[5px]" : i === 1 ? "h-[7px]" : "h-[9px]", i < level ? (b === "major" ? "bg-accent" : "bg-ink-2") : "bg-hair-2")} />
        ))}
      </span>
      {showLabel && <span>{SIGNIFICANCE_LABEL[b]}</span>}
    </Badge>
  );
}

/** AI marker with evidence level (confirmed / likely / associated). Plain "AI" when the level is unknown. */
export function AiMark({ evidence, size = "xs", className }: { evidence?: AiEvidence | null; size?: "xs" | "sm"; className?: string }) {
  const lvl = evidence && evidence !== "unknown" ? evidence : null;
  return (
    <Badge tone="accent" size={size} className={className} title={lvl ? AI_EVIDENCE_LABEL[lvl] : "AI / HPC infrastructure"}>
      <span aria-hidden className="inline-block size-[6px] rotate-45 bg-accent" />
      AI{lvl && lvl !== "confirmed" && <span className="font-normal opacity-80">{lvl}</span>}
    </Badge>
  );
}

/** Project lifecycle stage chip (funnel vocabulary: Announced → Permitting → Approved → Construction → Opened). */
export function StageBadge({ stage, size = "xs", className }: { stage: ProjectStage; size?: "xs" | "sm"; className?: string }) {
  const tone = STATUS_TONE[stage as FacilityStatus] ?? "unknown";
  return (
    <span
      className={cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-xs border bg-surface font-medium leading-none text-ink-2", size === "xs" ? "h-[18px] px-1.5 text-[10.5px]" : "h-[22px] px-2 text-[11.5px]", className)}
      style={{ borderColor: `color-mix(in oklab, ${statusVar(tone)} 40%, var(--hair))` }}
      title={STAGE_LABEL[stage]}
    >
      <StatusDot status={stage as FacilityStatus} size={7} />
      {STAGE_LABEL[stage]}
    </span>
  );
}

/** Authority tier letter (A–E) for THIS field — never a universal source rank. */
export function TierMark({ tier, className }: { tier: AuthorityTier; className?: string }) {
  return (
    <span className={cn("figure inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-xs border border-hair-2 px-1 text-[10.5px] font-medium text-ink-2", className)} title={AUTHORITY_TIER_LABEL[tier]}>
      {tier}
    </span>
  );
}