/** Các thành phần giao diện dùng lại khắp hệ thống. */
import type { ReactNode } from "react";
import Link from "next/link";

/**
 * Ô "việc cần làm" ở đầu trang chủ — con số lớn kèm nhãn, bấm là tới đúng chỗ xử lý.
 * `count` = 0 thì hiện dạng mờ (không còn gì cần làm) để người dùng vẫn biết mục đó tồn tại.
 */
export function ActionChip({
  href,
  count,
  label,
  tone = "neutral",
}: {
  href: string;
  count: number;
  label: string;
  tone?: "neutral" | "red" | "gold";
}) {
  const active = count > 0;
  const toneClass = !active
    ? "border-line bg-white text-ink-400"
    : tone === "red"
      ? "border-red-100 bg-red-50 text-red-700"
      : tone === "gold"
        ? "border-gold-100 bg-gold-100 text-gold-500"
        : "border-line bg-white text-ink-700";

  return (
    <Link
      href={href}
      className={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-shadow hover:shadow-sm ${toneClass}`}
    >
      <span className="tnum text-2xl font-bold leading-none">{count}</span>
      <span className="text-sm font-medium leading-tight">{label}</span>
      <span aria-hidden className="ml-auto text-sm opacity-60">
        →
      </span>
    </Link>
  );
}

export function PageHeader({
  title,
  subtitle,
  actions,
}: {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
}) {
  return (
    <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
      <div>
        <h1 className="text-2xl font-bold text-ink-700">{title}</h1>
        {subtitle && <p className="mt-1 text-sm text-ink-400">{subtitle}</p>}
      </div>
      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
    </div>
  );
}

/**
 * Thẻ số liệu. `hint` dùng cho ghi chú phụ (so với kỳ trước, tiến độ…),
 * `tone` đổi màu khi con số cần chú ý.
 */
export function StatCard({
  label,
  value,
  hint,
  tone = "default",
}: {
  label: string;
  value: string;
  hint?: ReactNode;
  tone?: "default" | "good" | "warn" | "bad";
}) {
  /* "Tốt" phải là xanh lá, không phải cam thương hiệu. Khi màu nhấn của hệ thống
     là cam, dùng chính nó cho trạng thái tích cực thì người dùng không phân biệt
     được "đang tốt" với "cần chú ý" — hai thứ nằm sát nhau trên vòng màu. */
  const toneClass = {
    default: "text-ink-700",
    good: "text-emerald-700",
    warn: "text-gold-500",
    bad: "text-red-600",
  }[tone];

  return (
    <div className="card p-4">
      <div className="label-caps">{label}</div>
      <div className={`tnum mt-1.5 text-2xl font-bold ${toneClass}`}>{value}</div>
      {hint && <div className="mt-1 text-xs text-ink-400">{hint}</div>}
    </div>
  );
}

export function Badge({
  children,
  tone = "neutral",
}: {
  children: ReactNode;
  tone?: "neutral" | "brand" | "gold" | "red" | "green";
}) {
  const toneClass = {
    neutral: "bg-ink-100 text-ink-500",
    brand: "bg-brand-50 text-brand-600",
    gold: "bg-gold-100 text-gold-500",
    red: "bg-red-50 text-red-700",
    green: "bg-emerald-50 text-emerald-700",
  }[tone];

  return (
    <span
      className={`inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold ${toneClass}`}
    >
      {children}
    </span>
  );
}

/** Hạng A–E hiển thị nhất quán ở mọi màn hình. */
export function TierBadge({ tier }: { tier: string | null }) {
  if (!tier) return <span className="text-ink-300">—</span>;
  const tone = { A: "brand", B: "green", C: "neutral", D: "gold", E: "red" }[tier] as
    | "brand"
    | "green"
    | "neutral"
    | "gold"
    | "red";
  return <Badge tone={tone}>{tier}</Badge>;
}

/** Bảng luôn cuộn ngang trong khung riêng, không đẩy cả trang lệch. */
export function TableWrap({ children }: { children: ReactNode }) {
  return (
    <div className="card overflow-x-auto">
      <table className="data-table">{children}</table>
    </div>
  );
}

export function EmptyState({
  message,
  hint,
  action,
}: {
  message: string;
  hint?: string;
  action?: { href: string; label: string };
}) {
  return (
    <div className="card flex flex-col items-center justify-center gap-1 px-6 py-12 text-center">
      <p className="text-sm font-medium text-ink-500">{message}</p>
      {hint && <p className="max-w-sm text-xs text-ink-400">{hint}</p>}
      {action && (
        <Link href={action.href} className="btn-primary mt-3">
          {action.label}
        </Link>
      )}
    </div>
  );
}

/**
 * Thanh tiến độ so với chỉ tiêu. Vượt 100% vẫn hiển thị đầy, không tràn khung.
 *
 * `benchmark` là mức đáng lẽ phải đạt tại thời điểm xem — thường là % thời gian đã
 * trôi qua trong kỳ. Có nó thì màu được chấm theo tiến độ thay vì con số tuyệt đối:
 * giữa tháng, đạt 40% kế hoạch khi mới qua 32% thời gian là đang tốt, không phải
 * đang báo động. Truyền vào cũng vẽ thêm vạch mốc trên thanh.
 */
export function ProgressBar({
  percent,
  benchmark,
  tone,
}: {
  percent: number;
  benchmark?: number;
  tone?: "good" | "warn" | "bad";
}) {
  const reference = benchmark ?? 100;
  const ratio = reference > 0 ? percent / reference : 0;
  const resolved = tone ?? (ratio >= 1 ? "good" : ratio >= 0.8 ? "warn" : "bad");
  const color = { good: "bg-emerald-600", warn: "bg-gold-500", bad: "bg-red-500" }[resolved];

  return (
    <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-ink-100">
      <div
        className={`h-full rounded-full ${color}`}
        style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}
      />
      {benchmark != null && benchmark > 0 && benchmark < 100 && (
        <span
          aria-hidden
          className="absolute top-0 h-full w-px bg-ink-400"
          style={{ left: `${Math.min(100, benchmark)}%` }}
        />
      )}
    </div>
  );
}

export function SectionTitle({ children, hint }: { children: ReactNode; hint?: string }) {
  return (
    <div className="mb-3 flex items-baseline justify-between gap-3">
      <h2 className="text-base font-bold text-ink-700">{children}</h2>
      {hint && <span className="text-xs text-ink-400">{hint}</span>}
    </div>
  );
}