"use client";

import { useMemo, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  Card,
  EmptyState,
  Input,
  Modal,
  MonthPicker,
  PageHeader,
  PageLoader,
  Pagination,
  Select,
  StatCard,
  StatusBadge,
  usePagination,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatBDT, formatDate } from "@/lib/utils";
import { PAYMENT_METHODS, VEHICLE_TYPES } from "@/lib/constants";
import { emsConfirm } from "@/components/ConfirmDialog";
import {
  IconCheck,
  IconDollar,
  IconEdit,
  IconMap,
  IconPlus,
  IconTrash,
  IconTruck,
  IconUsers,
} from "@/components/icons";

interface VehicleRow {
  id: number;
  name: string;
  registrationNo: string | null;
  type: string;
  capacity: number;
  driverName: string | null;
  driverPhone: string | null;
  status: string;
  routeCount: number;
}

interface StopRow {
  id: number;
  name: string;
  nameBn: string | null;
  extraFare: number;
  sortOrder: number;
}

interface RouteRow {
  id: number;
  name: string;
  nameBn: string | null;
  baseFare: number;
  isActive: boolean;
  vehicleName: string | null;
  memberCount: number;
  stops: StopRow[];
}

interface MemberRow {
  id: number;
  studentId: number;
  roll: string;
  studentName: string;
  className: string | null;
  routeId: number;
  routeName: string;
  stopName: string | null;
  monthlyFare: number;
  status: string;
}

interface TransportData {
  stats: {
    vehicles: number;
    activeVehicles: number;
    routes: number;
    members: number;
    monthlyExpected: number;
    monthCollected: number;
    monthDue: number;
    month: string;
  };
  vehicles: VehicleRow[];
  routes: RouteRow[];
  members: MemberRow[];
}

interface StudentMini {
  id: number;
  roll: string;
  name: string;
  guardianName: string;
}

interface FareData {
  month: string;
  rows: {
    memberId: number;
    roll: string;
    studentName: string;
    routeName: string;
    stopName: string | null;
    fare: number;
    paid: boolean;
    method: string | null;
    trxId: string | null;
    paidAt: string | null;
  }[];
  summary: { expected: number; paid: number; due: number };
}

type Tab = "vehicles" | "routes" | "members" | "collections";
type StopForm = { name: string; nameBn: string; extraFare: string };

const emptyVehicle = {
  name: "",
  registrationNo: "",
  type: "BUS",
  capacity: "0",
  driverName: "",
  driverPhone: "",
};

const emptyRoute = {
  name: "",
  nameBn: "",
  vehicleId: "",
  baseFare: "0",
};

export default function PortalTransportPage() {
  const { t, locale } = useLang();
  const [tab, setTab] = useState<Tab>("vehicles");
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const { data, loading, reload } = useApi<TransportData>("/api/portal/transport");
  const { data: studentsData } = useApi<{ students: StudentMini[] }>("/api/portal/students");

  // Vehicle form
  const [vehOpen, setVehOpen] = useState(false);
  const [editingVeh, setEditingVeh] = useState<VehicleRow | null>(null);
  const [vehForm, setVehForm] = useState(emptyVehicle);
  const [vehSaving, setVehSaving] = useState(false);

  // Route form
  const [routeOpen, setRouteOpen] = useState(false);
  const [editingRoute, setEditingRoute] = useState<RouteRow | null>(null);
  const [routeForm, setRouteForm] = useState(emptyRoute);
  const [stopsForm, setStopsForm] = useState<StopForm[]>([{ name: "", nameBn: "", extraFare: "0" }]);
  const [routeSaving, setRouteSaving] = useState(false);

  // Member form
  const [memOpen, setMemOpen] = useState(false);
  const [memForm, setMemForm] = useState({ studentId: "", routeId: "", stopId: "", monthlyFare: "" });
  const [memSaving, setMemSaving] = useState(false);

  // Collections
  const currentMonth = new Date().toISOString().slice(0, 7);
  const [month, setMonth] = useState(currentMonth);
  const { data: fares, loading: faresLoading, reload: faresReload } = useApi<FareData>(
    `/api/portal/transport/payments?month=${month}`
  );
  const [payMember, setPayMember] = useState<FareData["rows"][number] | null>(null);
  const [payMethod, setPayMethod] = useState("CASH");
  const [payTrxId, setPayTrxId] = useState("");
  const [payNote, setPayNote] = useState("");
  const [paySaving, setPaySaving] = useState(false);

  const unassignedStudents = useMemo(() => {
    if (!studentsData || !data) return [];
    const assigned = new Set(data.members.filter((m) => m.status === "ACTIVE").map((m) => m.studentId));
    return studentsData.students.filter((s) => !assigned.has(s.id));
  }, [studentsData, data]);

  const selectedRouteStops = useMemo(() => {
    if (!data || !memForm.routeId) return [];
    return data.routes.find((r) => r.id === Number(memForm.routeId))?.stops ?? [];
  }, [data, memForm.routeId]);

  // ---------- table filters (search + selects per tab) ----------
  const [vehQ, setVehQ] = useState("");
  const [vehType, setVehType] = useState("");
  const [vehStatus, setVehStatus] = useState("");
  const [routeQ, setRouteQ] = useState("");
  const [memQ, setMemQ] = useState("");
  const [memRoute, setMemRoute] = useState("");
  const [memStatus, setMemStatus] = useState("");
  const [fareQ, setFareQ] = useState("");
  const [fareRoute, setFareRoute] = useState("");
  const [farePaid, setFarePaid] = useState("");

  const vehicles = useMemo(() => {
    const q = vehQ.trim().toLowerCase();
    return (data?.vehicles ?? []).filter(
      (v) =>
        (!q || v.name.toLowerCase().includes(q) || (v.driverName ?? "").toLowerCase().includes(q) || (v.registrationNo ?? "").toLowerCase().includes(q)) &&
        (!vehType || v.type === vehType) &&
        (!vehStatus || v.status === vehStatus),
    );
  }, [data, vehQ, vehType, vehStatus]);

  const routes = useMemo(() => {
    const q = routeQ.trim().toLowerCase();
    return (data?.routes ?? []).filter(
      (r) => !q || r.name.toLowerCase().includes(q) || (r.nameBn ?? "").toLowerCase().includes(q),
    );
  }, [data, routeQ]);

  const members = useMemo(() => {
    const q = memQ.trim().toLowerCase();
    return (data?.members ?? []).filter(
      (m) =>
        (!q || m.studentName.toLowerCase().includes(q) || m.roll.toLowerCase().includes(q)) &&
        (!memRoute || m.routeId === Number(memRoute)) &&
        (!memStatus || m.status === memStatus),
    );
  }, [data, memQ, memRoute, memStatus]);

  const fareRows = useMemo(() => {
    const q = fareQ.trim().toLowerCase();
    return (fares?.rows ?? []).filter(
      (r) =>
        (!q || r.studentName.toLowerCase().includes(q) || r.roll.toLowerCase().includes(q)) &&
        (!fareRoute || r.routeName === fareRoute) &&
        (!farePaid || (farePaid === "PAID" ? r.paid : !r.paid)),
    );
  }, [fares, fareQ, fareRoute, farePaid]);

  const vehiclesPager = usePagination(vehicles, 10);
  const routesPager = usePagination(routes, 10);
  const membersPager = usePagination(members, 10);
  const faresPager = usePagination(fareRows, 10);

  function notify(type: "success" | "error", text: string) {
    setMessage({ type, text });
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  // ---------- Vehicles ----------
  function openVehicleCreate() {
    setEditingVeh(null);
    setVehForm(emptyVehicle);
    setVehOpen(true);
  }

  function openVehicleEdit(v: VehicleRow) {
    setEditingVeh(v);
    setVehForm({
      name: v.name,
      registrationNo: v.registrationNo ?? "",
      type: VEHICLE_TYPES.includes(v.type as never) ? v.type : "OTHER",
      capacity: String(v.capacity),
      driverName: v.driverName ?? "",
      driverPhone: v.driverPhone ?? "",
    });
    setVehOpen(true);
  }

  async function saveVehicle() {
    setVehSaving(true);
    try {
      if (editingVeh) {
        await api(`/api/portal/transport/${editingVeh.id}`, {
          method: "PUT",
          body: JSON.stringify({ ...vehForm, status: editingVeh.status }),
        });
        notify("success", t.portal.transportPage.vehicleUpdated);
      } else {
        await api("/api/portal/transport", { method: "POST", body: JSON.stringify(vehForm) });
        notify("success", t.portal.transportPage.vehicleCreated);
      }
      setVehOpen(false);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setVehSaving(false);
    }
  }

  async function removeVehicle(v: VehicleRow) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/transport/${v.id}`, { method: "DELETE" });
      notify("success", t.common.deletedSuccessfully);
      reload();
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      notify("error", err === "IN_USE" ? t.portal.transportPage.vehicleInUse : t.common.tryAgain);
    }
  }

  // ---------- Routes ----------
  function openRouteCreate() {
    setEditingRoute(null);
    setRouteForm(emptyRoute);
    setStopsForm([{ name: "", nameBn: "", extraFare: "0" }]);
    setRouteOpen(true);
  }

  function openRouteEdit(r: RouteRow) {
    setEditingRoute(r);
    setRouteForm({
      name: r.name,
      nameBn: r.nameBn ?? "",
      vehicleId: "",
      baseFare: String(r.baseFare),
    });
    setStopsForm(
      r.stops.length > 0
        ? r.stops.map((s) => ({ name: s.name, nameBn: s.nameBn ?? "", extraFare: String(s.extraFare) }))
        : [{ name: "", nameBn: "", extraFare: "0" }]
    );
    setRouteOpen(true);
  }

  async function saveRoute() {
    setRouteSaving(true);
    try {
      const stops = stopsForm
        .filter((s) => s.name.trim())
        .map((s) => ({ name: s.name, nameBn: s.nameBn, extraFare: Number(s.extraFare) || 0 }));
      if (editingRoute) {
        await api(`/api/portal/transport/routes/${editingRoute.id}`, {
          method: "PUT",
          body: JSON.stringify({ ...routeForm, vehicleId: routeForm.vehicleId || null, stops }),
        });
        notify("success", t.portal.transportPage.routeUpdated);
      } else {
        await api("/api/portal/transport/routes", {
          method: "POST",
          body: JSON.stringify({ ...routeForm, vehicleId: routeForm.vehicleId || null, stops }),
        });
        notify("success", t.portal.transportPage.routeCreated);
      }
      setRouteOpen(false);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setRouteSaving(false);
    }
  }

  async function removeRoute(r: RouteRow) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/transport/routes/${r.id}`, { method: "DELETE" });
      notify("success", t.common.deletedSuccessfully);
      reload();
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      notify("error", err === "IN_USE" ? t.portal.transportPage.routeInUse : t.common.tryAgain);
    }
  }

  // ---------- Members ----------
  async function saveMember() {
    setMemSaving(true);
    try {
      await api("/api/portal/transport/members", {
        method: "POST",
        body: JSON.stringify({
          studentId: memForm.studentId,
          routeId: memForm.routeId,
          stopId: memForm.stopId || null,
          monthlyFare: memForm.monthlyFare ? Number(memForm.monthlyFare) : undefined,
        }),
      });
      setMemOpen(false);
      setMemForm({ studentId: "", routeId: "", stopId: "", monthlyFare: "" });
      reload();
      notify("success", t.portal.transportPage.memberAssigned);
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      notify("error", err === "ALREADY_MEMBER" ? t.portal.transportPage.alreadyMember : t.common.tryAgain);
    } finally {
      setMemSaving(false);
    }
  }

  async function removeMember(m: MemberRow) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/transport/members/${m.id}`, { method: "DELETE" });
      notify("success", t.common.deletedSuccessfully);
      reload();
      faresReload();
    } catch {
      notify("error", t.common.tryAgain);
    }
  }

  // ---------- Collections ----------
  async function collectFare() {
    if (!payMember) return;
    // digital payments are only trackable with a transaction reference —
    // block the collection until it is provided
    if (payMethod !== "CASH" && !payTrxId.trim()) {
      notify("error", t.portal.transportPage.trxRequired);
      return;
    }
    if (!(await emsConfirm({ message: t.portal.transportPage.collectConfirm, danger: false }))) return;
    setPaySaving(true);
    try {
      await api("/api/portal/transport/payments", {
        method: "POST",
        body: JSON.stringify({
          memberId: payMember.memberId,
          month: fares?.month ?? currentMonth,
          amount: payMember.fare,
          method: payMethod,
          trxId: payMethod === "CASH" ? "" : payTrxId.trim(),
          note: payNote.trim(),
        }),
      });
      setPayMember(null);
      setPayTrxId("");
      setPayNote("");
      faresReload();
      reload();
      notify("success", t.portal.transportPage.fareCollected);
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      notify(
        "error",
        err === "ALREADY_PAID"
          ? t.portal.transportPage.alreadyPaidFare
          : err === "TRX_REQUIRED"
            ? t.portal.transportPage.trxRequired
            : t.common.tryAgain,
      );
    } finally {
      setPaySaving(false);
    }
  }

  if (loading) return <PageLoader text={t.common.loading} />;
  const s = data?.stats;

  return (
    <div>
      <PageHeader title={t.portal.transportPage.title} subtitle={t.portal.transportPage.subtitle} />

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

      {/* Stats */}
      <div className="row g-3 mb-4">
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.totalVehicles} value={String(s?.vehicles ?? 0)} icon={<IconTruck />} accent="teal" />
        </div>
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.activeRoutes} value={String(s?.routes ?? 0)} icon={<IconMap />} accent="blue" />
        </div>
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.membersLabel} value={String(s?.members ?? 0)} icon={<IconUsers />} accent="purple" />
        </div>
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.monthlyExpected} value={formatBDT(s?.monthlyExpected ?? 0, locale)} icon={<IconDollar />} accent="orange" />
        </div>
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.monthCollected} value={formatBDT(s?.monthCollected ?? 0, locale)} icon={<IconCheck />} accent="sky" />
        </div>
        <div className="col-xl-2 col-sm-4 col-6">
          <StatCard label={t.portal.transportPage.monthDueLabel} value={formatBDT(s?.monthDue ?? 0, locale)} icon={<IconDollar />} accent="red" />
        </div>
      </div>

      {/* Tabs */}
      <ul className="nav nav-tabs mb-4" role="tablist">
        {(["vehicles", "routes", "members", "collections"] as Tab[]).map((key) => {
          const labels: Record<Tab, string> = {
            vehicles: t.portal.transportPage.tabVehicles,
            routes: t.portal.transportPage.tabRoutes,
            members: t.portal.transportPage.tabMembers,
            collections: t.portal.transportPage.tabCollections,
          };
          return (
            <li className="nav-item" key={key}>
              <button
                className={`nav-link ${tab === key ? "active" : ""}`}
                onClick={() => setTab(key)}
                type="button"
              >
                {labels[key]}
              </button>
            </li>
          );
        })}
      </ul>

      {/* ---------- Vehicles tab ---------- */}
      {tab === "vehicles" && (
        !data || data.vehicles.length === 0 ? (
          <div className="card">
            <EmptyState
              icon={<IconTruck />}
              title={t.portal.transportPage.noVehicles}
              action={
                <Button onClick={openVehicleCreate}>
                  <IconPlus className="svg-16" />
                  <span className="ms-1">{t.portal.transportPage.newVehicle}</span>
                </Button>
              }
            />
          </div>
        ) : (
          <div className="card">
            <div className="card-header d-flex flex-wrap align-items-center gap-2">
              <h5 className="f-w-600 mb-0 me-auto">{t.portal.transportPage.tabVehicles}</h5>
              <div className="has-search" style={{ maxWidth: 220 }}>
                <span className="fa fa-search form-control-feedback" />
                <input className="form-control" placeholder={t.common.search} value={vehQ} onChange={(e) => setVehQ(e.target.value)} />
              </div>
              <div style={{ maxWidth: 150 }}>
                <Select wrapperClassName="form-group mb-0" value={vehType} onChange={(e) => setVehType(e.target.value)}>
                  <option value="">{t.portal.transportPage.allVehicleTypes}</option>
                  {[...new Set((data?.vehicles ?? []).map((v) => v.type))].map((ty) => (
                    <option key={ty} value={ty}>{t.vehicleTypes[ty as keyof typeof t.vehicleTypes] ?? ty}</option>
                  ))}
                </Select>
              </div>
              <div style={{ maxWidth: 140 }}>
                <Select wrapperClassName="form-group mb-0" value={vehStatus} onChange={(e) => setVehStatus(e.target.value)}>
                  <option value="">{t.portal.transportPage.allStatuses}</option>
                  <option value="ACTIVE">{t.common.active}</option>
                  <option value="INACTIVE">{t.common.inactive}</option>
                </Select>
              </div>
              <Button onClick={openVehicleCreate}>
                <IconPlus className="svg-16" />
                <span className="ms-1">{t.portal.transportPage.newVehicle}</span>
              </Button>
            </div>
            <div className="table-responsive">
              <table className="table table-hover align-middle mb-0">
                <thead className="ems-table-head">
                  <tr>
                    <th>{t.portal.transportPage.vehicleName}</th>
                    <th>{t.portal.transportPage.vehicleType}</th>
                    <th>{t.portal.transportPage.capacity}</th>
                    <th>{t.portal.transportPage.driverName}</th>
                    <th>{t.common.status}</th>
                    <th className="text-end">{t.common.actions}</th>
                  </tr>
                </thead>
                <tbody>
                  {vehiclesPager.paged.map((v) => (
                    <tr key={v.id} className={v.status === "INACTIVE" ? "opacity-50" : ""}>
                      <td>
                        <p className="mb-0 f-w-700">{v.name}</p>
                        {v.registrationNo && <p className="mb-0 ems-fs-11 text-muted">{v.registrationNo}</p>}
                      </td>
                      <td>
                        <span className="ems-type-pill">
                          {t.vehicleTypes[v.type as keyof typeof t.vehicleTypes] ?? v.type}
                        </span>
                      </td>
                      <td className="f-w-600">{v.capacity}</td>
                      <td>
                        <p className="mb-0 ems-fs-13 f-w-600">{v.driverName ?? "—"}</p>
                        {v.driverPhone && <p className="mb-0 ems-fs-11 text-muted">{v.driverPhone}</p>}
                      </td>
                      <td>
                        <StatusBadge status={v.status} label={v.status === "ACTIVE" ? t.common.active : t.common.inactive} />
                        <p className="mb-0 ems-fs-11 text-muted mt-1">{v.routeCount} {t.portal.transportPage.routesAssigned}</p>
                      </td>
                      <td className="text-end">
                        <button className="btn btn-soft-secondary btn-sm me-1" onClick={() => openVehicleEdit(v)} type="button">
                          <IconEdit className="svg-16" />
                        </button>
                        <button className="btn btn-soft-danger btn-sm" onClick={() => removeVehicle(v)} type="button">
                          <IconTrash className="svg-16" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Pagination {...vehiclesPager} onPageChange={vehiclesPager.setPage} onSizeChange={vehiclesPager.setSize} />
          </div>
        )
      )}

      {/* ---------- Routes tab ---------- */}
      {tab === "routes" && (
        !data || routes.length === 0 ? (
          <div className="card">
            <EmptyState
              icon={<IconMap />}
              title={t.portal.transportPage.noRoutes}
              action={
                <Button onClick={openRouteCreate}>
                  <IconPlus className="svg-16" />
                  <span className="ms-1">{t.portal.transportPage.newRoute}</span>
                </Button>
              }
            />
          </div>
        ) : (
          <div>
            <div className="d-flex flex-wrap justify-content-end gap-2 mb-3">
              <div className="has-search me-auto" style={{ maxWidth: 240 }}>
                <span className="fa fa-search form-control-feedback" />
                <input className="form-control" placeholder={t.common.search} value={routeQ} onChange={(e) => setRouteQ(e.target.value)} />
              </div>
              <Button onClick={openRouteCreate}>
                <IconPlus className="svg-16" />
                <span className="ms-1">{t.portal.transportPage.newRoute}</span>
              </Button>
            </div>
            <div className="row g-3">
              {routesPager.paged.map((r) => (
                <div className="col-xl-6" key={r.id}>
                  <div className={`card h-100 ${!r.isActive ? "opacity-50" : ""}`}>
                    <div className="card-header d-flex align-items-center justify-content-between">
                      <h6 className="f-w-700 mb-0 d-flex align-items-center gap-2">
                        <IconMap className="svg-16 text-primary" />
                        {r.name}
                        {r.nameBn && <span className="text-muted f-w-500">({r.nameBn})</span>}
                      </h6>
                      <div className="d-flex gap-1">
                        <button className="btn btn-soft-secondary btn-sm" onClick={() => openRouteEdit(r)} type="button">
                          <IconEdit className="svg-14" />
                        </button>
                        <button className="btn btn-soft-danger btn-sm" onClick={() => removeRoute(r)} type="button">
                          <IconTrash className="svg-14" />
                        </button>
                      </div>
                    </div>
                    <div className="card-body">
                      <div className="d-flex flex-wrap gap-2 mb-3">
                        <span className="badge badge-primary">
                          {formatBDT(r.baseFare, locale)} / {t.common.month.toLowerCase()}
                        </span>
                        {r.vehicleName && <span className="badge badge-secondary">{r.vehicleName}</span>}
                        <span className="badge badge-info">
                          {r.memberCount} {t.portal.transportPage.memberCountLabel}
                        </span>
                      </div>
                      {r.stops.length === 0 ? (
                        <p className="mb-0 ems-fs-12 text-muted">{t.portal.transportPage.noStops}</p>
                      ) : (
                        <div className="table-responsive">
                          <table className="table table-sm mb-0 align-middle">
                            <thead className="ems-table-head">
                              <tr>
                                <th>{t.portal.transportPage.stopName}</th>
                                <th className="text-end">{t.portal.transportPage.extraFare}</th>
                              </tr>
                            </thead>
                            <tbody>
                              {r.stops.map((st) => (
                                <tr key={st.id}>
                                  <td className="ems-fs-13">{st.name}</td>
                                  <td className="text-end f-w-700">+{formatBDT(st.extraFare, locale)}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <Pagination {...routesPager} onPageChange={routesPager.setPage} onSizeChange={routesPager.setSize} />
          </div>
        )
      )}

      {/* ---------- Members tab ---------- */}
      {tab === "members" && (
        <div className="card">
          <div className="card-header d-flex flex-wrap align-items-center gap-2">
            <h5 className="f-w-600 mb-0 me-auto">{t.portal.transportPage.tabMembers}</h5>
            <div className="has-search" style={{ maxWidth: 200 }}>
              <span className="fa fa-search form-control-feedback" />
              <input className="form-control" placeholder={t.common.search} value={memQ} onChange={(e) => setMemQ(e.target.value)} />
            </div>
            <div style={{ maxWidth: 160 }}>
              <Select wrapperClassName="form-group mb-0" value={memRoute} onChange={(e) => setMemRoute(e.target.value)}>
                <option value="">{t.portal.transportPage.allRoutes}</option>
                {(data?.routes ?? []).map((r) => (
                  <option key={r.id} value={r.id}>{r.name}</option>
                ))}
              </Select>
            </div>
            <div style={{ maxWidth: 130 }}>
              <Select wrapperClassName="form-group mb-0" value={memStatus} onChange={(e) => setMemStatus(e.target.value)}>
                <option value="">{t.portal.transportPage.allStatuses}</option>
                <option value="ACTIVE">{t.common.active}</option>
                <option value="INACTIVE">{t.common.inactive}</option>
              </Select>
            </div>
            <Button onClick={() => setMemOpen(true)} disabled={!data || data.routes.length === 0 || unassignedStudents.length === 0}>
              <IconPlus className="svg-16" />
              <span className="ms-1">{t.portal.transportPage.assignMember}</span>
            </Button>
          </div>
          {!data || members.length === 0 ? (
            <EmptyState icon={<IconUsers />} title={t.portal.transportPage.noMembers} />
          ) : (
            <div className="table-responsive">
              <table className="table table-hover align-middle mb-0">
                <thead className="ems-table-head">
                  <tr>
                    <th>{t.portal.studentsPage.rollNo}</th>
                    <th>{t.common.name}</th>
                    <th>{t.portal.transportPage.selectRouteLabel}</th>
                    <th>{t.portal.transportPage.monthlyFareLabel}</th>
                    <th>{t.common.status}</th>
                    <th className="text-end">{t.common.actions}</th>
                  </tr>
                </thead>
                <tbody>
                  {membersPager.paged.map((m) => (
                    <tr key={m.id} className={m.status === "INACTIVE" ? "opacity-50" : ""}>
                      <td>
                        <span className="ems-roll-badge">{m.roll}</span>
                      </td>
                      <td>
                        <p className="mb-0 f-w-700">{m.studentName}</p>
                        {m.className && <p className="mb-0 ems-fs-11 text-muted">{m.className}</p>}
                      </td>
                      <td>
                        <p className="mb-0 ems-fs-13 f-w-600">{m.routeName}</p>
                        {m.stopName && <p className="mb-0 ems-fs-11 text-muted">{m.stopName}</p>}
                      </td>
                      <td className="f-w-700">{formatBDT(m.monthlyFare, locale)}</td>
                      <td>
                        <StatusBadge status={m.status} label={m.status === "ACTIVE" ? t.common.active : t.common.inactive} />
                      </td>
                      <td className="text-end">
                        <button className="btn btn-soft-danger btn-sm" onClick={() => removeMember(m)} type="button">
                          <IconTrash className="svg-16" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          <Pagination {...membersPager} onPageChange={membersPager.setPage} onSizeChange={membersPager.setSize} />
        </div>
      )}

      {/* ---------- Collections tab ---------- */}
      {tab === "collections" && (
        <div>
          <div className="row g-3 mb-4">
            <div className="col-md-4">
              <div className="card">
                <div className="card-body">
                  <p className="mb-0 ems-fs-13 text-muted">{t.portal.transportPage.expectedTotal}</p>
                  <h4 className="mb-0 f-w-700">{formatBDT(fares?.summary.expected ?? 0, locale)}</h4>
                </div>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card">
                <div className="card-body">
                  <p className="mb-0 ems-fs-13 text-muted">{t.portal.hrPage.paidLabel}</p>
                  <h4 className="mb-0 f-w-700 text-success">{formatBDT(fares?.summary.paid ?? 0, locale)}</h4>
                </div>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card">
                <div className="card-body">
                  <p className="mb-0 ems-fs-13 text-muted">{t.portal.hrPage.dueLabel}</p>
                  <h4 className="mb-0 f-w-700 text-danger">{formatBDT(fares?.summary.due ?? 0, locale)}</h4>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
              <h5 className="f-w-600 mb-0 d-flex align-items-center gap-2">
                {t.portal.transportPage.fareFor}{" "}
                <MonthPicker
                  wrapperClassName="d-inline-block mb-0"
                  style={{ maxWidth: 160, verticalAlign: "middle" }}
                  value={month}
                  onChange={(e) => setMonth(e.target.value)}
                />
              </h5>
              <div className="d-flex flex-wrap align-items-center gap-2 ms-auto">
                <div className="has-search" style={{ maxWidth: 200 }}>
                  <span className="fa fa-search form-control-feedback" />
                  <input className="form-control" placeholder={t.common.search} value={fareQ} onChange={(e) => setFareQ(e.target.value)} />
                </div>
                <div style={{ maxWidth: 160 }}>
                  <Select wrapperClassName="form-group mb-0" value={fareRoute} onChange={(e) => setFareRoute(e.target.value)}>
                    <option value="">{t.portal.transportPage.allRoutes}</option>
                    {[...new Set((fares?.rows ?? []).map((r) => r.routeName))].map((rn) => (
                      <option key={rn} value={rn}>{rn}</option>
                    ))}
                  </Select>
                </div>
                <div style={{ maxWidth: 130 }}>
                  <Select wrapperClassName="form-group mb-0" value={farePaid} onChange={(e) => setFarePaid(e.target.value)}>
                    <option value="">{t.portal.transportPage.allPayments}</option>
                    <option value="PAID">{t.portal.hrPage.paidLabel}</option>
                    <option value="DUE">{t.portal.hrPage.dueLabel}</option>
                  </Select>
                </div>
              </div>
            </div>
            {faresLoading ? (
              <div className="card-body text-center py-4">
                <span className="spinner-border text-primary" role="status" />
              </div>
            ) : !fares || fareRows.length === 0 ? (
              <EmptyState icon={<IconUsers />} title={t.portal.transportPage.noMembersForFare} />
            ) : (
              <div className="table-responsive">
                <table className="table table-hover align-middle mb-0">
                  <thead className="ems-table-head">
                    <tr>
                      <th>{t.portal.studentsPage.rollNo}</th>
                      <th>{t.common.name}</th>
                      <th>{t.portal.transportPage.selectRouteLabel}</th>
                      <th>{t.portal.transportPage.monthlyFareLabel}</th>
                      <th>{t.common.status}</th>
                      <th className="text-end">{t.common.actions}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {faresPager.paged.map((r) => (
                      <tr key={r.memberId}>
                        <td>
                          <span className="ems-roll-badge">{r.roll}</span>
                        </td>
                        <td className="f-w-600">{r.studentName}</td>
                        <td>
                          <p className="mb-0 ems-fs-13">{r.routeName}</p>
                          {r.stopName && <p className="mb-0 ems-fs-11 text-muted">{r.stopName}</p>}
                        </td>
                        <td className="f-w-700">{formatBDT(r.fare, locale)}</td>
                        <td>
                          {r.paid ? (
                            <div>
                              <span className="badge badge-success">
                                {t.portal.transportPage.alreadyPaidFare} ({formatDate(r.paidAt, locale)})
                              </span>
                              {r.method && (
                                <p className="mb-0 mt-1 ems-fs-11">
                                  <span className="badge badge-secondary">{t.methods[r.method as keyof typeof t.methods] ?? r.method}</span>
                                  {r.trxId ? <span className="ms-1 text-muted font-monospace">{r.trxId}</span> : null}
                                </p>
                              )}
                            </div>
                          ) : (
                            <span className="badge badge-danger">{t.portal.hrPage.dueLabel}</span>
                          )}
                        </td>
                        <td className="text-end">
                          {r.paid ? (
                            "—"
                          ) : (
                            <Button size="sm" variant="success" onClick={() => setPayMember(r)}>
                              <IconDollar className="svg-14" />
                              <span className="ms-1">{t.portal.transportPage.collectFare}</span>
                            </Button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            <Pagination {...faresPager} onPageChange={faresPager.setPage} onSizeChange={faresPager.setSize} />
          </div>
        </div>
      )}

      {/* Vehicle modal */}
      <Modal
        open={vehOpen}
        onClose={() => setVehOpen(false)}
        title={editingVeh ? t.portal.transportPage.editVehicle : t.portal.transportPage.newVehicle}
      >
        <Input label={t.portal.transportPage.vehicleName} value={vehForm.name} onChange={(e) => setVehForm({ ...vehForm, name: e.target.value })} placeholder="e.g. Bus-1" />
        <Input label={t.portal.transportPage.registrationNo} value={vehForm.registrationNo} onChange={(e) => setVehForm({ ...vehForm, registrationNo: e.target.value })} placeholder="DHA-11-2345" />
        <div className="row">
          <div className="col-md-6">
            <Select label={t.portal.transportPage.vehicleType} value={vehForm.type} onChange={(e) => setVehForm({ ...vehForm, type: e.target.value })}>
              {VEHICLE_TYPES.map((v) => (
                <option key={v} value={v}>
                  {t.vehicleTypes[v]}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-6">
            <Input label={t.portal.transportPage.capacity} type="number" min="0" value={vehForm.capacity} onChange={(e) => setVehForm({ ...vehForm, capacity: e.target.value })} />
          </div>
        </div>
        <div className="row">
          <div className="col-md-6">
            <Input label={t.portal.transportPage.driverName} value={vehForm.driverName} onChange={(e) => setVehForm({ ...vehForm, driverName: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Input label={t.portal.transportPage.driverPhone} value={vehForm.driverPhone} onChange={(e) => setVehForm({ ...vehForm, driverPhone: e.target.value })} />
          </div>
        </div>
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setVehOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={saveVehicle} loading={vehSaving} disabled={!vehForm.name.trim()}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Route modal */}
      <Modal
        open={routeOpen}
        onClose={() => setRouteOpen(false)}
        title={editingRoute ? t.portal.transportPage.editRoute : t.portal.transportPage.newRoute}
        wide
      >
        <div className="row">
          <div className="col-md-6">
            <Input label={t.portal.transportPage.routeName} value={routeForm.name} onChange={(e) => setRouteForm({ ...routeForm, name: e.target.value })} placeholder="e.g. Dhanmondi Route" />
          </div>
          <div className="col-md-6">
            <Input label={t.portal.transportPage.routeNameBn} value={routeForm.nameBn} onChange={(e) => setRouteForm({ ...routeForm, nameBn: e.target.value })} placeholder="যেমন: ধানমন্ডি রুট" />
          </div>
          <div className="col-md-6">
            <Select label={t.portal.transportPage.assignVehicle} value={routeForm.vehicleId} onChange={(e) => setRouteForm({ ...routeForm, vehicleId: e.target.value })}>
              <option value="">— {t.common.filter} —</option>
              {(data?.vehicles ?? [])
                .filter((v) => v.status === "ACTIVE")
                .map((v) => (
                  <option key={v.id} value={v.id}>
                    {v.name} ({v.registrationNo ?? v.type})
                  </option>
                ))}
            </Select>
          </div>
          <div className="col-md-6">
            <Input label={t.portal.transportPage.baseFare} type="number" min="0" value={routeForm.baseFare} onChange={(e) => setRouteForm({ ...routeForm, baseFare: e.target.value })} />
          </div>
        </div>

        <label className="col-form-label pt-0 f-w-600">
          {t.portal.transportPage.stopsLabel}
          <span className="ems-fs-11 text-muted f-w-500 ms-2">({t.portal.transportPage.stopFareNote})</span>
        </label>
        {stopsForm.map((st, i) => (
          <div className="row g-2 align-items-center mb-2" key={i}>
            <div className="col">
              <input
                className="form-control"
                placeholder={t.portal.transportPage.stopName}
                value={st.name}
                onChange={(e) => {
                  const next = [...stopsForm];
                  next[i] = { ...st, name: e.target.value };
                  setStopsForm(next);
                }}
              />
            </div>
            <div className="col-4">
              <input
                className="form-control"
                type="number"
                min="0"
                placeholder={t.portal.transportPage.extraFare}
                value={st.extraFare}
                onChange={(e) => {
                  const next = [...stopsForm];
                  next[i] = { ...st, extraFare: e.target.value };
                  setStopsForm(next);
                }}
              />
            </div>
            <div className="col-auto">
              <button
                type="button"
                className="btn btn-soft-danger btn-sm"
                disabled={stopsForm.length === 1}
                onClick={() => setStopsForm(stopsForm.filter((_, idx) => idx !== i))}
              >
                <IconTrash className="svg-14" />
              </button>
            </div>
          </div>
        ))}
        <Button variant="secondary" size="sm" className="mb-3" onClick={() => setStopsForm([...stopsForm, { name: "", nameBn: "", extraFare: "0" }])}>
          <IconPlus className="svg-14" />
          <span className="ms-1">{t.portal.transportPage.addStop}</span>
        </Button>

        <div className="d-flex justify-content-end gap-2 pt-2 border-top">
          <Button variant="secondary" onClick={() => setRouteOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={saveRoute} loading={routeSaving} disabled={!routeForm.name.trim()}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Assign member modal */}
      <Modal open={memOpen} onClose={() => setMemOpen(false)} title={t.portal.transportPage.assignMember}>
        <Select
          label={t.portal.transportPage.selectStudentLabel}
          value={memForm.studentId}
          onChange={(e) => setMemForm({ ...memForm, studentId: e.target.value })}
        >
          <option value="">— {t.common.filter} —</option>
          {unassignedStudents.map((s) => (
            <option key={s.id} value={s.id}>
              {s.roll} — {s.name}
            </option>
          ))}
        </Select>
        <Select
          label={t.portal.transportPage.selectRouteLabel}
          value={memForm.routeId}
          onChange={(e) => setMemForm({ ...memForm, routeId: e.target.value, stopId: "" })}
        >
          <option value="">— {t.common.filter} —</option>
          {(data?.routes ?? [])
            .filter((r) => r.isActive)
            .map((r) => (
              <option key={r.id} value={r.id}>
                {r.name} ({formatBDT(r.baseFare, locale)})
              </option>
            ))}
        </Select>
        <Select
          label={t.portal.transportPage.selectStop}
          value={memForm.stopId}
          onChange={(e) => setMemForm({ ...memForm, stopId: e.target.value })}
          disabled={selectedRouteStops.length === 0}
        >
          <option value="">—</option>
          {selectedRouteStops.map((st) => (
            <option key={st.id} value={st.id}>
              {st.name} (+{formatBDT(st.extraFare, locale)})
            </option>
          ))}
        </Select>
        <Input
          label={`${t.portal.transportPage.monthlyFareLabel} (${t.common.optional})`}
          type="number"
          min="0"
          value={memForm.monthlyFare}
          onChange={(e) => setMemForm({ ...memForm, monthlyFare: e.target.value })}
          placeholder={t.portal.transportPage.stopFareNote}
        />
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setMemOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={saveMember} loading={memSaving} disabled={!memForm.studentId || !memForm.routeId}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Collect fare modal */}
      <Modal
        open={payMember !== null}
        onClose={() => setPayMember(null)}
        title={`${t.portal.transportPage.collectFare} — ${payMember?.studentName ?? ""}`}
      >
        {payMember && (
          <div>
            <div className="p-3 rounded mb-3 d-flex justify-content-between align-items-center" style={{ background: "rgba(36,105,92,0.07)" }}>
              <div>
                <p className="mb-0 f-w-700">{payMember.studentName}</p>
                <p className="mb-0 ems-fs-12 text-muted">
                  {payMember.roll} · {payMember.routeName}
                  {payMember.stopName ? ` · ${payMember.stopName}` : ""} · {fares?.month}
                </p>
              </div>
              <h5 className="mb-0 f-w-800 ems-text-teal">{formatBDT(payMember.fare, locale)}</h5>
            </div>
            <Select label={t.common.method} value={payMethod} onChange={(e) => setPayMethod(e.target.value)}>
              {PAYMENT_METHODS.map((m) => (
                <option key={m} value={m}>
                  {t.methods[m]}
                </option>
              ))}
            </Select>
            {payMethod !== "CASH" && (
              <>
                <Input
                  label={`${t.portal.transportPage.trxId} *`}
                  required
                  placeholder="8H7K2Q9P"
                  value={payTrxId}
                  onChange={(e) => setPayTrxId(e.target.value.toUpperCase())}
                />
                <p className="ems-fs-11 text-muted mb-2">{t.portal.transportPage.trxHint}</p>
              </>
            )}
            <Input label={t.common.note} value={payNote} onChange={(e) => setPayNote(e.target.value)} />
            <div className="d-flex justify-content-end gap-2">
              <Button variant="secondary" onClick={() => setPayMember(null)}>
                {t.common.cancel}
              </Button>
              <Button variant="success" onClick={collectFare} loading={paySaving}>
                <IconDollar className="svg-16" />
                <span className="ms-1">{t.portal.transportPage.collectFare}</span>
              </Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}