"use client";

import { useLang } from "@/context/LanguageContext";
import { Card, EmptyState, PageHeader, LoadingArea } from "@/components/ui";
import { useApi } from "@/lib/client";
import { formatBDT, formatDate } from "@/lib/utils";
import { IconDollar } from "@/components/icons";

interface PaymentRow {
  id: number;
  month: string;
  amount: number;
  method: string;
  details: Record<string, string> | null;
  note: string | null;
  paidAt: string;
}

/** compact "TrxID / bank / ref" summary for a payment details JSON */
function detailsSummary(details: Record<string, string> | null | undefined): string {
  if (!details) return "";
  return [
    details.txnId && `TrxID: ${details.txnId}`,
    details.bankName,
    details.branch,
    details.refNo && `Ref: ${details.refNo}`,
    details.cardType,
    details.last4 && `•••• ${details.last4}`,
    details.account,
  ]
    .filter(Boolean)
    .join(" · ");
}

/** Teacher/staff payslips: own salary payment history. */
export default function MePayrollPage() {
  const { t, locale } = useLang();
  const { data, loading } = useApi<{ payments: PaymentRow[] }>("/api/me/payroll");

  if (loading) {
    return (
      <div>
        <PageHeader title={t.me.payrollTitle} subtitle={t.me.payrollSubtitle} />
        <LoadingArea label={t.common.loading} />
      </div>
    );
  }

  const payments = data?.payments ?? [];

  return (
    <div>
      <PageHeader title={t.me.payrollTitle} subtitle={t.me.payrollSubtitle} />

      {payments.length === 0 ? (
        <div className="card">
          <EmptyState icon={<IconDollar />} title={t.me.noPaymentsYet} />
        </div>
      ) : (
        <Card title={t.me.payslips} icon={<IconDollar className="svg-20" />}>
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead className="ems-table-head">
                <tr>
                  <th>{t.common.month}</th>
                  <th>{t.common.date}</th>
                  <th className="text-center">{t.common.method}</th>
                  <th>{t.common.note}</th>
                  <th className="text-end">{t.common.amount}</th>
                </tr>
              </thead>
              <tbody>
                {payments.map((p) => (
                  <tr key={p.id}>
                    <td className="f-w-600">
                      <span className="ems-invoice-badge">{p.month}</span>
                    </td>
                    <td className="ems-fs-12 text-muted">{formatDate(p.paidAt, locale)}</td>
                    <td className="text-center ems-fs-13">
                      {t.methods[p.method as keyof typeof t.methods] ?? p.method}
                      {detailsSummary(p.details) && (
                        <p className="mb-0 ems-fs-11 text-muted">{detailsSummary(p.details)}</p>
                      )}
                    </td>
                    <td className="ems-fs-12 text-muted">{p.note ?? "—"}</td>
                    <td className="text-end f-w-800 text-success">{formatBDT(p.amount, locale)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}
    </div>
  );
}