import React, { useEffect, useMemo, useRef, useState } from "react";
import { bpFetch } from "../api/client";

function Badge({ status }) {
  const s = (status || "pending").toLowerCase();
  return <span className={`bp-badge ${s}`}>{s}</span>;
}

function pad2(n) {
  return String(n).padStart(2, "0");
}

function toYMD(d) {
  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
}

function addDays(d, days) {
  const x = new Date(d);
  x.setDate(x.getDate() + days);
  return x;
}

function startOfDay(d) {
  const x = new Date(d);
  x.setHours(0, 0, 0, 0);
  return x;
}

function presetToRange(preset) {
  const today = startOfDay(new Date());
  if (preset === "today") return { from: toYMD(today), to: toYMD(today), label: "Today" };
  if (preset === "7d") return { from: toYMD(addDays(today, -6)), to: toYMD(today), label: "Last 7 days" };
  if (preset === "30d") return { from: toYMD(addDays(today, -29)), to: toYMD(today), label: "Last 30 days" };
  if (preset === "90d") return { from: toYMD(addDays(today, -89)), to: toYMD(today), label: "Last 90 days" };
  if (preset === "ytd") {
    const jan1 = new Date(today.getFullYear(), 0, 1);
    return { from: toYMD(jan1), to: toYMD(today), label: "YTD" };
  }
  return { from: toYMD(addDays(today, -6)), to: toYMD(today), label: "Last 7 days" };
}

const STEP_LABELS = {
  location: "Location",
  category: "Category",
  service: "Service",
  extras: "Extras",
  agent: "Agent",
  datetime: "Date & Time",
  customer: "Customer",
  review: "Review",
  payment: "Payment",
  confirmation: "Confirmation",
};

const PAYMENT_LABELS = {
  cash: "Pay at location",
  free: "Free booking",
  woocommerce: "WooCommerce",
  stripe: "Stripe",
  paypal: "PayPal",
};

function formatRelativeStamp(timestamp) {
  const ts = Number(timestamp || 0);
  if (!ts) return "recently";
  const diffMinutes = Math.max(0, Math.round((Date.now() - (ts * 1000)) / 60000));
  if (diffMinutes < 2) return "just now";
  if (diffMinutes < 60) return `${diffMinutes} min ago`;
  const diffHours = Math.round(diffMinutes / 60);
  if (diffHours < 24) return `${diffHours}h ago`;
  const diffDays = Math.round(diffHours / 24);
  return `${diffDays}d ago`;
}

export default function DashboardScreen() {
  const popRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState("");
  const [actionsOpen, setActionsOpen] = useState(false);
  const [rangeOpen, setRangeOpen] = useState(false);
  const [customOpen, setCustomOpen] = useState(false);
  const [preset, setPreset] = useState("7d");
  const defaultRange = useMemo(() => presetToRange("7d"), []);
  const [from, setFrom] = useState(defaultRange.from);
  const [to, setTo] = useState(defaultRange.to);
  const [isMobile, setIsMobile] = useState(() => {
    if (typeof window === "undefined" || !window.matchMedia) return false;
    return window.matchMedia("(max-width: 767px)").matches;
  });
  const [data, setData] = useState({
    kpi: { bookings_today: 0, upcoming_7d: 0, pending: 0, services: 0, agents: 0 },
    recent: [],
    chart7: [],
    funnel: {
      sessions_started: 0,
      modal_closed: 0,
      booking_submitted: 0,
      booking_confirmed: 0,
      resume_restored: 0,
      draft_discarded: 0,
      abandoned_captured: 0,
      conversion_rate: 0,
      resume_recovery_rate: 0,
      steps: [],
      payment_methods: {},
      recent_abandoned: [],
    },
  });

  const rangeLabel = useMemo(() => {
    if (preset === "custom") return `${from} - ${to}`;
    return presetToRange(preset).label;
  }, [preset, from, to]);

  useEffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia("(max-width: 767px)");
    const onChange = () => setIsMobile(mq.matches);
    onChange();
    mq.addEventListener?.("change", onChange);
    return () => mq.removeEventListener?.("change", onChange);
  }, []);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") {
        setActionsOpen(false);
        setRangeOpen(false);
        setCustomOpen(false);
      }
    };
    const onClick = (e) => {
      const el = popRef.current;
      if (el && !el.contains(e.target)) {
        setActionsOpen(false);
        setRangeOpen(false);
        setCustomOpen(false);
      }
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onClick);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onClick);
    };
  }, []);
  const chart = data.chart7 || [];
  const chartMax = Math.max(1, ...chart.map((p) => Number(p.count || 0)));
  const chartWidth = 700;
  const chartHeight = 220;
  const chartMinY = 20;
  const chartMaxY = 180;
  const chartLeft = 50;
  const chartRight = 650;
  const chartStep = chart.length > 1 ? (chartRight - chartLeft) / (chart.length - 1) : 0;
  const chartPoints = chart.map((p, i) => {
    const v = Math.max(0, Number(p.count || 0));
    const ratio = v / chartMax;
    const x = chartLeft + (chartStep * i);
    const y = chartMaxY - (ratio * (chartMaxY - chartMinY));
    return { x, y, label: p.day ? p.day.slice(5) : "", fullLabel: p.day || "", count: v };
  });
  const chartPath = chartPoints.map((pt, i) => `${i === 0 ? "M" : "L"}${pt.x},${pt.y}`).join(" ");
  const chartArea = chartPoints.length
    ? `${chartPath} L${chartRight},${chartMaxY} L${chartLeft},${chartMaxY} Z`
    : "";
  const funnel = data.funnel || {
    sessions_started: 0,
    modal_closed: 0,
    booking_submitted: 0,
    booking_confirmed: 0,
    resume_restored: 0,
    draft_discarded: 0,
    abandoned_captured: 0,
    conversion_rate: 0,
    resume_recovery_rate: 0,
    steps: [],
    payment_methods: {},
    recent_abandoned: [],
  };
  const topDropOffSteps = [...(funnel.steps || [])]
    .filter((item) => Number(item.views || 0) > 0)
    .sort((a, b) => Number(b.drop_off || 0) - Number(a.drop_off || 0))
    .slice(0, 5);
  const paymentMethodRows = Object.entries(funnel.payment_methods || {});
  const funnelKpiGridTemplate = isMobile ? "repeat(2, minmax(0, 1fr))" : "repeat(4, minmax(0, 1fr))";
  const funnelStepGridTemplate = isMobile ? "1fr repeat(3, minmax(0, 52px))" : "1.2fr repeat(3, minmax(0, .7fr))";

  const showLabel = (idx) => !isMobile || idx % 2 === 0;

  function applyPreset(nextPreset) {
    setPreset(nextPreset);
    const r = presetToRange(nextPreset);
    setFrom(r.from);
    setTo(r.to);
    setRangeOpen(false);
    setCustomOpen(false);
  }

  function openCustom() {
    setPreset("custom");
    setCustomOpen(true);
    setRangeOpen(false);
  }

  function applyCustom() {
    if (!from || !to) return;
    if (from > to) {
      setFrom(to);
      setTo(from);
    }
    setCustomOpen(false);
    setRangeOpen(false);
  }

  async function load() {
    setLoading(true);
    setErr("");
    try {
      const qs = `?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}&preset=${encodeURIComponent(preset)}`;
      const res = await bpFetch(`/admin/dashboard${qs}`);
      setData(res?.data || data);
    } catch (e) {
      setErr(e.message || "Failed to load dashboard");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { load(); /* eslint-disable-next-line */ }, [from, to, preset]);

  return (
    <div className="myplugin-page bp-dashboard">
      <main className="myplugin-content">
        <div className="bp-dashboard__head">
          <div className="myplugin-headerText">
          <h1 className="myplugin-title">Main Dashboard</h1>
          <p className="myplugin-subtitle">Overview of bookings, services, agents</p>
          </div>

          <div className="bp-dashboard__actions">
            <button
              type="button"
              className="bp-primary-btn"
              onClick={() => {
                window.location.href = "admin.php?page=pointlybooking_bookings_edit&new=1";
              }}
            >
              + Create Booking
            </button>
            <div className="bp-actions-menu">
              <button
                className="bp-top-btn bp-actions-trigger"
                type="button"
                aria-haspopup="true"
                aria-expanded={actionsOpen}
                onClick={() => setActionsOpen((v) => !v)}
              >
                More
              </button>
              {actionsOpen ? (
                <div className="bp-actions-pop" role="menu">
                  <a role="menuitem" href="admin.php?page=pointlybooking_services">+ Add Service</a>
                  <a role="menuitem" href="admin.php?page=pointlybooking_agents">+ Add Agent</a>
                </div>
              ) : null}
            </div>
          </div>
        </div>

        {err ? <div className="bp-error">{err}</div> : null}

        <div className="bp-dashboard__grid">
          <section className="myplugin-card bp-dashboard__performance">
            <header className="myplugin-card__head">
              <h2 className="myplugin-card__title">Performance</h2>
              <div className="bp-range" ref={popRef}>
                <button
                  className="bp-range__btn bp-range__btn--mobile"
                  type="button"
                  onClick={() => setRangeOpen((v) => !v)}
                  aria-haspopup="dialog"
                  aria-expanded={rangeOpen}
                >
                  {rangeLabel} <span className="bp-range__caret" aria-hidden="true">v</span>
                </button>

                <div className="bp-range__desktop">
                  <div className="bp-range__chips" role="group" aria-label="Date range">
                    <button type="button" className={`bp-chip-btn ${preset === "today" ? "is-active" : ""}`} onClick={() => applyPreset("today")}>Today</button>
                    <button type="button" className={`bp-chip-btn ${preset === "7d" ? "is-active" : ""}`} onClick={() => applyPreset("7d")}>7D</button>
                    <button type="button" className={`bp-chip-btn ${preset === "30d" ? "is-active" : ""}`} onClick={() => applyPreset("30d")}>30D</button>
                    <button type="button" className={`bp-chip-btn ${preset === "90d" ? "is-active" : ""}`} onClick={() => applyPreset("90d")}>90D</button>
                    <button type="button" className={`bp-chip-btn ${preset === "ytd" ? "is-active" : ""}`} onClick={() => applyPreset("ytd")}>YTD</button>
                  </div>
                  <button type="button" className="bp-top-btn" onClick={openCustom}>Custom</button>
                </div>

                {(rangeOpen || customOpen) && (
                  <>
                    {isMobile ? (
                      <div
                        className="bp-range__overlay"
                        role="presentation"
                        onClick={() => { setRangeOpen(false); setCustomOpen(false); }}
                      />
                    ) : null}
                    <div className={`bp-range__panel ${isMobile ? "is-sheet" : "is-pop"}`} role="dialog" aria-label="Choose date range">
                    <div className="bp-range__panel-head">
                      <div className="bp-range__panel-title">Date range</div>
                      <button type="button" className="bp-btn bp-btn-ghost" onClick={() => { setRangeOpen(false); setCustomOpen(false); }}>Close</button>
                    </div>

                    <div className="bp-range__panel-body">
                      <div className="bp-range__panel-chips">
                        <button type="button" className={`bp-chip-btn ${preset === "today" ? "is-active" : ""}`} onClick={() => applyPreset("today")}>Today</button>
                        <button type="button" className={`bp-chip-btn ${preset === "7d" ? "is-active" : ""}`} onClick={() => applyPreset("7d")}>7D</button>
                        <button type="button" className={`bp-chip-btn ${preset === "30d" ? "is-active" : ""}`} onClick={() => applyPreset("30d")}>30D</button>
                        <button type="button" className={`bp-chip-btn ${preset === "90d" ? "is-active" : ""}`} onClick={() => applyPreset("90d")}>90D</button>
                        <button type="button" className={`bp-chip-btn ${preset === "ytd" ? "is-active" : ""}`} onClick={() => applyPreset("ytd")}>YTD</button>
                        <button type="button" className={`bp-chip-btn ${preset === "custom" ? "is-active" : ""}`} onClick={openCustom}>Custom</button>
                      </div>

                      <div className="bp-range__inputs">
                        <label className="bp-range__field">
                          <span className="bp-range__label">From</span>
                          <input className="bp-input" type="date" value={from} onChange={(e) => setFrom(e.target.value)} />
                        </label>
                        <label className="bp-range__field">
                          <span className="bp-range__label">To</span>
                          <input className="bp-input" type="date" value={to} onChange={(e) => setTo(e.target.value)} />
                        </label>
                      </div>
                    </div>

                    <div className="bp-range__panel-actions">
                      <button type="button" className="bp-btn bp-btn-ghost" onClick={() => applyPreset("7d")}>Reset</button>
                      <button type="button" className="bp-btn bp-btn-primary" onClick={applyCustom}>Apply</button>
                    </div>
                    </div>
                  </>
                )}
              </div>
            </header>

            <div className="bp-kpi-grid">
              <div className="bp-kpi-tile">
                {loading ? (
                  <div className="bp-skel bp-skel-kpi" />
                ) : (
                  <>
                    <div className="bp-kpi-top">
                      <div className="bp-kpi-value">{data.kpi.bookings_today}</div>
                      <div className="bp-kpi-delta up">+0%</div>
                    </div>
                    <div className="bp-kpi-label">Bookings Today</div>
                  </>
                )}
              </div>
              <div className="bp-kpi-tile">
                {loading ? (
                  <div className="bp-skel bp-skel-kpi" />
                ) : (
                  <>
                    <div className="bp-kpi-top">
                      <div className="bp-kpi-value">{data.kpi.upcoming_7d}</div>
                      <div className="bp-kpi-delta up">+0%</div>
                    </div>
                    <div className="bp-kpi-label">Upcoming (7 days)</div>
                  </>
                )}
              </div>
              <div className="bp-kpi-tile">
                {loading ? (
                  <div className="bp-skel bp-skel-kpi" />
                ) : (
                  <>
                    <div className="bp-kpi-top">
                      <div className="bp-kpi-value">{data.kpi.pending}</div>
                      <div className="bp-kpi-delta down">-0%</div>
                    </div>
                    <div className="bp-kpi-label">Pending</div>
                  </>
                )}
              </div>
              <div className="bp-kpi-tile">
                {loading ? (
                  <div className="bp-skel bp-skel-kpi" />
                ) : (
                  <>
                    <div className="bp-kpi-top">
                      <div className="bp-kpi-value">{data.kpi.services}</div>
                      <div className="bp-kpi-delta up">+0%</div>
                    </div>
                    <div className="bp-kpi-label">Services</div>
                  </>
                )}
              </div>
            </div>

            <div className="bp-chart-wrap">
              {loading ? (
                <div className="bp-skel bp-skel-chart" />
              ) : chart.length === 0 ? (
                <div className="bp-state-card bp-state-card--soft">No chart data yet.</div>
              ) : (
                <svg className="bp-chart-svg" viewBox={`0 0 ${chartWidth} ${chartHeight}`} role="img" aria-label="Weekly performance chart">
                  <defs>
                    <linearGradient id="bpChartFill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#2b7fff" stopOpacity="0.18" />
                      <stop offset="100%" stopColor="#2b7fff" stopOpacity="0.00" />
                    </linearGradient>
                  </defs>
                  <g className="bp-chart-grid">
                    {chartPoints.map((pt) => (
                      <line key={`grid-${pt.x}`} x1={pt.x} y1={chartMinY} x2={pt.x} y2={chartMaxY} />
                    ))}
                  </g>
                  <line className="bp-chart-baseline" x1={chartLeft} y1={chartMaxY} x2={chartRight} y2={chartMaxY} />
                  <path className="bp-chart-area" d={chartArea} />
                  <path className="bp-chart-line" d={chartPath} />
                  <g className="bp-chart-points">
                    {chartPoints.map((pt, idx) => (
                      <circle key={`pt-${idx}`} cx={pt.x} cy={pt.y} r="4">
                        <title>{`${pt.fullLabel || pt.label}: ${pt.count} bookings`}</title>
                      </circle>
                    ))}
                  </g>
                  <g className="bp-chart-labels">
                    {chartPoints.map((pt, idx) => (
                      showLabel(idx) ? (
                        <text key={`lbl-${idx}`} x={pt.x} y={210} textAnchor="middle">{pt.label}</text>
                      ) : null
                    ))}
                  </g>
                </svg>
              )}
            </div>
          </section>

          <aside className="bp-dashboard__side">
            <div className="bp-card bp-quick-card">
              <div className="bp-card-label">Quick Actions</div>
              <div className="bp-quick-actions">
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_how_to_use">Open setup guide</a>
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_design_form">Customize booking wizard</a>
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_bookings">Manage bookings</a>
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_calendar">Open calendar</a>
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_settings&tab=form_fields">Edit form fields</a>
                <a className="bp-quick-link" href="admin.php?page=pointlybooking_settings">Settings</a>
              </div>
            </div>

            <div className="bp-card bp-summary-card">
              <div className="bp-card-label">Today</div>
              <div className="bp-summary-grid">
                <div className="bp-summary-item">
                  <div className="bp-summary-value">{loading ? "..." : data.kpi.bookings_today}</div>
                  <div className="bp-summary-label">Bookings</div>
                </div>
                <div className="bp-summary-item">
                  <div className="bp-summary-value">{loading ? "..." : data.kpi.pending}</div>
                  <div className="bp-summary-label">Pending</div>
                </div>
                <div className="bp-summary-item">
                  <div className="bp-summary-value">{loading ? "..." : data.kpi.agents}</div>
                  <div className="bp-summary-label">Agents</div>
                </div>
              </div>
            </div>
          </aside>
        </div>

        <div className="bp-dashboard__grid" style={{ marginTop: 14 }}>
          <section className="bp-card" style={{ padding: 16 }}>
            <div className="bp-card-label" style={{ marginBottom: 10 }}>Booking Funnel (30 days)</div>

            <div style={{ display: "grid", gridTemplateColumns: funnelKpiGridTemplate, gap: 12 }}>
              <div className="bp-kpi-tile">
                <div className="bp-kpi-top">
                  <div className="bp-kpi-value">{loading ? "..." : funnel.sessions_started}</div>
                </div>
                <div className="bp-kpi-label">Sessions started</div>
              </div>
              <div className="bp-kpi-tile">
                <div className="bp-kpi-top">
                  <div className="bp-kpi-value">{loading ? "..." : funnel.booking_submitted}</div>
                </div>
                <div className="bp-kpi-label">Bookings submitted</div>
              </div>
              <div className="bp-kpi-tile">
                <div className="bp-kpi-top">
                  <div className="bp-kpi-value">{loading ? "..." : `${Number(funnel.conversion_rate || 0).toFixed(1)}%`}</div>
                </div>
                <div className="bp-kpi-label">Submission rate</div>
              </div>
              <div className="bp-kpi-tile">
                <div className="bp-kpi-top">
                  <div className="bp-kpi-value">{loading ? "..." : `${Number(funnel.resume_recovery_rate || 0).toFixed(1)}%`}</div>
                </div>
                <div className="bp-kpi-label">Resume recovery rate</div>
              </div>
            </div>

            <div style={{ marginTop: 16, display: "grid", gap: 10 }}>
              <div style={{ display: "grid", gridTemplateColumns: funnelStepGridTemplate, gap: 12, padding: "0 4px", color: "#64748b", fontSize: 11, fontWeight: 800, textTransform: "uppercase", letterSpacing: ".04em" }}>
                <div>Step</div>
                <div>Views</div>
                <div>Completed</div>
                <div>Drop-off</div>
              </div>

              {loading ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>Loading funnel data...</div>
              ) : topDropOffSteps.length === 0 ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>No funnel activity recorded yet.</div>
              ) : topDropOffSteps.map((item) => (
                <div
                  key={item.key}
                  style={{
                    display: "grid",
                    gridTemplateColumns: funnelStepGridTemplate,
                    gap: 12,
                    padding: "12px 14px",
                    borderRadius: 14,
                    border: "1px solid rgba(15,23,42,.08)",
                    background: "#fff",
                    alignItems: "center",
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 800, color: "#0f172a" }}>{STEP_LABELS[item.key] || item.key}</div>
                    <div className="bp-muted" style={{ marginTop: 4 }}>Backs: {item.backs || 0}</div>
                  </div>
                  <div style={{ fontWeight: 700 }}>{item.views || 0}</div>
                  <div style={{ fontWeight: 700 }}>{item.completed || 0}</div>
                  <div style={{ fontWeight: 800, color: Number(item.drop_off || 0) > 0 ? "#b45309" : "#16a34a" }}>{item.drop_off || 0}</div>
                </div>
              ))}
            </div>
          </section>

          <aside className="bp-dashboard__side">
            <div className="bp-card" style={{ padding: 16 }}>
              <div className="bp-card-label" style={{ marginBottom: 10 }}>Payment Method Interest</div>
              {loading ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>Loading payment mix...</div>
              ) : paymentMethodRows.length === 0 ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>No payment selections yet.</div>
              ) : (
                <div style={{ display: "grid", gap: 8 }}>
                  {paymentMethodRows.map(([method, count]) => (
                    <div key={method} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "10px 12px", borderRadius: 12, border: "1px solid rgba(15,23,42,.08)", background: "#fff" }}>
                      <span style={{ fontWeight: 700 }}>{PAYMENT_LABELS[method] || method}</span>
                      <span style={{ fontWeight: 800 }}>{count}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="bp-card" style={{ padding: 16 }}>
              <div className="bp-card-label" style={{ marginBottom: 10 }}>Recoverable Leads</div>
              {loading ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>Loading abandoned drafts...</div>
              ) : !(funnel.recent_abandoned || []).length ? (
                <div className="bp-state-card bp-state-card--soft" style={{ margin: 0 }}>No abandoned leads captured yet.</div>
              ) : (
                <div style={{ display: "grid", gap: 10 }}>
                  {(funnel.recent_abandoned || []).map((entry, index) => (
                    <div key={`${entry.token || "lead"}-${index}`} style={{ padding: "12px 14px", borderRadius: 14, border: "1px solid rgba(15,23,42,.08)", background: "#fff" }}>
                      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                        <div style={{ fontWeight: 800, color: "#0f172a" }}>{entry.service_name || "Booking draft"}</div>
                        <div className="bp-muted">{formatRelativeStamp(entry.captured_at_ts)}</div>
                      </div>
                      <div style={{ marginTop: 6, fontSize: 13, color: "#475569" }}>{entry.customer_email || "No email captured"}</div>
                      <div style={{ marginTop: 6, fontSize: 12, color: "#64748b" }}>
                        Stage: {STEP_LABELS[entry.abandonment_stage] || entry.abandonment_stage || "Unknown"}
                      </div>
                    </div>
                  ))}
                </div>
              )}
              <a href="admin.php?page=pointlybooking_notifications" className="bp-quick-link" style={{ marginTop: 12 }}>
                Open recovery workflows
              </a>
            </div>
          </aside>
        </div>

        <div className="bp-card bp-dashboard__table">
          <div className="bp-card-label" style={{ marginBottom: 10 }}>Recent Bookings</div>

          <div className="bp-table-scroll">
            <div className="bp-table">
            <div className="bp-tr bp-th">
              <div>ID</div>
              <div>When</div>
              <div>Service</div>
              <div>Agent</div>
              <div>Customer</div>
              <div>Status</div>
            </div>

            {(data.recent || []).map((b) => (
              <a key={b.id} className="bp-tr" href={`admin.php?page=bp-bookings&view=${b.id}`}>
                <div>#{b.id}</div>
                <div className="bp-muted">{b.start}</div>
                <div>{b.service_name || "-"}</div>
                <div>{b.agent_name || "-"}</div>
                <div>{b.customer_name || "-"}</div>
                <div><Badge status={b.status} /></div>
              </a>
            ))}

            {(!data.recent || data.recent.length === 0) && (
              <div className="bp-state-card bp-state-card--inline">No bookings yet.</div>
            )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}