"use client";

import { useT } from "@/components/providers";
import type { SecretariatRow } from "@/app/dashboard/reports/page";

export function SecretariatsReport({ initialItems }: { initialItems: SecretariatRow[] }) {
  const { t } = useT();
  if (initialItems.length === 0) {
    return (
      <p className="rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-card">
        {t.reports.noData}
      </p>
    );
  }
  const totals = initialItems.reduce(
    (acc, r) => ({
      members: acc.members + r.members,
      member: acc.member + r.status_member,
      associate: acc.associate + r.status_associate,
      verification: acc.verification + r.status_verification,
      suspended: acc.suspended + r.status_suspended,
      unspecified: acc.unspecified + r.status_unspecified,
    }),
    { members: 0, member: 0, associate: 0, verification: 0, suspended: 0, unspecified: 0 },
  );

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        {[
          { label: t.reports.members, value: totals.members, tone: "text-bousla-700" },
          { label: t.reports.member, value: totals.member, tone: "text-emerald-700" },
          { label: t.reports.associate, value: totals.associate, tone: "text-sky-700" },
          { label: t.reports.verification, value: totals.verification, tone: "text-amber-700" },
          { label: t.reports.suspended, value: totals.suspended, tone: "text-red-700" },
          { label: t.reports.unspecified, value: totals.unspecified, tone: "text-slate-500" },
        ].map((c) => (
          <div key={c.label} className="rounded-xl border border-slate-200 bg-white p-4 shadow-card">
            <p className={`numeric text-2xl font-extrabold ${c.tone}`}>{c.value}</p>
            <p className="mt-0.5 text-[11px] font-semibold text-slate-500">{c.label}</p>
          </div>
        ))}
      </div>

      <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-card">
        <table className="w-full min-w-[860px] text-sm">
          <thead>
            <tr className="border-b border-slate-200 bg-slate-50 text-right text-xs font-bold text-slate-500">
              <th className="px-4 py-3">{t.reports.secretariat}</th>
              <th className="px-4 py-3">{t.reports.governorate}</th>
              <th className="px-4 py-3">{t.reports.members}</th>
              <th className="px-4 py-3">{t.reports.openPositions}</th>
              <th className="px-4 py-3">{t.reports.statusBreakdown}</th>
              <th className="px-4 py-3">{t.reports.readiness}</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {initialItems.map((r) => {
              const total = Math.max(r.members, 1);
              const seg = (n: number, color: string) =>
                n > 0 ? `<div class="h-full ${color}" style="width:${Math.round((n / total) * 100)}%"></div>` : "";
              return (
                <tr key={r.id} className="hover:bg-slate-50/60">
                  <td className="px-4 py-3 font-bold text-slate-800" dir="auto">{r.name_ar}</td>
                  <td className="px-4 py-3 text-slate-600">{r.governorate_name ?? "—"}</td>
                  <td className="numeric px-4 py-3 font-bold text-bousla-700">{r.members}</td>
                  <td className="numeric px-4 py-3 text-slate-600">{r.open_positions}</td>
                  <td className="px-4 py-3">
                    <div className="flex h-2.5 w-40 overflow-hidden rounded-full bg-slate-100"
                      dangerouslySetInnerHTML={{ __html:
                        seg(r.status_member, "bg-emerald-500") + seg(r.status_associate, "bg-sky-500") +
                        seg(r.status_verification, "bg-amber-500") + seg(r.status_suspended, "bg-red-500") +
                        seg(r.status_unspecified, "bg-slate-400") }} />
                    <p className="numeric mt-1 text-[11px] text-slate-400">
                      {r.status_member} · {r.status_associate} · {r.status_verification} · {r.status_suspended} · {r.status_unspecified}
                    </p>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`rounded-full px-2.5 py-0.5 text-[11px] font-bold ${r.readiness_note === "reached" ? "bg-emerald-50 text-emerald-700" : "bg-slate-100 text-slate-500"}`}>
                      {r.readiness_note === "reached" ? t.reports.reached : t.reports.below}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}