import { PerformanceSummaryData } from "@/types/performance-summary";
import { formatNumber } from "@/lib/common";

interface PerformanceSummaryTableProps {
  data: PerformanceSummaryData | null;
}

export function PerformanceSummaryTable({
  data,
}: PerformanceSummaryTableProps) {
  const netProfit =
    (data?.gl_value || 0) +
    (data?.income_module.income_total || 0) +
    (data?.income_module.expense_total || 0);

  return (
    <div className="mt-8 rounded-lg border border-white/70 bg-white/95 shadow-xl ring-1 ring-black/5">
      <div className="border-b border-[#428B4D]/20 bg-[#428B4D]/10 px-6 py-4">
        <h3 className="text-lg font-semibold text-[#428B4D]">
          Performance Summary
        </h3>
      </div>
      <div className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="bg-slate-50">
              <th className="px-6 py-3 text-left text-sm font-semibold text-slate-700">
                Item
              </th>
              <th className="px-6 py-3 text-right text-sm font-semibold text-slate-700">
                Interval
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">From Date</td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                {data?.from_date || "All Time"}
              </td>
            </tr>
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">Invested Value</td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                {formatNumber(data?.invest_value || 0)}
              </td>
            </tr>
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">Income / Expenses</td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                EUR {formatNumber(data?.income_module.income_total || 0)} /{" "}
                {formatNumber(Math.abs(data?.income_module.expense_total || 0))}
              </td>
            </tr>
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">
                Unrealized Gain/Loss
              </td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                {formatNumber(data?.gl_value || 0)}
              </td>
            </tr>
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">Charges & Fees</td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                —
              </td>
            </tr>
            <tr className="transition-colors hover:bg-slate-50">
              <td className="px-6 py-3 text-sm text-slate-700">End Value</td>
              <td className="px-6 py-3 text-right text-sm font-medium text-slate-900">
                {formatNumber(data?.end_value || 0)}
              </td>
            </tr>
            <tr className="bg-[#428B4D]/5">
              <td className="px-6 py-3 text-sm font-semibold text-slate-900">
                Net Profit
              </td>
              <td className="px-6 py-3 text-right text-sm font-semibold text-slate-900">
                {formatNumber(netProfit)}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}