type RoiRow = {
  boostId: string;
  packageLabel: string;
  priceRsd: number;
  startsAt: string | null;
  expiresAt: string | null;
  viewsBefore: number;
  viewsDuring: number;
  inquiriesBefore: number;
  inquiriesDuring: number;
  viewsLiftPct: number | null;
  inquiriesLiftPct: number | null;
};

type Props = {
  rows: RoiRow[];
  totals: {
    activeBoosts: number;
    totalSpent: number;
    totalExtraViews: number;
    totalExtraInquiries: number;
  };
};

function fmtRsd(v: number) {
  return `${new Intl.NumberFormat("sr-RS").format(v)} RSD`;
}
function fmtNum(v: number) {
  return new Intl.NumberFormat("sr-RS").format(v);
}
function fmtDate(iso: string | null) {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("sr-RS", { day: "2-digit", month: "2-digit", year: "numeric" });
}

function liftLabel(pct: number | null): { label: string; tone: "up" | "down" | "flat" | "n/a" } {
  if (pct === null) return { label: "N/D", tone: "n/a" };
  if (pct > 0) return { label: `+${pct}%`, tone: "up" };
  if (pct < 0) return { label: `${pct}%`, tone: "down" };
  return { label: "0%", tone: "flat" };
}

export function BoostRoiPanel({ rows, totals }: Props) {
  if (rows.length === 0) {
    return (
      <section className="rounded-2xl border border-[#ece7e1] bg-white shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)] p-6">
        <h2 className="text-lg font-semibold text-[#0c1828]">Tvoji rezultati</h2>
        <p className="mt-2 text-sm text-zinc-500">
          Još uvek nema završenih boost-ova. Kupi prvi paket ispod i mi ćemo ti
          pokazati uporedne metrike (pregledi i upiti) u poslednjih 90 dana.
        </p>
      </section>
    );
  }

  return (
    <section className="space-y-4">
      <div className="grid gap-3 md:grid-cols-4">
        <div className="rounded-2xl border border-[#ece7e1] bg-white shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)] p-4">
          <div className="text-xs uppercase tracking-wide text-zinc-500">Aktivnih boost-ova</div>
          <div className="mt-1 text-2xl font-semibold text-[#0c1828]">{totals.activeBoosts}</div>
        </div>
        <div className="rounded-2xl border border-[#ece7e1] bg-white shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)] p-4">
          <div className="text-xs uppercase tracking-wide text-zinc-500">Ukupno uloženo (90 dana)</div>
          <div className="mt-1 text-2xl font-semibold text-[#0c1828]">{fmtRsd(totals.totalSpent)}</div>
        </div>
        <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4">
          <div className="text-xs uppercase tracking-wide text-emerald-300">Dodatnih pregleda</div>
          <div className="mt-1 text-2xl font-semibold text-[#0c1828]">+{fmtNum(totals.totalExtraViews)}</div>
        </div>
        <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4">
          <div className="text-xs uppercase tracking-wide text-emerald-300">Dodatnih upita</div>
          <div className="mt-1 text-2xl font-semibold text-[#0c1828]">+{fmtNum(totals.totalExtraInquiries)}</div>
        </div>
      </div>

      <div className="rounded-2xl border border-[#ece7e1] bg-white shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)] p-5">
        <h2 className="text-lg font-semibold text-[#0c1828]">ROI po boost-u</h2>
        <p className="mt-1 text-sm text-zinc-500">
          Poredimo broj pregleda i upita tokom boost prozora sa istim brojem dana neposredno pre boost-a.
        </p>

        <div className="mt-4 overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-xs uppercase tracking-wide text-zinc-500">
              <tr>
                <th className="px-2 py-2 text-left">Paket</th>
                <th className="px-2 py-2 text-left">Period</th>
                <th className="px-2 py-2 text-right">Pregledi (pre / tokom)</th>
                <th className="px-2 py-2 text-right">Upiti (pre / tokom)</th>
                <th className="px-2 py-2 text-right">Cena</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#ece7e1]">
              {rows.map((r) => {
                const vLift = liftLabel(r.viewsLiftPct);
                const iLift = liftLabel(r.inquiriesLiftPct);
                return (
                  <tr key={r.boostId}>
                    <td className="px-2 py-3 text-zinc-200">{r.packageLabel}</td>
                    <td className="px-2 py-3 text-zinc-500">
                      {fmtDate(r.startsAt)} → {fmtDate(r.expiresAt)}
                    </td>
                    <td className="px-2 py-3 text-right text-zinc-600">
                      <span className="text-zinc-500">{fmtNum(r.viewsBefore)}</span>
                      <span className="mx-1 text-zinc-600">/</span>
                      <span className="font-semibold text-[#0c1828]">{fmtNum(r.viewsDuring)}</span>
                      <span
                        className={`ml-2 rounded-full px-2 py-0.5 text-xs font-bold ${
                          vLift.tone === "up"
                            ? "bg-emerald-500/15 text-emerald-300"
                            : vLift.tone === "down"
                              ? "bg-rose-500/15 text-rose-300"
                              : "bg-zinc-100 text-zinc-600"
                        }`}
                      >
                        {vLift.label}
                      </span>
                    </td>
                    <td className="px-2 py-3 text-right text-zinc-600">
                      <span className="text-zinc-500">{fmtNum(r.inquiriesBefore)}</span>
                      <span className="mx-1 text-zinc-600">/</span>
                      <span className="font-semibold text-[#0c1828]">{fmtNum(r.inquiriesDuring)}</span>
                      <span
                        className={`ml-2 rounded-full px-2 py-0.5 text-xs font-bold ${
                          iLift.tone === "up"
                            ? "bg-emerald-500/15 text-emerald-300"
                            : iLift.tone === "down"
                              ? "bg-rose-500/15 text-rose-300"
                              : "bg-zinc-100 text-zinc-600"
                        }`}
                      >
                        {iLift.label}
                      </span>
                    </td>
                    <td className="px-2 py-3 text-right text-zinc-500">{fmtRsd(r.priceRsd)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <p className="mt-4 text-xs text-zinc-500">
          &bdquo;N/D&rdquo; znači da nema dovoljno podataka iz perioda pre boost-a (npr. tek si dodao oglas).
        </p>
      </div>
    </section>
  );
}