import { formatVND } from "@/lib/finance";
import { ICONS } from "@/lib/icons";
import { ActualAmountConfirm } from "@/components/ActualAmountConfirm";

export interface ResultsData {
  verifiedCount: number;
  actualAmountTotal: number;
  expectedAmountTotal: number;
  executedCount: number;
  pendingVerificationCount: number;
  pending: { id: string; title: string; expectedAmountLabel: string }[];
}

/** Mục F — Kết quả thực tế: chỉ tính trên actualAmount do người dùng tự xác nhận (ActualAmountConfirm,
 * dùng chung với trang Hành động & Agent), không bao giờ suy đoán từ expectedAmount hay trạng thái Agent. */
export function ResultsPanel({ data, onSaved }: { data: ResultsData; onSaved: () => void }) {
  const vsplan = data.expectedAmountTotal > 0 ? Math.round((data.actualAmountTotal / data.expectedAmountTotal) * 100) : null;
  return (
    <div className="card p-5">
      <div className="mb-1 flex items-center gap-2 font-bold text-slate-800">
        <ICONS.target size={18} strokeWidth={1.75} className="text-slate-400" /> Kết quả thực tế đã xác minh
      </div>
      <p className="mb-3 text-[11px] text-slate-400">Chỉ tính khi bạn tự xác nhận số tiền thật (ngay tại đây hoặc ở Hành động &amp; Agent) — không suy đoán.</p>
      {data.verifiedCount === 0 ? (
        <div className="text-sm text-slate-400">Chưa có kết quả nào được xác nhận.</div>
      ) : (
        <div className="flex flex-col gap-2 text-sm">
          <div className="flex items-center justify-between">
            <span className="text-slate-400">Tiền cải thiện đã xác minh</span>
            <span className="text-base font-bold text-teal-600">{formatVND(data.actualAmountTotal)}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-slate-400">So với kế hoạch (ước tính ban đầu)</span>
            <span className="font-medium text-slate-700">{vsplan === null ? "—" : `${vsplan}%`}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-slate-400">Số việc đã xác minh / đã chạy</span>
            <span className="font-medium text-slate-700">
              {data.verifiedCount} / {data.executedCount}
            </span>
          </div>
        </div>
      )}
      {data.pending.length > 0 && (
        <div className="mt-3 flex flex-col gap-2 border-t border-slate-100 pt-3">
          <span className="text-xs font-medium text-amber-600">{data.pendingVerificationCount} việc đang chờ bạn xác nhận kết quả thật</span>
          {data.pending.map((p) => (
            <div key={p.id} className="flex items-center justify-between rounded-lg bg-slate-50 px-2.5 py-2 text-xs">
              <div>
                <div className="font-medium text-slate-600">{p.title}</div>
                <div className="text-slate-400">Dự kiến: {p.expectedAmountLabel}</div>
              </div>
              <ActualAmountConfirm itemId={p.id} onSaved={onSaved} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}