import type { Alert } from "@/lib/alerts";
import { formatVND } from "@/lib/finance";
import { ICONS } from "@/lib/icons";

const LEVEL_STYLE: Record<Alert["level"], string> = {
  critical: "bg-rose-50 border-rose-200 text-rose-700",
  warning: "bg-amber-50 border-amber-200 text-amber-700",
  info: "bg-sky-50 border-sky-200 text-sky-700",
};

export function AlertsPanel({ alerts }: { alerts: Alert[] }) {
  return (
    <div className="card p-5">
      <div className="mb-3 flex items-center gap-2 font-bold text-slate-800">
        <ICONS.alert size={18} strokeWidth={1.75} className="text-slate-400" /> Cảnh báo tài chính
      </div>
      {alerts.length === 0 ? (
        <div className="text-sm text-slate-400">Chưa có cảnh báo nào — dòng tiền trong tầm kiểm soát.</div>
      ) : (
        <div className="flex flex-col gap-2">
          {alerts.map((a, i) => (
            <div key={i} className={`rounded-lg border px-3 py-2.5 text-xs ${LEVEL_STYLE[a.level]}`}>
              <div className="mb-1.5 font-semibold">{a.title}</div>
              <dl className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1 opacity-90">
                <dt className="font-medium">Vấn đề:</dt>
                <dd>{a.issue}</dd>
                <dt className="font-medium">Số tiền:</dt>
                <dd>{a.amount === null ? "Chưa đủ dữ liệu" : formatVND(a.amount)}</dd>
                <dt className="font-medium">Ngày:</dt>
                <dd>{a.date ?? "Chưa đủ dữ liệu"}</dd>
                <dt className="font-medium">Nguyên nhân:</dt>
                <dd>{a.cause || "Chưa đủ dữ liệu"}</dd>
                <dt className="font-medium">Hành động đề xuất:</dt>
                <dd>{a.suggestedAction || "Chưa đủ dữ liệu"}</dd>
              </dl>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}