"use client";

import { useMemo, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  EmptyState,
  Modal,
  PageHeader,
  PageLoader,
  Pagination,
  StatusBadge,
  Textarea,
  usePagination,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatBDT, formatDate, formatNumber } from "@/lib/utils";
import { tierRangeLabel, yearlyEffectiveMonthly } from "@/lib/pricing";
import { IconCheck, IconClipboard, IconUsers } from "@/components/icons";

interface Tier {
  id: number;
  minStudents: number;
  maxStudents: number | null;
  monthlyPrice: number;
  yearlyDiscount: number;
}

interface SlabCategory {
  code: string;
  name: string;
  nameBn: string;
  sector: "GOVT" | "PRIVATE" | "ANY";
  tone: "govt" | "teal" | "violet" | "amber";
  group: "GOVERNMENT" | "SCHOOLS" | "HIGHER" | "SPECIAL";
  tiers: Tier[];
}

interface MyRequest {
  id: number;
  status: string;
  createdAt: string;
  note: string | null;
  billingCycle?: string | null;
  studentCount?: number | null;
  packagePlan: { name: string; nameBn: string; price: string } | null;
  pricingTier: Tier | null;
}

export default function PortalPackagesPage() {
  const { t, locale } = useLang();
  const n = t.portal.packagesPage;
  const { data, loading, reload } = useApi<{
    studentCount: number;
    categories: SlabCategory[];
    activeRange: { range: string; maxStudents: number | null; endDate: string } | null;
  }>("/api/portal/pricing");
  const { data: reqData, reload: reloadRequests } = useApi<{ requests: MyRequest[] }>(
    "/api/portal/requests"
  );
  const { data: referral } = useApi<{
    code: string;
    shareUrl: string;
    discountPct: number;
    commissionPct: number;
    referredCount: number;
    referredInstitutions: { id: number; name: string; status: string; createdAt: string }[];
    discountPending: boolean;
    earnedTotal: number;
    commissions: { id: number; buyerName: string; pct: number; amount: number; studentRange: string | null; createdAt: string }[];
  }>("/api/portal/referral");
  const [copied, setCopied] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [cycle, setCycle] = useState<"MONTHLY" | "YEARLY">("MONTHLY");
  // selected range per category card
  const [selected, setSelected] = useState<Record<string, number>>({});
  // request modal
  const [requestCat, setRequestCat] = useState<SlabCategory | null>(null);
  const [note, setNote] = useState("");
  const [sending, setSending] = useState(false);

  const students = data?.studentCount ?? 0;
  const requestsPager = usePagination(reqData?.requests ?? [], 10);

  const pendingTierIds = useMemo(
    () =>
      new Set(
        (reqData?.requests ?? []).filter((r) => r.status === "PENDING" && r.pricingTier).map((r) => r.pricingTier!.id)
      ),
    [reqData]
  );

  const tierFor = (cat: SlabCategory): Tier =>
    cat.tiers.find((x) => x.id === selected[cat.code]) ?? cat.tiers[0];

  /** range can serve the current student count? (only the upper bound limits —
      institutions may pre-buy a wider range for growth) */
  const covers = (tier: Tier) => tier.maxStudents === null || students <= tier.maxStudents;

  /** auto-pick the smallest range that covers the institution's students */
  const defaultTierFor = (cat: SlabCategory): Tier =>
    cat.tiers.find((x) => covers(x)) ?? cat.tiers[0];

  function openRequest(cat: SlabCategory) {
    // make sure a sensible tier is selected before opening
    if (!selected[cat.code]) {
      const def = defaultTierFor(cat);
      setSelected((m) => ({ ...m, [cat.code]: def.id }));
    }
    setRequestCat(cat);
    setNote("");
  }

  async function sendRequest() {
    if (!requestCat) return;
    const tier = tierFor(requestCat);
    setSending(true);
    setMessage(null);
    try {
      await api("/api/portal/requests", {
        method: "POST",
        body: JSON.stringify({ pricingTierId: tier.id, note, billingCycle: cycle }),
      });
      setMessage({ type: "success", text: n.requestSent });
      setRequestCat(null);
      setNote("");
      reloadRequests();
    } catch (err) {
      setMessage({
        type: "error",
        text:
          err instanceof Error && err.message === "ALREADY_REQUESTED"
            ? n.alreadyRequested
            : err instanceof Error && err.message === "RANGE_MISMATCH"
              ? n.rangeTooSmall.replace("{n}", formatNumber(students, locale))
              : err instanceof Error && err.message === "INSTITUTION_NOT_ACTIVE"
                ? n.notActiveNote
                : t.common.tryAgain,
      });
    } finally {
      setSending(false);
    }
  }

  const groupLabel: Record<string, string> = {
    GOVERNMENT: t.central.packages.groupGovernment,
    SCHOOLS: t.central.packages.groupSchools,
    HIGHER: t.central.packages.groupHigher,
    SPECIAL: t.central.packages.groupSpecial,
  };

  const requestTier = requestCat
    ? catTier(requestCat, selected[requestCat.code])
    : null;
  const requestTotal = requestTier
    ? cycle === "YEARLY"
      ? Math.round(yearlyEffectiveMonthly(requestTier.monthlyPrice, requestTier.yearlyDiscount) * 12 * 100) / 100
      : requestTier.monthlyPrice
    : 0;

  function catTier(cat: SlabCategory, id?: number): Tier {
    return cat.tiers.find((x) => x.id === id) ?? cat.tiers.find((x) => covers(x)) ?? cat.tiers[0];
  }

  return (
    <div>
      <PageHeader title={n.title} subtitle={n.subtitle} />

      {message && (
        <div className="mb-4">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      {/* active range banner */}
      {data?.activeRange && (
        <div className="card mb-4">
          <div className="card-body d-flex flex-wrap align-items-center justify-content-between gap-2 py-3">
            <div className="d-flex align-items-center gap-2">
              <IconUsers className="svg-18 text-success" />
              <span className="f-w-700">
                {n.activeRangeLabel.replace("{range}", data.activeRange.range)}
              </span>
              <span className="ems-fs-12 text-muted">
                {n.validUntil.replace("{date}", formatDate(data.activeRange.endDate, locale))}
              </span>
            </div>
            <span className="badge badge-soft-teal">
              {n.yourStudents}: {formatNumber(students, locale)}
            </span>
          </div>
        </div>
      )}

      {/* Referral program — the institution's own code to promote the platform */}
      {referral && (
        <div
          className="card mb-4 p-3"
          style={{ border: "1px dashed rgba(36,105,92,0.35)", background: "rgba(36,105,92,0.04)" }}
        >
          <div className="d-flex flex-wrap align-items-center gap-3">
            <div>
              <p className="mb-1 ems-fs-12 f-w-700 text-muted text-uppercase">
                {n.referralCardTitle}
              </p>
              <div className="d-flex align-items-center gap-2">
                <span
                  className="f-w-800 ems-fs-16 px-3 py-1 rounded"
                  style={{ background: "#24695c", color: "#fff", letterSpacing: 1 }}
                >
                  {referral.code}
                </span>
                <Button
                  size="sm"
                  variant="secondary"
                  onClick={async () => {
                    try {
                      await navigator.clipboard.writeText(
                        `${referral.shareUrl}`
                      );
                      setCopied(true);
                      setTimeout(() => setCopied(false), 2000);
                    } catch {
                      setMessage({ type: "error", text: t.common.tryAgain });
                    }
                  }}
                  title={n.referralShareHint}
                >
                  <IconClipboard className="svg-14" />
                  <span className="ms-1">
                    {copied ? n.referralLinkCopied : n.referralCopyLink}
                  </span>
                </Button>
              </div>
            </div>
            <div className="vr d-none d-md-block" />
            <div className="ems-fs-12 text-muted" style={{ maxWidth: 520 }}>
              <p className="mb-1">{n.referralShareHint.replace("{pct}", String(referral.discountPct))}</p>
              {referral.discountPending ? (
                <p className="mb-0 f-w-700 text-success">
                  ★{" "}
                  {n.referralPendingNote.replace("{pct}", String(referral.discountPct))}
                </p>
              ) : (
                <p className="mb-0 f-w-600">
                  {n.referralCount.replace("{n}", formatNumber(referral.referredCount, locale))}
                  {referral.referredInstitutions.length > 0 &&
                    ` — ${referral.referredInstitutions.map((r) => r.name).slice(0, 4).join(", ")}${referral.referredInstitutions.length > 4 ? " …" : ""}`}
                </p>
              )}
            </div>
          </div>

          {/* owner earnings — {pct}% of each referred institution's yearly amount */}
          <div className="mt-2 pt-2" style={{ borderTop: "1px dashed rgba(36,105,92,0.25)" }}>
            <p className="mb-1 ems-fs-12 f-w-700 text-muted text-uppercase">
              {n.referralEarnTitle}
            </p>
            <p className="mb-1 ems-fs-12 text-muted">
              {n.referralEarnHint.replace("{pct}", String(referral.commissionPct))}
            </p>
            {referral.commissions.length > 0 ? (
              <div className="row g-2 align-items-center">
                <div className="col-md-4">
                  <div className="p-2 rounded" style={{ background: "#fff", border: "1px solid #e6edef" }}>
                    <p className="mb-0 ems-fs-11 text-muted f-w-700 text-uppercase">
                      {n.referralEarnTotal}
                    </p>
                    <p className="mb-0 f-w-800 ems-text-teal ems-fs-16">
                      {formatBDT(referral.earnedTotal, locale)}
                    </p>
                    <p className="mb-0 ems-fs-11 text-muted">{n.referralEarnPayoutNote}</p>
                  </div>
                </div>
                <div className="col-md-8">
                  {referral.commissions.slice(0, 3).map((c) => (
                    <div
                      key={c.id}
                      className="d-flex align-items-center justify-content-between gap-2 ems-fs-12 px-2 py-1 rounded mb-1"
                      style={{ background: "rgba(36,105,92,0.05)" }}
                    >
                      <span className="f-w-600 text-truncate">
                        {c.buyerName}
                        {c.studentRange ? (
                          <span className="text-muted"> · {c.studentRange}</span>
                        ) : null}
                        <span className="text-muted f-w-500"> · {formatDate(c.createdAt, locale)}</span>
                      </span>
                      <span className="f-w-800 text-success">
                        +{formatBDT(c.amount, locale)}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <p className="mb-0 ems-fs-12 text-muted">{n.referralEarnEmpty}</p>
            )}
          </div>
        </div>
      )}

      {loading ? (
        <PageLoader text={t.common.loading} />
      ) : !data || data.categories.length === 0 ? (
        <div className="card">
          <EmptyState icon={<IconClipboard />} title={t.common.noData} />
        </div>
      ) : (
        <>
          {/* billing cycle toggle */}
          <div className="d-flex justify-content-center mb-4">
            <div className="ems-cycle-toggle">
              <button className={cycle === "MONTHLY" ? "on" : ""} onClick={() => setCycle("MONTHLY")}>
                {n.monthlyOption}
              </button>
              <button className={cycle === "YEARLY" ? "on" : ""} onClick={() => setCycle("YEARLY")}>
                {n.yearlyOption}
              </button>
            </div>
          </div>

          <div className="row g-4">
            {data.categories.map((cat) => {
              const sel = catTier(cat, selected[cat.code]);
              const pending = pendingTierIds.has(sel.id);
              return (
                <div className="col-md-6 col-xl-4" key={cat.code}>
                  <div className={`ems-price-card tone-${cat.tone} h-100`}>
                    <div className="ems-price-top">
                      <span className={`ems-price-sector sector-${cat.sector.toLowerCase()}`}>
                        {cat.sector === "GOVT" ? t.central.packages.govtBadge : groupLabel[cat.group]}
                      </span>
                      <span className="ems-price-dot" />
                    </div>
                    <h5 className="ems-price-name">{locale === "bn" ? cat.nameBn : cat.name}</h5>
                    <div className="ems-price-rate">
                      <span className="amt">
                        {formatBDT(
                          cycle === "YEARLY"
                            ? Math.round(
                                yearlyEffectiveMonthly(sel.monthlyPrice, sel.yearlyDiscount) * 12 * 100
                              ) / 100
                            : sel.monthlyPrice,
                          locale
                        )}
                      </span>
                      <span className="per">/{cycle === "YEARLY" ? t.landing.perYear : t.landing.perMonth}</span>
                    </div>
                    {sel.yearlyDiscount > 0 && (
                      <div className="ems-price-yearly">
                        <span className="save">
                          {t.landing.yearlySave.replace("{pct}", formatNumber(sel.yearlyDiscount, locale))}
                        </span>
                      </div>
                    )}

                    <p className="ems-tier-select-label">{n.selectRange}</p>
                    <div className="ems-tier-options">
                      {cat.tiers.map((tier) => {
                        const range = tierRangeLabel(tier.minStudents, tier.maxStudents);
                        const active = tier.id === sel.id;
                        const ok = covers(tier);
                        return (
                          <label
                            key={tier.id}
                            className={`ems-tier-option${active ? " selected" : ""}${!ok ? " disabled opacity-75" : ""}`}
                            title={ok ? undefined : n.rangeTooSmall.replace("{n}", formatNumber(students, locale))}
                          >
                            <input
                              type="radio"
                              name={`tier-${cat.code}`}
                              checked={active}
                              onChange={() => setSelected((m) => ({ ...m, [cat.code]: tier.id }))}
                            />
                            <span className="chk">
                              <IconCheck className="svg-12" />
                            </span>
                            <span className="rng">
                              {range} {t.common.students}
                            </span>
                            <span className="amt">({formatBDT(tier.monthlyPrice, locale)})</span>
                          </label>
                        );
                      })}
                    </div>

                    {!covers(sel) && (
                      <p className="ems-fs-11 text-danger mb-2">
                        {n.rangeTooSmall.replace("{n}", formatNumber(students, locale))}
                      </p>
                    )}
                    <div className="ems-price-foot mt-auto">
                      <span className="subs">
                        <IconUsers className="svg-14 me-1" />
                        {n.yourStudents}: {formatNumber(students, locale)}
                      </span>
                      <Button
                        className="ems-price-cta"
                        disabled={!covers(sel) || pending}
                        onClick={() => openRequest(cat)}
                      >
                        {pending ? n.pendingReview : n.requestPackage}
                        <IconCheck className="svg-16" />
                      </Button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* pricing footnotes (pricing reference) */}
          <div className="ems-fs-12 text-muted mb-4">
            <p className="mb-1">{t.landing.vatNote}</p>
            <p className="mb-0">{t.landing.addonNote}</p>
          </div>
        </>
      )}

      {/* my requests */}
      <div className="card">
        <div className="card-header">
          <h6 className="mb-0 f-w-700">{n.myRequests}</h6>
        </div>
        <div className="table-responsive">
          <table className="table table-hover align-middle mb-0">
            <thead className="ems-table-head">
              <tr>
                <th>{t.central.requestsPage.requestedPackage}</th>
                <th>{n.cycleLabel}</th>
                <th>{t.common.students}</th>
                <th>{t.common.status}</th>
                <th>{n.requestedOn}</th>
              </tr>
            </thead>
            <tbody>
              {requestsPager.paged.map((req) => (
                <tr key={req.id}>
                  <td className="f-w-700">
                    {req.packagePlan
                      ? locale === "bn"
                        ? req.packagePlan.nameBn
                        : req.packagePlan.name
                      : req.pricingTier
                        ? `${tierRangeLabel(req.pricingTier.minStudents, req.pricingTier.maxStudents)} ${t.common.students}`
                        : "—"}
                  </td>
                  <td className="ems-fs-12 text-muted">
                    {req.billingCycle === "YEARLY"
                      ? n.yearlyOption
                      : req.billingCycle === "MONTHLY"
                        ? n.monthlyOption
                        : "—"}
                  </td>
                  <td className="ems-fs-12">{req.studentCount ?? "—"}</td>
                  <td>
                    <StatusBadge status={req.status} label={t.status[req.status as keyof typeof t.status]} />
                  </td>
                  <td className="ems-fs-12 text-muted">{formatDate(req.createdAt, locale)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pagination {...requestsPager} onPageChange={requestsPager.setPage} onSizeChange={requestsPager.setSize} />
      </div>

      {/* confirm request modal */}
      <Modal
        open={!!requestCat}
        onClose={() => setRequestCat(null)}
        title={n.requestPackage}
      >
        {requestCat && requestTier && (
          <>
            <p className="mb-2 f-w-600">
              {locale === "bn" ? requestCat.nameBn : requestCat.name} —{" "}
              {tierRangeLabel(requestTier.minStudents, requestTier.maxStudents)} {t.common.students}
            </p>
            <div className="border rounded-3 px-3 py-2 mb-3">
              <div className="d-flex justify-content-between ems-fs-13">
                <span className="text-muted">
                  {cycle === "YEARLY" ? n.yearlyOption : n.monthlyOption}
                </span>
                <span className="f-w-800">{formatBDT(requestTotal, locale)}</span>
              </div>
              {cycle === "YEARLY" && requestTier.yearlyDiscount > 0 && (
                <div className="d-flex justify-content-between ems-fs-11 text-success mt-1">
                  <span>{t.landing.yearlySave.replace("{pct}", formatNumber(requestTier.yearlyDiscount, locale))}</span>
                  <span>
                    = {formatBDT(yearlyEffectiveMonthly(requestTier.monthlyPrice, requestTier.yearlyDiscount), locale)}{" "}
                    {t.landing.perMonth}
                  </span>
                </div>
              )}
            </div>
            <Textarea
              label={n.requestNoteLabel}
              value={note}
              placeholder={n.requestNotePlaceholder}
              onChange={(e) => setNote(e.target.value)}
            />
            <div className="d-flex justify-content-end gap-2 mt-2">
              <Button variant="secondary" onClick={() => setRequestCat(null)}>
                {t.common.cancel}
              </Button>
              <Button onClick={sendRequest} loading={sending}>
                {n.requestPackage}
              </Button>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}