// Components/Policy/InlineDetails.jsx
import { Card, MetaItem, SummaryRow, KV } from "@/Components/Policy/PolicyUI";
import { trDate, tryMoney } from "@/Components/Policy/utils";

export default function InlineDetails({ policy }) {
  return (
    <div className="rounded-3xl border border-black/10 bg-white shadow-sm">
      <div className="p-4 sm:p-5 border-b border-black/10">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-2 text-xs text-black/55">
          <MetaItem label="Tanzim Tarihi" value={trDate(policy.meta.issueDate)} />
          <MetaItem label="Başlama Tarihi" value={trDate(policy.meta.startDate)} />
          <MetaItem label="Bitiş Tarihi" value={trDate(policy.meta.endDate)} />
          <MetaItem label="Transfer Tarihi" value={trDate(policy.meta.transferDate)} />
          <MetaItem label="Kalan Gün" value={policy.meta.remainingLabel} highlight />
        </div>
      </div>

      <div className="p-4 sm:p-5">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-3">
          <Card className="lg:col-span-4" title="Taksitler">
            <div className="overflow-x-auto">
              <table className="min-w-[520px] w-full text-left">
                <thead className="bg-black/[0.02]">
                  <tr className="text-xs font-semibold text-black/55">
                    <th className="px-4 py-2">Tarih</th>
                    <th className="px-4 py-2">Tutar</th>
                    <th className="px-4 py-2">Durum</th>
                    <th className="px-4 py-2">Not</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-black/10">
                  {policy.installments.map((i, idx) => (
                    <tr key={idx} className="hover:bg-black/[0.015] transition">
                      <td className="px-4 py-3 text-sm text-black/70">{trDate(i.date)}</td>
                      <td className="px-4 py-3 text-sm font-semibold text-black/80">
                        {tryMoney(i.amount)}
                      </td>
                      <td className="px-4 py-3">
                        <span
                          className={[
                            "inline-flex rounded-full border px-3 py-1 text-xs font-semibold",
                            i.paid
                              ? "border-emerald-500/15 bg-emerald-500/10 text-emerald-700"
                              : "border-red-500/15 bg-red-500/10 text-red-600",
                          ].join(" ")}
                        >
                          {i.paid ? "Ödendi" : "Bekliyor"}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-sm text-black/60">{i.note || "—"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
              <SummaryRow label="Brüt Prim" value={tryMoney(policy.grossPremium)} />
              <SummaryRow label="Ödenen" value={tryMoney(policy.paidAmount)} />
              <SummaryRow label="V. Geçen" value={tryMoney(policy.vGecen)} muted />
              <SummaryRow label="Kalan" value={tryMoney(policy.remainingAmount)} muted />
            </div>
          </Card>

          <Card className="lg:col-span-4" title="Poliçe Bilgileri">
            <div className="space-y-2">
              {Object.entries(policy.policyInfo).map(([k, v]) => (
                <div
                  key={k}
                  className="flex items-start justify-between gap-3 border-b border-black/10 pb-2"
                >
                  <div className="text-sm font-semibold text-black/65">{k}</div>
                  <div className="text-sm text-black/70 text-right max-w-[65%]">
                    {String(v ?? "—")}
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="lg:col-span-4" title="Prim / Komisyon / Atama">
            <KV label="Net Prim" value={tryMoney(policy.netPremium)} />
            <KV label="Komisyon" value={tryMoney(policy.commission)} />
            <KV label="Şube" value={policy.branch || "—"} />
            <KV label="Temsilci" value={policy.representative || "—"} />
            <KV label="Poliçe Durumu" value={policy.policyStatus || "—"} />
            <KV label="Yenilendi mi?" value={policy.renewed ? "Evet" : "Hayır"} />
          </Card>
        </div>
      </div>
    </div>
  );
}