import { useState } from "react";

// ─── MOCK DATA ─────────────────────────────────────────────────────────────
const VEHICLES = [
  { id: 1, name: "MH-04-AB-1234 (Bus)" },
  { id: 2, name: "MP-09-CD-5678 (Van)" },
  { id: 3, name: "DL-01-EF-9012 (Bus)" },
  { id: 4, name: "RJ-14-GH-3456 (Van)" },
];

const INIT_ROUTES = [
  {
    id: 1,
    route_title: "Route A – North Zone",
    vehicle_id: "1",
    driver_name: "Ramesh Kumar",
    driver_contact: "9876543210",
    helper_name: "Suresh Yadav",
    helper_contact: "9123456780",
    fare: "1500",
    status: "active",
  },
  {
    id: 2,
    route_title: "Route B – South Zone",
    vehicle_id: "2",
    driver_name: "Mohan Singh",
    driver_contact: "9988776655",
    helper_name: "",
    helper_contact: "",
    fare: "1200",
    status: "active",
  },
  {
    id: 3,
    route_title: "Route C – East Zone",
    vehicle_id: "3",
    driver_name: "Vijay Sharma",
    driver_contact: "9871234560",
    helper_name: "Anil Verma",
    helper_contact: "9012345670",
    fare: "1100",
    status: "inactive",
  },
];

const CURRENCY = "₹";
let routeIdCounter = 10;

const emptyRoute = () => ({
  id: ++routeIdCounter,
  route_title: "",
  vehicle_id: "",
  driver_name: "",
  driver_contact: "",
  helper_name: "",
  helper_contact: "",
  fare: "",
  status: "active",
});

// ─── STYLES ────────────────────────────────────────────────────────────────
const css = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.rt-root{font-family:'Inter',sans-serif;background:#f0f4ff;color:#1e2a4a;min-height:100vh;display:flex;flex-direction:column}

/* NAV */
.rt-nav{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:60px;background:#1a56db;position:sticky;top:0;z-index:100;border-bottom:1px solid #1648c4}
.rt-nav-brand{display:flex;align-items:center;gap:10px}
.rt-nav-logo{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:18px}
.rt-nav-name{font-size:16px;font-weight:700;color:#fff}
.rt-nav-name span{color:#bfdbfe}
.rt-nav-chip{font-size:11px;color:#bfdbfe;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);padding:3px 10px;border-radius:20px}
.rt-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer}

/* LAYOUT */
.rt-body{display:flex;flex:1}

/* SIDEBAR */
.rt-aside{width:215px;flex-shrink:0;background:#fff;border-right:1px solid #e2e8f8;padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.rt-aside-sec{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8;padding:12px 10px 5px}
.rt-aside-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13px;color:#64748b;cursor:pointer;transition:all .15s}
.rt-aside-item:hover{background:#eff6ff;color:#1a56db}
.rt-aside-item.active{background:#dbeafe;color:#1a56db;font-weight:600}

/* MAIN */
.rt-main{flex:1;padding:28px 32px;overflow-x:hidden}

/* PAGE HEADER */
.rt-page-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.rt-page-hdr h1{font-size:22px;font-weight:700;color:#1e2a4a;letter-spacing:-.3px}
.rt-page-hdr p{font-size:13px;color:#64748b;margin-top:3px}

/* STATS */
.rt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.rt-stat{background:#fff;border:1px solid #e2e8f8;border-radius:12px;padding:16px 18px;transition:box-shadow .15s}
.rt-stat:hover{box-shadow:0 2px 12px rgba(26,86,219,.07)}
.rt-stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;font-weight:500}
.rt-stat-val{font-size:26px;font-weight:700;margin:4px 0 2px}
.rt-stat-sub{font-size:12px;color:#94a3b8}
.rt-stat.blue .rt-stat-val{color:#1a56db}
.rt-stat.green .rt-stat-val{color:#16a34a}
.rt-stat.amber .rt-stat-val{color:#d97706}
.rt-stat.red .rt-stat-val{color:#dc2626}

/* TOOLBAR */
.rt-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.rt-search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:9px 14px;transition:border-color .15s}
.rt-search:focus-within{border-color:#1a56db;box-shadow:0 0 0 3px rgba(26,86,219,.08)}
.rt-search input{border:none;outline:none;font-family:'Inter',sans-serif;font-size:13.5px;color:#1e2a4a;background:none;flex:1}
.rt-search input::placeholder{color:#cbd5e1}
.rt-filter{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:9px 14px;font-family:'Inter',sans-serif;font-size:13.5px;color:#1e2a4a;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;min-width:140px}
.btn-primary{display:flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;background:#1a56db;border:none;color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn-primary:hover{background:#1648c4}

/* TABLE CARD */
.rt-table-card{background:#fff;border:1px solid #e2e8f8;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(26,86,219,.04)}
.rt-table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead tr{background:#f8faff;border-bottom:1px solid #e2e8f8}
th{padding:12px 16px;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;font-weight:600;white-space:nowrap}
tbody tr{border-bottom:1px solid #f1f5fe;transition:background .15s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#fafcff}
td{padding:13px 16px;vertical-align:middle}

/* TABLE CELLS */
.rt-num{width:32px;height:32px;border-radius:8px;background:#dbeafe;color:#1a56db;display:grid;place-items:center;font-size:12px;font-weight:700}
.rt-route-name{font-weight:600;color:#1e2a4a;margin-bottom:2px}
.rt-route-sub{font-size:11.5px;color:#94a3b8}
.rt-driver-name{font-weight:500;color:#334155}
.rt-driver-contact{font-size:11.5px;color:#94a3b8;margin-top:2px;font-family:'DM Mono',monospace}
.rt-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:500}
.rt-badge.active{background:#dcfce7;color:#16a34a;border:1px solid #86efac}
.rt-badge.inactive{background:#f8fafc;color:#94a3b8;border:1px solid #e2e8f0}
.rt-fare{font-weight:700;color:#1a56db;font-size:14px}
.rt-actions{display:flex;gap:7px}
.act-btn{width:32px;height:32px;border-radius:8px;border:1px solid;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:all .15s}
.act-btn.edit{background:rgba(26,86,219,.07);border-color:#bfdbfe;color:#1a56db}
.act-btn.edit:hover{background:rgba(26,86,219,.15)}
.act-btn.del{background:#fff1f2;border-color:#fecdd3;color:#ef4444}
.act-btn.del:hover{background:#ffe4e6}
.act-btn.toggle{background:#f0fdf4;border-color:#86efac;color:#16a34a}
.act-btn.toggle:hover{background:#dcfce7}

/* PAGINATION */
.rt-pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #f1f5fe;font-size:13px;color:#64748b}
.pg-btns{display:flex;gap:6px}
.pg-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:none;color:#64748b;cursor:pointer;display:grid;place-items:center;font-size:13px;font-family:'Inter',sans-serif;transition:all .15s}
.pg-btn:hover{background:#eff6ff;color:#1a56db;border-color:#93c5fd}
.pg-btn.active{background:#1a56db;color:#fff;border-color:#1a56db;font-weight:700}

/* MODAL */
.rt-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.3);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px)}
.rt-modal{background:#fff;border:1px solid #e2e8f8;border-radius:16px;padding:28px;width:560px;max-width:95vw;box-shadow:0 20px 48px rgba(15,23,42,.12);animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.rt-modal-title{font-size:17px;font-weight:700;color:#1e2a4a;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.rt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.rt-form-grid.three{grid-template-columns:1fr 1fr 1fr}
.rt-form-group{display:flex;flex-direction:column;gap:5px}
.rt-form-group.full{grid-column:span 2}
.rt-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#64748b;font-weight:500;display:flex;align-items:center;gap:3px}
.rt-req{color:#ef4444;font-size:13px}
.rt-inp,.rt-sel{width:100%;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:9px 12px;color:#1e2a4a;font-family:'Inter',sans-serif;font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.rt-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;appearance:none;-webkit-appearance:none}
.rt-inp:focus,.rt-sel:focus{border-color:#1a56db;box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.rt-inp::placeholder{color:#cbd5e1}
.rt-inp-grp{display:flex;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.rt-inp-grp:focus-within{border-color:#1a56db;box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.rt-inp-grp .rt-inp{border:none;border-radius:0;box-shadow:none}
.rt-addon{display:flex;align-items:center;padding:0 11px;background:#f1f5f9;border-right:1px solid #e2e8f0;font-size:12px;color:#64748b;font-weight:600;white-space:nowrap}
.rt-divider{height:1px;background:#f1f5fe;margin:4px 0 16px}
.rt-section-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;font-weight:600;margin-bottom:12px}
.rt-modal-footer{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}
.btn-ghost{padding:9px 18px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.btn-ghost:hover{background:#f1f5f9;color:#334155}
.btn-danger-outline{padding:9px 18px;border-radius:8px;background:#fff1f2;border:1px solid #fecdd3;color:#ef4444;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.btn-danger-outline:hover{background:#ffe4e6}

/* TOAST */
.rt-toast{position:fixed;bottom:24px;right:24px;background:#fff;border-radius:12px;padding:13px 20px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(0,0,0,.1);animation:slideUp .22s ease;z-index:300}
.rt-toast.success{border:1px solid #86efac;color:#166534}
.rt-toast.warn{border:1px solid #fde68a;color:#92400e}
.rt-toast.error{border:1px solid #fecdd3;color:#991b1b}
@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* EMPTY */
.rt-empty{padding:56px 20px;text-align:center;color:#94a3b8}
.rt-empty-icon{font-size:40px;margin-bottom:12px}

@media(max-width:900px){
  .rt-aside{display:none}
  .rt-main{padding:16px}
  .rt-stats{grid-template-columns:repeat(2,1fr)}
  .rt-form-grid,.rt-form-grid.three{grid-template-columns:1fr}
  .rt-form-group.full{grid-column:span 1}
}
`;

// ─── ROUTE FORM MODAL ───────────────────────────────────────────────────────
function RouteModal({ route, onClose, onSave }) {
  const [form, setForm] = useState(route);
  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));

  const handleSave = () => {
    if (
      !form.route_title ||
      !form.vehicle_id ||
      !form.driver_name ||
      !form.driver_contact ||
      !form.fare
    ) {
      alert("Please fill all required fields.");
      return;
    }
    onSave(form);
  };

  return (
    <div className="rt-modal-bg" onClick={onClose}>
      <div className="rt-modal" onClick={(e) => e.stopPropagation()}>
        <div className="rt-modal-title">
          🚌 {route.route_title ? "Edit Route" : "Add New Route"}
        </div>

        {/* Route Info */}
        <div className="rt-section-lbl">Route Information</div>
        <div className="rt-form-grid">
          <div className="rt-form-group full">
            <label className="rt-lbl">
              Route Title <span className="rt-req">*</span>
            </label>
            <input
              className="rt-inp"
              placeholder="e.g. Route A – North Zone"
              value={form.route_title}
              onChange={(e) => set("route_title", e.target.value)}
            />
          </div>
          <div className="rt-form-group">
            <label className="rt-lbl">
              Vehicle / Bus <span className="rt-req">*</span>
            </label>
            <select
              className="rt-sel"
              value={form.vehicle_id}
              onChange={(e) => set("vehicle_id", e.target.value)}
            >
              <option value="">— Select Vehicle —</option>
              {VEHICLES.map((v) => (
                <option key={v.id} value={v.id}>
                  {v.name}
                </option>
              ))}
            </select>
          </div>
          <div className="rt-form-group">
            <label className="rt-lbl">
              Monthly Route Fare ({CURRENCY}) <span className="rt-req">*</span>
            </label>
            <div className="rt-inp-grp">
              <div className="rt-addon">{CURRENCY}</div>
              <input
                className="rt-inp"
                type="number"
                min="0"
                placeholder="0"
                value={form.fare}
                onChange={(e) => set("fare", e.target.value)}
              />
            </div>
          </div>
          <div className="rt-form-group">
            <label className="rt-lbl">Status</label>
            <select
              className="rt-sel"
              value={form.status}
              onChange={(e) => set("status", e.target.value)}
            >
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </div>

        <div className="rt-divider" />

        {/* Driver */}
        <div className="rt-section-lbl">Driver Details</div>
        <div className="rt-form-grid">
          <div className="rt-form-group">
            <label className="rt-lbl">
              Driver Name <span className="rt-req">*</span>
            </label>
            <input
              className="rt-inp"
              placeholder="Full name"
              value={form.driver_name}
              onChange={(e) => set("driver_name", e.target.value)}
            />
          </div>
          <div className="rt-form-group">
            <label className="rt-lbl">
              Driver Contact <span className="rt-req">*</span>
            </label>
            <div className="rt-inp-grp">
              <div className="rt-addon">📞</div>
              <input
                className="rt-inp"
                type="tel"
                maxLength={10}
                placeholder="10-digit number"
                value={form.driver_contact}
                onChange={(e) => set("driver_contact", e.target.value)}
              />
            </div>
          </div>
        </div>

        <div className="rt-divider" />

        {/* Helper */}
        <div className="rt-section-lbl">Helper / Attendant (Optional)</div>
        <div className="rt-form-grid">
          <div className="rt-form-group">
            <label className="rt-lbl">Helper Name</label>
            <input
              className="rt-inp"
              placeholder="Full name"
              value={form.helper_name}
              onChange={(e) => set("helper_name", e.target.value)}
            />
          </div>
          <div className="rt-form-group">
            <label className="rt-lbl">Helper Contact</label>
            <div className="rt-inp-grp">
              <div className="rt-addon">📞</div>
              <input
                className="rt-inp"
                type="tel"
                maxLength={10}
                placeholder="10-digit number"
                value={form.helper_contact}
                onChange={(e) => set("helper_contact", e.target.value)}
              />
            </div>
          </div>
        </div>

        <div className="rt-modal-footer">
          <button className="btn-ghost" onClick={onClose}>
            Cancel
          </button>
          <button className="btn-primary" onClick={handleSave}>
            💾 Save Route
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── DELETE CONFIRM ─────────────────────────────────────────────────────────
function DeleteModal({ route, onClose, onConfirm }) {
  return (
    <div className="rt-modal-bg" onClick={onClose}>
      <div
        className="rt-modal"
        style={{ width: 380 }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="rt-modal-title">🗑 Delete Route?</div>
        <p
          style={{
            fontSize: 13.5,
            color: "#64748b",
            lineHeight: 1.6,
            marginBottom: 22,
          }}
        >
          Are you sure you want to delete{" "}
          <strong style={{ color: "#1e2a4a" }}>{route.route_title}</strong>?
          This will also remove all linked pickup points. This action cannot be
          undone.
        </p>
        <div className="rt-modal-footer">
          <button className="btn-ghost" onClick={onClose}>
            Cancel
          </button>
          <button className="btn-danger-outline" onClick={onConfirm}>
            Yes, Delete
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── MAIN ───────────────────────────────────────────────────────────────────
const navMain = [
  { icon: "🏠", label: "Front Office" },
  { icon: "👨‍🎓", label: "Student Info" },
  { icon: "💰", label: "Fees Collection" },
  { icon: "📊", label: "Income" },
  { icon: "📝", label: "Examinations" },
  { icon: "📅", label: "Attendance" },
];
const navRes = [
  { icon: "🚌", label: "Transport Routes", active: true },
  { icon: "🚏", label: "Pickup Points" },
  { icon: "📚", label: "Library" },
  { icon: "👥", label: "Human Resource" },
];

export default function RoutePickupPoint() {
  const [routes, setRoutes] = useState(INIT_ROUTES);
  const [search, setSearch] = useState("");
  const [filterStatus, setFilterStatus] = useState("all");
  const [modal, setModal] = useState(null); // null | { type:'add'|'edit'|'delete', route }
  const [toast, setToast] = useState(null);

  const showToast = (msg, type = "success") => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 2800);
  };

  const filtered = routes.filter((r) => {
    const q = search.toLowerCase();
    const matchQ =
      !q ||
      r.route_title.toLowerCase().includes(q) ||
      r.driver_name.toLowerCase().includes(q);
    const matchStatus = filterStatus === "all" || r.status === filterStatus;
    return matchQ && matchStatus;
  });

  const handleSave = (form) => {
    if (routes.find((r) => r.id === form.id)) {
      setRoutes((prev) => prev.map((r) => (r.id === form.id ? form : r)));
      showToast("✓ Route updated successfully");
    } else {
      setRoutes((prev) => [...prev, form]);
      showToast("✓ Route added successfully");
    }
    setModal(null);
  };

  const handleDelete = () => {
    setRoutes((prev) => prev.filter((r) => r.id !== modal.route.id));
    showToast("Route deleted", "error");
    setModal(null);
  };

  const toggleStatus = (id) => {
    setRoutes((prev) =>
      prev.map((r) =>
        r.id === id
          ? { ...r, status: r.status === "active" ? "inactive" : "active" }
          : r,
      ),
    );
    showToast("✓ Status updated");
  };

  const activeCount = routes.filter((r) => r.status === "active").length;
  const inactiveCount = routes.filter((r) => r.status === "inactive").length;
  const totalFare = routes
    .filter((r) => r.status === "active")
    .reduce((a, r) => a + (parseFloat(r.fare) || 0), 0);

  return (
    <>
      <style>{css}</style>
      <div className="rt-root">
        <div className="rt-body">
          {/* MAIN */}
          <main className="rt-main">
            {/* Header */}
            <div className="rt-page-hdr">
              <div>
                <h1>🚌 Route Management</h1>
                <p>Configure transport routes, vehicles, drivers and helpers</p>
              </div>
              <button
                className="btn-primary"
                onClick={() => setModal({ type: "add", route: emptyRoute() })}
              >
                ＋ Add New Route
              </button>
            </div>

            {/* Stats */}
            <div className="rt-stats">
              <div className="rt-stat blue">
                <div className="rt-stat-lbl">Total Routes</div>
                <div className="rt-stat-val">{routes.length}</div>
                <div className="rt-stat-sub">Configured routes</div>
              </div>
              <div className="rt-stat green">
                <div className="rt-stat-lbl">Active</div>
                <div className="rt-stat-val">{activeCount}</div>
                <div className="rt-stat-sub">Currently running</div>
              </div>
              <div className="rt-stat amber">
                <div className="rt-stat-lbl">Inactive</div>
                <div className="rt-stat-val">{inactiveCount}</div>
                <div className="rt-stat-sub">Suspended routes</div>
              </div>
              <div className="rt-stat red">
                <div className="rt-stat-lbl">Total Fare/mo</div>
                <div className="rt-stat-val">
                  {CURRENCY}
                  {totalFare.toLocaleString()}
                </div>
                <div className="rt-stat-sub">Active routes only</div>
              </div>
            </div>

            {/* Toolbar */}
            <div className="rt-toolbar">
              <div className="rt-search">
                🔍
                <input
                  placeholder="Search by route name or driver…"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
                {search && (
                  <span
                    style={{
                      cursor: "pointer",
                      color: "#94a3b8",
                      fontSize: 13,
                    }}
                    onClick={() => setSearch("")}
                  >
                    ✕
                  </span>
                )}
              </div>
              <select
                className="rt-filter"
                value={filterStatus}
                onChange={(e) => setFilterStatus(e.target.value)}
              >
                <option value="all">All Status</option>
                <option value="active">Active Only</option>
                <option value="inactive">Inactive Only</option>
              </select>
            </div>

            {/* Table */}
            <div className="rt-table-card">
              <div className="rt-table-wrap">
                <table>
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Route</th>
                      <th>Vehicle</th>
                      <th>Driver</th>
                      <th>Helper</th>
                      <th>Fare / Month</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.length === 0 ? (
                      <tr>
                        <td colSpan={8}>
                          <div className="rt-empty">
                            <div className="rt-empty-icon">🚌</div>
                            <div
                              style={{
                                fontSize: 15,
                                fontWeight: 600,
                                color: "#64748b",
                                marginBottom: 4,
                              }}
                            >
                              No routes found
                            </div>
                            <div style={{ fontSize: 13 }}>
                              Try a different search or add a new route
                            </div>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      filtered.map((r, i) => {
                        const vehicle = VEHICLES.find(
                          (v) => String(v.id) === String(r.vehicle_id),
                        );
                        return (
                          <tr key={r.id}>
                            <td>
                              <div className="rt-num">{i + 1}</div>
                            </td>
                            <td>
                              <div className="rt-route-name">
                                {r.route_title}
                              </div>
                              <div className="rt-route-sub">
                                ID: RT-{String(r.id).padStart(3, "0")}
                              </div>
                            </td>
                            <td style={{ color: "#334155", fontSize: 13 }}>
                              {vehicle ? (
                                vehicle.name
                              ) : (
                                <span style={{ color: "#cbd5e1" }}>—</span>
                              )}
                            </td>
                            <td>
                              <div className="rt-driver-name">
                                {r.driver_name || (
                                  <span style={{ color: "#cbd5e1" }}>—</span>
                                )}
                              </div>
                              {r.driver_contact && (
                                <div className="rt-driver-contact">
                                  📞 {r.driver_contact}
                                </div>
                              )}
                            </td>
                            <td>
                              <div className="rt-driver-name">
                                {r.helper_name || (
                                  <span
                                    style={{ color: "#cbd5e1", fontSize: 12 }}
                                  >
                                    Not assigned
                                  </span>
                                )}
                              </div>
                              {r.helper_contact && (
                                <div className="rt-driver-contact">
                                  📞 {r.helper_contact}
                                </div>
                              )}
                            </td>
                            <td>
                              <div className="rt-fare">
                                {CURRENCY}
                                {parseFloat(r.fare || 0).toLocaleString()}
                              </div>
                            </td>
                            <td>
                              <span className={`rt-badge ${r.status}`}>
                                {r.status === "active"
                                  ? "● Active"
                                  : "○ Inactive"}
                              </span>
                            </td>
                            <td>
                              <div className="rt-actions">
                                <button
                                  className="act-btn edit"
                                  title="Edit"
                                  onClick={() =>
                                    setModal({ type: "edit", route: r })
                                  }
                                >
                                  ✏️
                                </button>
                                <button
                                  className="act-btn toggle"
                                  title="Toggle Status"
                                  onClick={() => toggleStatus(r.id)}
                                >
                                  ⇄
                                </button>
                                <button
                                  className="act-btn del"
                                  title="Delete"
                                  onClick={() =>
                                    setModal({ type: "delete", route: r })
                                  }
                                >
                                  🗑
                                </button>
                              </div>
                            </td>
                          </tr>
                        );
                      })
                    )}
                  </tbody>
                </table>
              </div>

              {/* Pagination */}
              <div className="rt-pagination">
                <span>
                  Showing {filtered.length} of {routes.length} route
                  {routes.length !== 1 ? "s" : ""}
                </span>
                <div className="pg-btns">
                  <button className="pg-btn">‹</button>
                  <button className="pg-btn active">1</button>
                  <button className="pg-btn">›</button>
                </div>
              </div>
            </div>
          </main>
        </div>

        {/* MODALS */}
        {(modal?.type === "add" || modal?.type === "edit") && (
          <RouteModal
            route={modal.route}
            onClose={() => setModal(null)}
            onSave={handleSave}
          />
        )}
        {modal?.type === "delete" && (
          <DeleteModal
            route={modal.route}
            onClose={() => setModal(null)}
            onConfirm={handleDelete}
          />
        )}

        {/* TOAST */}
        {toast && <div className={`rt-toast ${toast.type}`}>{toast.msg}</div>}
      </div>
    </>
  );
}
