import type { ReactNode } from "react";
import { Check } from "lucide-react";

export function Section({
  id,
  eyebrow,
  title,
  intro,
  children,
}: {
  id: string;
  eyebrow: string;
  title: string;
  intro?: string;
  children: ReactNode;
}) {
  return (
    <section id={id} className="mx-auto max-w-7xl px-6 py-20 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
        <div className="inline-flex items-center gap-2 rounded-full border border-border bg-secondary/50 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
          {eyebrow}
        </div>
        <h2 className="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
          {title}
        </h2>
        {intro && (
          <p className="mt-4 text-sm leading-relaxed text-muted-foreground sm:text-base">
            {intro}
          </p>
        )}
      </div>
      <div className="mt-12">{children}</div>
    </section>
  );
}

const TONE: Record<string, string> = {
  emerald: "text-[color:var(--emerald)]",
  teal: "text-[color:var(--teal)]",
  cyan: "text-[color:var(--cyan)]",
  amber: "text-[color:var(--amber)]",
  rust: "text-[color:var(--rust)]",
};
const TONE_BG: Record<string, string> = {
  emerald: "bg-[color:var(--emerald)]/15 text-[color:var(--emerald)]",
  teal: "bg-[color:var(--teal)]/15 text-[color:var(--teal)]",
  cyan: "bg-[color:var(--cyan)]/15 text-[color:var(--cyan)]",
  amber: "bg-[color:var(--amber)]/15 text-[color:var(--amber)]",
  rust: "bg-[color:var(--rust)]/15 text-[color:var(--rust)]",
};

export function KpiCard({
  value,
  label,
  icon: Icon,
  tone = "teal",
}: {
  value: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  tone?: keyof typeof TONE;
}) {
  return (
    <div className="glass-panel hover-lift rounded-xl p-4">
      <span
        className={`grid h-8 w-8 place-items-center rounded-md bg-background/40 ${TONE[tone]}`}
      >
        <Icon className="h-4 w-4" />
      </span>
      <div className="mt-4 text-xl font-semibold tracking-tight">{value}</div>
      <div className="mt-1 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </div>
    </div>
  );
}

export function MiniKpi({
  value,
  label,
  tone = "teal",
}: {
  value: string;
  label: string;
  tone?: keyof typeof TONE;
}) {
  return (
    <div className="rounded-lg border border-border/60 bg-background/30 p-3">
      <div className={`text-lg font-semibold tracking-tight ${TONE[tone]}`}>
        {value}
      </div>
      <div className="mt-1 text-[10px] uppercase tracking-[0.15em] text-muted-foreground">
        {label}
      </div>
    </div>
  );
}

export function LegendDot({
  tone,
  label,
}: {
  tone: keyof typeof TONE;
  label: string;
}) {
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground">
      <span className={`inline-block h-2 w-2 rounded-full ${TONE[tone].replace("text-", "bg-")}`} />
      {label}
    </span>
  );
}

export function StatusBadge({
  children,
  tone = "emerald",
}: {
  children: ReactNode;
  tone?: keyof typeof TONE_BG;
}) {
  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.15em] ${TONE_BG[tone]}`}
    >
      <Check className="h-3 w-3" /> {children}
    </span>
  );
}

export function Chip({ children }: { children: ReactNode }) {
  return (
    <span className="inline-flex items-center rounded-full border border-border/60 bg-secondary/40 px-2.5 py-1 text-[11px] text-muted-foreground">
      {children}
    </span>
  );
}

export function Callout({
  tone = "teal",
  children,
}: {
  tone?: "teal" | "amber" | "rust" | "cyan";
  children: ReactNode;
}) {
  const border = {
    teal: "border-[color:var(--teal)]/40",
    amber: "border-[color:var(--amber)]/40",
    rust: "border-[color:var(--rust)]/40",
    cyan: "border-[color:var(--cyan)]/40",
  }[tone];
  return (
    <div
      className={`rounded-xl border ${border} bg-background/30 p-5 text-sm text-muted-foreground`}
    >
      {children}
    </div>
  );
}
