import React from "react";
import type { ComparisonRowData } from "../scenarios/types";

interface ComparisonTableProps {
  headers?: string[];
  rows?: ComparisonRowData[];
}

export const ComparisonTable: React.FC<ComparisonTableProps> = ({
  headers,
  rows,
}) => {
  if (!rows || rows.length === 0) return null;

  const hasCashColumn = rows.some((r) => r.cashValue !== undefined);

  const defaultHeaders = hasCashColumn
    ? ["Tiêu chí", "Điểm A (Gốc)", "Điểm B (Hiện tại)", "Điểm C (Tiền mặt)", "Ghi chú"]
    : ["Tiêu chí", "Điểm A (Gốc)", "Điểm B (Hiện tại)", "Ghi chú"];

  const actualHeaders = headers && headers.length > 0 ? headers : defaultHeaders;

  return (
    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs">
      <div className="border-b border-slate-100 bg-slate-50/70 px-4 py-2.5">
        <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700">
          Bảng đối sánh các trạng thái cân bằng
        </h4>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left text-xs text-slate-600">
          <thead className="border-b border-slate-200 bg-slate-50 text-[11px] font-bold uppercase text-slate-500">
            <tr>
              {actualHeaders.map((head, idx) => (
                <th key={idx} scope="col" className="px-3.5 py-2.5">
                  {head}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {rows.map((row, idx) => (
              <tr key={idx} className="transition-colors hover:bg-slate-50/50">
                <td className="px-3.5 py-2.5 font-semibold text-slate-800 whitespace-nowrap">
                  {row.criterion}
                </td>
                <td className="px-3.5 py-2.5 font-mono text-slate-700">
                  {row.baseValue}
                </td>
                <td className="px-3.5 py-2.5 font-mono font-bold text-indigo-700">
                  {row.currentValue}
                </td>
                {hasCashColumn && (
                  <td className="px-3.5 py-2.5 font-mono font-bold text-emerald-700">
                    {row.cashValue ?? ""}
                  </td>
                )}
                {row.note !== undefined && (
                  <td className="px-3.5 py-2.5 text-slate-500 leading-normal">
                    {row.note}
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};