// Components/Policy/PolicyTable.jsx
import { Fragment, useMemo } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import InlineDetails from "@/Components/Policy/InlineDetails";
import { trDate, tryMoney } from "@/Components/Policy/utils";

export default function PolicyTable({ policies, expandedId, onToggle }) {
  const rows = useMemo(() => policies || [], [policies]);

  return (
    <div className="overflow-x-auto">
      <table className="min-w-[1050px] w-full text-left">
        <thead className="bg-black/[0.02]">
          <tr className="text-xs font-semibold text-black/55">
            <th className="px-6 py-3">Acente</th>
            <th className="px-6 py-3">Tarih</th>
            <th className="px-6 py-3">Sigortalı</th>
            <th className="px-6 py-3">Poliçe–Zeyil No</th>
            <th className="px-6 py-3">Ürün</th>
            <th className="px-6 py-3">Plaka</th>
            <th className="px-6 py-3">Prim</th>
            <th className="px-6 py-3">Atamalar</th>
            <th className="px-6 py-3">Ödeme</th>
          </tr>
        </thead>

        {/* ✅ only ONE tbody */}
        <tbody className="divide-y divide-black/10">
          {rows.map((p) => {
            const expanded = expandedId === p.id;

            return (
              <Fragment key={p.id}>
                <tr
                  onClick={() => onToggle(p.id)}
                  className={[
                    "cursor-pointer transition",
                    expanded ? "bg-red-50" : "hover:bg-black/[0.015]",
                  ].join(" ")}
                >
                  <td className="px-6 py-4">
                    <div className="relative inline-block group">
                      <span className="text-sm font-semibold text-black/75">
                        {String(p.agency || "")
                          .slice(0, 3)
                          .toUpperCase()}
                      </span>

                      <div className="pointer-events-none absolute left-0 top-full mt-2 z-20 hidden group-hover:block">
                        <div className="rounded-xl border border-black/10 bg-white px-3 py-2 text-xs font-semibold text-black/75 shadow-lg whitespace-nowrap">
                          {p.agency}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4 text-sm text-black/60">
                    {trDate(p.date)}
                  </td>
                  <td className="px-6 py-4 text-sm font-semibold text-black/75">
                    {p.insured}
                  </td>
                  <td className="px-6 py-4 text-sm text-black/70">
                    {p.policyEndorsementNo}
                  </td>
                  <td className="px-6 py-4">
                    <span className="inline-flex rounded-full border border-emerald-500/15 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-700">
                      {p.product}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-black/70">{p.plate}</td>
                  <td className="px-6 py-4 text-sm font-semibold">
                    <span
                      className={
                        p.premium >= 0 ? "text-emerald-600" : "text-red-500"
                      }
                    >
                      {tryMoney(p.premium)}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-black/70">
                    {p.assignments}
                  </td>
                  <td className="px-6 py-4">
                    <span className="inline-flex items-center gap-2 rounded-full border border-black/10 bg-black/5 px-3 py-1 text-xs font-semibold text-black/65">
                      {p.paymentStatus}
                      <FontAwesomeIcon
                        icon={expanded ? faChevronUp : faChevronDown}
                      />
                    </span>
                  </td>
                </tr>

                {expanded && (
                  <tr className="bg-[#fafafa]">
                    <td colSpan={9} className="px-4 sm:px-6 py-4">
                      <InlineDetails policy={p} />
                    </td>
                  </tr>
                )}
              </Fragment>
            );
          })}

          {rows.length === 0 && (
            <tr>
              <td
                colSpan={9}
                className="px-6 py-10 text-center text-sm text-black/50"
              >
                Sonuç bulunamadı.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
