"use client";

import { useEffect, useMemo, useState } from "react";

import {
  AlertCircle,
  ArrowRight,
  ChefHat,
  CheckCircle2,
  Clock,
  Package,
  ShoppingBag,
  TrendingUp,
  Truck,
} from "lucide-react";

type DateRange = "7d" | "30d" | "all";

import { Sheet, SheetContent } from "@/components/ui/sheet";
import { OrderTicket } from "@/components/order-ticket/order-ticket";
import { StageBadge } from "@/components/order-ticket/stage-badge";
import { getAuthUser, type AuthUser } from "@/lib/auth";
import type { Order, OrderStage } from "@/lib/order/types";
import { useOrdersStore } from "@/stores/orders/orders-store";

// ─── helpers ────────────────────────────────────────────────────────────────

function fmtGBP(n: number) {
  return `£${n.toFixed(2)}`;
}

function elapsed(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const m = Math.floor(diff / 60_000);
  if (m < 60) return `${m}m`;
  return `${Math.floor(m / 60)}h ${m % 60}m`;
}

function dayLabel(daysAgo: number): string {
  if (daysAgo === 0) return "Today";
  if (daysAgo === 1) return "Yesterday";
  const d = new Date();
  d.setDate(d.getDate() - daysAgo);
  return d.toLocaleDateString("en-GB", { weekday: "short", day: "numeric" });
}

function toDateKey(iso: string): string {
  return iso.slice(0, 10);
}

// ─── sub-components ─────────────────────────────────────────────────────────

function KpiCard({
  label, value, sub, icon: Icon, accent,
}: {
  label: string; value: string | number; sub?: string;
  icon: React.ElementType; accent: string;
}) {
  return (
    <div className={`rounded-xl border bg-card shadow-sm overflow-hidden flex`}>
      <div className={`w-1.5 shrink-0 ${accent}`} />
      <div className="flex items-center gap-3 px-4 py-4 flex-1 min-w-0">
        <div className={`rounded-lg p-2.5 shrink-0 ${accent} bg-opacity-15`}>
          <Icon className="size-5 text-white" />
        </div>
        <div className="min-w-0">
          <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-widest">{label}</p>
          <p className="text-3xl font-extrabold mt-0.5 leading-none tabular-nums">{value}</p>
          {sub && <p className="text-[11px] text-muted-foreground mt-1.5">{sub}</p>}
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ icon: Icon, title, children }: {
  icon: React.ElementType; title: string; children?: React.ReactNode;
}) {
  return (
    <div className="flex items-center gap-3 pb-1">
      <div className="flex items-center gap-2">
        <Icon className="size-4 text-primary" />
        <h2 className="text-sm font-bold uppercase tracking-widest text-foreground">{title}</h2>
      </div>
      <div className="flex-1 h-px bg-border" />
      {children}
    </div>
  );
}

/** CSS-only bar chart — revenue by day */
function RevenueBarChart({ data }: { data: { label: string; value: number; orders: number }[] }) {
  const max = Math.max(...data.map((d) => d.value), 1);
  return (
    <div className="flex items-end gap-2 h-36 mt-2">
      {data.map((d) => {
        const pct = Math.max((d.value / max) * 100, d.value > 0 ? 6 : 2);
        const isToday = d.label === "Today";
        return (
          <div
            key={d.label}
            className="flex flex-col items-center gap-1 flex-1 group cursor-default"
            title={`${d.label}: ${fmtGBP(d.value)} · ${d.orders} order${d.orders !== 1 ? "s" : ""}`}
          >
            {d.value > 0 && (
              <span className="text-[9px] text-muted-foreground group-hover:text-foreground transition-colors font-mono">
                {fmtGBP(d.value)}
              </span>
            )}
            <div className="w-full flex flex-col justify-end" style={{ height: "108px" }}>
              <div
                className={`w-full rounded-t-md transition-all ${isToday
                  ? "bg-primary shadow-sm"
                  : "bg-primary/25 group-hover:bg-primary/45"
                  }`}
                style={{ height: `${pct}%` }}
              />
            </div>
            <span className={`text-[10px] truncate w-full text-center ${isToday ? "font-bold text-primary" : "text-muted-foreground"}`}>
              {d.label}
            </span>
          </div>
        );
      })}
    </div>
  );
}

/** Horizontal stacked bar */
function StackBar({ segments }: { segments: { label: string; count: number; color: string }[] }) {
  const total = segments.reduce((s, x) => s + x.count, 0) || 1;
  return (
    <div className="flex h-3 rounded-full overflow-hidden w-full gap-px">
      {segments.map((s) => (
        <div
          key={s.label}
          className={`${s.color}`}
          style={{ width: `${(s.count / total) * 100}%` }}
          title={`${s.label}: ${s.count}`}
        />
      ))}
    </div>
  );
}

/** "in 12m" / "in 1h 5m" / "2m late" — only for orders not yet out for delivery */
function dueIn(requestedAt: string): { label: string; late: boolean; urgent: boolean } {
  const diffMs = new Date(requestedAt).getTime() - Date.now();
  const mins = Math.round(diffMs / 60_000);
  if (mins < 0) {
    const abs = Math.abs(mins);
    const t = abs < 60 ? `${abs}m late` : `${Math.floor(abs / 60)}h ${abs % 60}m late`;
    return { label: t, late: true, urgent: true };
  }
  const t = mins < 60 ? `in ${mins}m` : `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
  return { label: t, late: false, urgent: mins <= 15 };
}

const PAY_LABEL: Record<string, string> = { card: "Card", cash: "Cash", paylink: "Link" };

/** Live order row */
function LiveOrderRow({ order, onClick }: { order: Order; onClick: () => void }) {
  const showDue = order.requestedAt && !["out_for_delivery", "address_not_found", "completed"].includes(order.stage);
  const due = showDue ? dueIn(order.requestedAt!) : null;
  const itemCount = order.items.reduce((s, i) => s + i.qty, 0);

  return (
    <tr
      onClick={onClick}
      className="hover:bg-muted/60 transition-colors group cursor-pointer"
    >
      <td className="pl-4 pr-2 py-2.5 w-8">
        <span className={`font-semibold text-[10px] ${order.type === "delivery" ? "text-violet-600" : "text-blue-500"}`}>
          {order.type === "delivery" ? "Del" : "Col"}
        </span>
      </td>
      <td className="px-2 py-2.5 w-32 max-w-[8rem] font-mono text-[11px] text-muted-foreground">
        <span className="block truncate">{order.id}</span>
      </td>
      <td className="px-2 py-2.5 w-44 max-w-[11rem] font-medium text-[12px]">
        <span className="block truncate">{order.customer.na}</span>
      </td>
      <td className="px-2 py-2.5 text-right text-muted-foreground text-[11px] w-16 whitespace-nowrap">
        {itemCount} item{itemCount !== 1 ? "s" : ""}
      </td>
      <td className="px-2 py-2.5 text-right font-semibold tabular-nums text-[12px] w-20 whitespace-nowrap">
        £{order.charges.total.toFixed(2)}
      </td>
      <td className="px-2 py-2.5 text-right text-muted-foreground text-[11px] w-14">
        {PAY_LABEL[order.charges.paymentMethod] ?? "—"}
      </td>
      <td className={`px-2 py-2.5 text-right font-mono text-[11px] w-24 whitespace-nowrap ${due?.late ? "text-red-600 font-bold" : due?.urgent ? "text-amber-600 font-semibold" : "text-muted-foreground"}`}>
        {due ? due.label : "—"}
      </td>
      <td className="px-2 py-2.5 w-36">
        <div className="flex justify-end">
          <StageBadge stage={order.stage} type={order.type} />
        </div>
      </td>
      <td className="pr-4 py-2.5 w-6">
        <ArrowRight className="size-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity ml-auto block" />
      </td>
    </tr>
  );
}

/** Pipeline tile */
function PipelineTile({ label, count, color, arrow }: { label: string; count: number; color: string; arrow?: boolean }) {
  return (
    <div className="flex items-center flex-1 min-w-0">
      <div className={`flex-1 rounded-lg border text-center py-3 px-1 ${color}`}>
        <p className="text-2xl font-extrabold leading-none tabular-nums">{count}</p>
        <p className="text-[10px] font-semibold mt-1.5 leading-tight truncate">{label}</p>
      </div>
      {arrow && <ArrowRight className="size-3 text-muted-foreground/50 mx-0.5 shrink-0" />}
    </div>
  );
}

/** Top item row with relative bar background */
function TopItemRow({ rank, name, count, revenue, maxCount }: {
  rank: number; name: string; count: number; revenue: number; maxCount: number;
}) {
  const pct = (count / maxCount) * 100;
  return (
    <div className="relative flex items-center gap-2 py-2 border-b last:border-0 overflow-hidden">
      <div className="absolute inset-0 bg-primary/5 rounded-sm" style={{ width: `${pct}%` }} />
      <span className="relative text-[11px] text-muted-foreground w-4 shrink-0 text-right">{rank}</span>
      <span className="relative flex-1 text-[13px] truncate">{name}</span>
      <span className="relative text-[11px] text-muted-foreground shrink-0">{count}×</span>
      <span className="relative text-[12px] font-semibold w-14 text-right shrink-0">{fmtGBP(revenue)}</span>
    </div>
  );
}

// ─── constants ───────────────────────────────────────────────────────────────

const ACTIVE_STAGES: OrderStage[] = [
  "confirmed", "held_before_kitchen", "sent_to_kitchen", "preparing",
  "ready", "assigned", "out_for_delivery", "address_not_found",
];

const PIPELINE_STAGES = [
  { stage: "confirmed" as OrderStage,           label: "Confirmed",   color: "bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400" },
  { stage: "held_before_kitchen" as OrderStage, label: "Held",        color: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400" },
  { stage: "sent_to_kitchen" as OrderStage,     label: "In Kitchen",  color: "bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950/30 dark:text-orange-400" },
  { stage: "preparing" as OrderStage,           label: "Preparing",   color: "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-950/40 dark:text-orange-300" },
  { stage: "ready" as OrderStage,               label: "Ready",       color: "bg-green-50 border-green-200 text-green-700 dark:bg-green-950/30 dark:text-green-400" },
  { stage: "assigned" as OrderStage,            label: "Assigned",    color: "bg-cyan-50 border-cyan-200 text-cyan-700 dark:bg-cyan-950/30 dark:text-cyan-400" },
  { stage: "out_for_delivery" as OrderStage,    label: "Delivering",  color: "bg-violet-50 border-violet-200 text-violet-700 dark:bg-violet-950/30 dark:text-violet-400" },
  { stage: "address_not_found" as OrderStage,   label: "Addr Issue",  color: "bg-red-50 border-red-300 text-red-700 dark:bg-red-950/30 dark:text-red-400" },
];

const PIPELINE_STAGES_FULL = [
  ...PIPELINE_STAGES,
  { stage: "completed" as OrderStage, label: "Completed", color: "bg-gray-50 border-gray-200 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400" },
];

// ─── page ────────────────────────────────────────────────────────────────────

export default function DashboardPage() {
  const { orders } = useOrdersStore();
  const [ticketId, setTicketId] = useState<string | null>(null);
  const [user, setUser] = useState<AuthUser | null>(null);
  const [dateRange, setDateRange] = useState<DateRange>("7d");

  useEffect(() => { setUser(getAuthUser()); }, []);

  const isAdmin = user?.role === "admin";

  const derived = useMemo(() => {
    const now = new Date();
    const todayKey = toDateKey(now.toISOString());

    const activeOrders = orders
      .filter((o) => ACTIVE_STAGES.includes(o.stage))
      .sort((a, b) => new Date(a.orderedAt).getTime() - new Date(b.orderedAt).getTime());

    const completed = orders.filter((o) => o.stage === "completed");
    const todayCompleted = completed.filter((o) => toDateKey(o.orderedAt) === todayKey);
    const todayRevenue = todayCompleted.reduce((s, o) => s + o.charges.total, 0);
    const todayOrderCount = todayCompleted.length;

    const kitchenCount = orders.filter((o) => ["sent_to_kitchen", "preparing"].includes(o.stage)).length;
    const deliveryCount = orders.filter((o) => o.stage === "out_for_delivery").length;
    const problemCount = orders.filter((o) => o.stage === "address_not_found").length;
    const readyCount = orders.filter((o) => o.stage === "ready").length;

    const last7Revenue = Array.from({ length: 7 }, (_, i) => {
      const d = new Date(); d.setDate(d.getDate() - i);
      const key = toDateKey(d.toISOString());
      const dayOrders = completed.filter((o) => toDateKey(o.orderedAt) === key);
      return { label: dayLabel(i), value: dayOrders.reduce((s, o) => s + o.charges.total, 0), orders: dayOrders.length };
    }).reverse();

    const typeBreakdown = [
      { label: "Delivery", count: completed.filter((o) => o.type === "delivery").length, color: "bg-violet-500" },
      { label: "Collection", count: completed.filter((o) => o.type === "collection").length, color: "bg-blue-400" },
    ];
    const payBreakdown = [
      { label: "Card", count: completed.filter((o) => o.charges.paymentMethod === "card").length, color: "bg-emerald-500" },
      { label: "Cash", count: completed.filter((o) => o.charges.paymentMethod === "cash").length, color: "bg-amber-400" },
      { label: "Paylink", count: completed.filter((o) => o.charges.paymentMethod === "paylink").length, color: "bg-sky-400" },
    ];

    const sourceBreakdown = [
      { label: "In-house", count: completed.filter((o) => ["C","S","L","K"].includes(o.suffix)).length, color: "bg-blue-500" },
      { label: "Online", count: completed.filter((o) => ["O","OS"].includes(o.suffix)).length, color: "bg-indigo-400" },
      { label: "Platform", count: completed.filter((o) => ["D","U","J"].includes(o.suffix)).length, color: "bg-pink-400" },
    ];

    const itemMap = new Map<string, { name: string; count: number; revenue: number }>();
    for (const o of completed) {
      for (const item of o.items) {
        if (!itemMap.has(item.code)) itemMap.set(item.code, { name: item.description, count: 0, revenue: 0 });
        const e = itemMap.get(item.code)!;
        e.count += item.qty;
        e.revenue += item.qty * item.unitPrice;
      }
    }
    const topItems = [...itemMap.values()].sort((a, b) => b.count - a.count).slice(0, 6);

    const hourlyOrders = Array.from({ length: 24 }, (_, h) => ({
      hour: h, count: completed.filter((o) => new Date(o.orderedAt).getHours() === h).length,
    }));
    const avgOrderValue = completed.length > 0 ? completed.reduce((s, o) => s + o.charges.total, 0) / completed.length : 0;

    return {
      activeOrders, todayRevenue, todayOrderCount, kitchenCount, deliveryCount,
      problemCount, readyCount, last7Revenue, typeBreakdown, payBreakdown,
      sourceBreakdown, topItems, hourlyOrders, avgOrderValue, completedCount: completed.length,
    };
  }, [orders]);

  const {
    activeOrders, todayRevenue, todayOrderCount, kitchenCount, deliveryCount,
    problemCount, readyCount, last7Revenue, typeBreakdown, payBreakdown,
    sourceBreakdown, topItems, hourlyOrders, avgOrderValue, completedCount,
  } = derived;

  const maxHourly = Math.max(...hourlyOrders.map((h) => h.count), 1);
  const maxItemCount = topItems[0]?.count ?? 1;
  const ticketOrder = ticketId ? orders.find((o) => o.id === ticketId) : null;

  const filteredRevenueDays = useMemo(() => {
    const days = dateRange === "7d" ? 7 : dateRange === "30d" ? 30 : 90;
    const completed = orders.filter((o) => o.stage === "completed");
    return Array.from({ length: Math.min(days, 30) }, (_, i) => {
      const d = new Date(); d.setDate(d.getDate() - i);
      const key = toDateKey(d.toISOString());
      const dayOrders = completed.filter((o) => toDateKey(o.orderedAt) === key);
      return { label: dayLabel(i), value: dayOrders.reduce((s, o) => s + o.charges.total, 0), orders: dayOrders.length };
    }).reverse();
  }, [orders, dateRange]);

  // ── shared blocks ─────────────────────────────────────────────────────────

  const liveOrdersPanel = (
    <div className="rounded-xl border bg-card shadow-sm overflow-hidden flex flex-col">
      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
        <div className="flex items-center gap-2">
          <span className="size-2 rounded-full bg-green-500 animate-pulse inline-block" />
          <h3 className="font-bold text-sm">Live Orders</h3>
          {activeOrders.length > 0 && (
            <span className="rounded-full bg-primary text-primary-foreground text-[10px] font-bold px-1.5 py-0.5 leading-none">
              {activeOrders.length}
            </span>
          )}
        </div>
        {problemCount > 0 && (
          <span className="flex items-center gap-1 text-[11px] text-red-600 font-semibold bg-red-50 border border-red-200 px-2 py-0.5 rounded-full">
            <AlertCircle className="size-3" />
            {problemCount} address issue{problemCount > 1 ? "s" : ""}
          </span>
        )}
      </div>
      {activeOrders.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-muted-foreground gap-2">
          <CheckCircle2 className="size-10 opacity-20" />
          <p className="text-sm font-medium">No active orders</p>
          <p className="text-xs text-muted-foreground/60">All caught up!</p>
        </div>
      ) : (
        <div className="overflow-x-auto" style={{ maxHeight: "400px", overflowY: "auto" }}>
          <table className="w-full border-collapse">
            <thead className="sticky top-0 z-10">
              <tr className="bg-muted/20 border-b text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
                <th className="pl-4 pr-2 py-1.5 text-left w-8">Type</th>
                <th className="px-2 py-1.5 text-left w-32">Order ID</th>
                <th className="px-2 py-1.5 text-left w-44">Customer</th>
                <th className="px-2 py-1.5 text-right w-16">Items</th>
                <th className="px-2 py-1.5 text-right w-20">Value</th>
                <th className="px-2 py-1.5 text-right w-14">Pay</th>
                <th className="px-2 py-1.5 text-right w-24">Due</th>
                <th className="px-2 py-1.5 text-right w-36">Stage</th>
                <th className="pr-4 w-6" />
              </tr>
            </thead>
            <tbody>
              {activeOrders.map((o) => (
                <LiveOrderRow key={o.id} order={o} onClick={() => setTicketId(o.id)} />
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );

  const pipelinePanel = (full: boolean) => {
    const stages = full ? PIPELINE_STAGES_FULL : PIPELINE_STAGES;
    return (
      <div className="rounded-xl border bg-card p-4 shadow-sm">
        <div className="flex items-center gap-2 mb-3">
          <h3 className="text-sm font-bold">{full ? "Full Order Pipeline" : "Active Pipeline"}</h3>
          <span className="text-[11px] text-muted-foreground">— orders per stage right now</span>
        </div>
        <div className="flex items-stretch gap-0.5 w-full">
          {stages.map(({ stage, label, color }, i, arr) => (
            <PipelineTile
              key={stage}
              label={label}
              count={orders.filter((o) => o.stage === stage).length}
              color={color}
              arrow={i < arr.length - 1}
            />
          ))}
        </div>
      </div>
    );
  };

  // ── render ────────────────────────────────────────────────────────────────

  return (
    <>
      <div className="flex flex-col gap-5 w-full">

        {/* ── Header bar ──────────────────────────────────────────────────── */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-extrabold tracking-tight">Dashboard</h1>
            <p className="text-sm text-muted-foreground mt-0.5">
              {new Date().toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
            </p>
          </div>
          <div className="flex items-center gap-2.5">
            {user && (
              <span className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted px-2.5 py-1 rounded-full">
                {user.role === "admin" ? "Admin" : "FOH"}
              </span>
            )}
            <span className="inline-flex items-center gap-1.5 rounded-full border border-green-300 bg-green-50 px-3 py-1.5 text-[12px] font-semibold text-green-700 dark:bg-green-950/30 dark:text-green-400 dark:border-green-800">
              <span className="size-2 rounded-full bg-green-500 animate-pulse inline-block" />
              Live
            </span>
          </div>
        </div>

        {/* ══ FOH VIEW ════════════════════════════════════════════════════════ */}
        {!isAdmin && (
          <>
            <div className="grid grid-cols-3 gap-4">
              <KpiCard label="Active Orders" value={activeOrders.length}
                sub={`${readyCount} ready to collect / dispatch`} icon={ShoppingBag} accent="bg-primary" />
              <KpiCard label="In Kitchen" value={kitchenCount}
                sub="sent to kitchen + preparing" icon={ChefHat} accent="bg-orange-500" />
              <KpiCard label="Out for Delivery" value={deliveryCount}
                sub={problemCount > 0 ? `⚠ ${problemCount} address issue` : "All on track"} icon={Truck}
                accent={problemCount > 0 ? "bg-red-500" : "bg-violet-500"} />
            </div>
            {pipelinePanel(false)}
            {liveOrdersPanel}
          </>
        )}

        {/* ══ ADMIN VIEW ══════════════════════════════════════════════════════ */}
        {isAdmin && (
          <>
            {/* ── SECTION 1: Live Right Now ──────────────────────────────── */}
            <SectionHeader icon={Clock} title="Live — Right Now">
              <span className="text-[11px] text-muted-foreground">{activeOrders.length} order{activeOrders.length !== 1 ? "s" : ""} in progress</span>
            </SectionHeader>

            <div className="grid grid-cols-3 gap-4">
              <KpiCard label="Active Orders" value={activeOrders.length}
                sub={`${readyCount} ready to collect / dispatch`} icon={ShoppingBag} accent="bg-primary" />
              <KpiCard label="In Kitchen" value={kitchenCount}
                sub="sent to kitchen + currently preparing" icon={ChefHat} accent="bg-orange-500" />
              <KpiCard label="Out for Delivery" value={deliveryCount}
                sub={problemCount > 0 ? `⚠ ${problemCount} address issue` : "All on track"} icon={Truck}
                accent={problemCount > 0 ? "bg-red-500" : "bg-violet-500"} />
            </div>

            {pipelinePanel(false)}
            {liveOrdersPanel}

            {/* ── SECTION 2: Today's Performance ────────────────────────── */}
            <SectionHeader icon={TrendingUp} title="Today's Performance">
              <span className="text-[11px] text-muted-foreground">{todayOrderCount} order{todayOrderCount !== 1 ? "s" : ""} completed today</span>
            </SectionHeader>

            {/* Today KPIs */}
            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4">
              <KpiCard label="Today's Revenue" value={fmtGBP(todayRevenue)}
                sub={`from ${todayOrderCount} completed orders`} icon={TrendingUp} accent="bg-emerald-500" />
              <KpiCard label="Avg Order Value" value={fmtGBP(avgOrderValue)}
                sub="across all completed orders" icon={ShoppingBag} accent="bg-sky-500" />
              <KpiCard label="Total Completed" value={completedCount}
                sub="all time in this dataset" icon={CheckCircle2} accent="bg-gray-500" />
              <KpiCard label="Today's Orders" value={todayOrderCount}
                sub={fmtGBP(todayRevenue) + " revenue"} icon={Package} accent="bg-violet-500" />
            </div>

            {/* Three equal split cards — CSS grid auto-equalises height */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="rounded-xl border bg-card p-5 shadow-sm flex flex-col gap-3">
                <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Order Type</p>
                <StackBar segments={typeBreakdown} />
                <div className="flex flex-col gap-2 mt-1">
                  {typeBreakdown.map((s) => {
                    const total = typeBreakdown.reduce((a, x) => a + x.count, 0) || 1;
                    return (
                      <div key={s.label} className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className={`size-2.5 rounded-full ${s.color} inline-block shrink-0`} />
                          <span className="text-[12px] text-muted-foreground">{s.label}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-[11px] text-muted-foreground">{Math.round((s.count / total) * 100)}%</span>
                          <span className="text-[13px] font-bold w-8 text-right">{s.count}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="rounded-xl border bg-card p-5 shadow-sm flex flex-col gap-3">
                <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Payment Method</p>
                <StackBar segments={payBreakdown} />
                <div className="flex flex-col gap-2 mt-1">
                  {payBreakdown.map((s) => {
                    const total = payBreakdown.reduce((a, x) => a + x.count, 0) || 1;
                    return (
                      <div key={s.label} className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className={`size-2.5 rounded-full ${s.color} inline-block shrink-0`} />
                          <span className="text-[12px] text-muted-foreground">{s.label}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-[11px] text-muted-foreground">{Math.round((s.count / total) * 100)}%</span>
                          <span className="text-[13px] font-bold w-8 text-right">{s.count}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="rounded-xl border bg-card p-5 shadow-sm flex flex-col gap-3">
                <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Order Source</p>
                <StackBar segments={sourceBreakdown} />
                <div className="flex flex-col gap-2 mt-1">
                  {sourceBreakdown.map((s) => {
                    const total = sourceBreakdown.reduce((a, x) => a + x.count, 0) || 1;
                    return (
                      <div key={s.label} className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className={`size-2.5 rounded-full ${s.color} inline-block shrink-0`} />
                          <span className="text-[12px] text-muted-foreground">{s.label}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-[11px] text-muted-foreground">{Math.round((s.count / total) * 100)}%</span>
                          <span className="text-[13px] font-bold w-8 text-right">{s.count}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* ── SECTION 3: Historical Analysis ────────────────────────── */}
            <div className="flex items-center gap-3 pb-1">
              <div className="flex items-center gap-2">
                <TrendingUp className="size-4 text-primary" />
                <h2 className="text-sm font-bold uppercase tracking-widest text-foreground">Historical Analysis</h2>
              </div>
              <div className="flex-1 h-px bg-border" />
              {/* Date range filter — inlined to keep dateRange in direct scope */}
              <div className="flex items-center gap-1 rounded-lg border bg-muted/40 p-0.5">
                <button type="button" onClick={() => setDateRange("7d")}
                  className={`px-3 py-1 rounded-md text-[11px] font-semibold transition-colors ${dateRange === "7d" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`}>
                  Last 7 days
                </button>
                <button type="button" onClick={() => setDateRange("30d")}
                  className={`px-3 py-1 rounded-md text-[11px] font-semibold transition-colors ${dateRange === "30d" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`}>
                  Last 30 days
                </button>
                <button type="button" onClick={() => setDateRange("all")}
                  className={`px-3 py-1 rounded-md text-[11px] font-semibold transition-colors ${dateRange === "all" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`}>
                  All time
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* Revenue chart */}
              <div className="rounded-xl border bg-card p-5 shadow-sm">
                <div className="flex items-center justify-between mb-1">
                  <h3 className="text-sm font-bold">Revenue by Day</h3>
                  <span className="text-[11px] text-muted-foreground font-mono">
                    {fmtGBP(filteredRevenueDays.reduce((s, d) => s + d.value, 0))} total
                  </span>
                </div>
                <p className="text-[11px] text-muted-foreground mb-1">
                  {filteredRevenueDays.reduce((s, d) => s + d.orders, 0)} orders
                </p>
                <RevenueBarChart data={filteredRevenueDays} />
              </div>

              {/* Top items */}
              <div className="rounded-xl border bg-card p-5 shadow-sm">
                <h3 className="text-sm font-bold mb-3">Top Selling Items</h3>
                {topItems.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-8">No data yet</p>
                ) : (
                  <div>
                    {topItems.map((item, i) => (
                      <TopItemRow key={item.name} rank={i + 1} name={item.name}
                        count={item.count} revenue={item.revenue} maxCount={maxItemCount} />
                    ))}
                  </div>
                )}
              </div>

              {/* Peak hours */}
              <div className="rounded-xl border bg-card p-5 shadow-sm">
                <h3 className="text-sm font-bold mb-3">Peak Hours</h3>
                <div className="grid grid-cols-12 gap-1">
                  {hourlyOrders.slice(0, 12).map(({ hour, count }) => {
                    const pct = count / maxHourly;
                    const bg = pct === 0 ? "bg-muted/30" : pct < 0.33 ? "bg-primary/25" : pct < 0.67 ? "bg-primary/55" : "bg-primary";
                    return (
                      <div key={hour} className="flex flex-col items-center gap-0.5">
                        <div className={`w-full h-6 rounded ${bg}`} title={`${hour}:00 — ${count}`} />
                        <span className="text-[8px] text-muted-foreground">{hour}</span>
                      </div>
                    );
                  })}
                </div>
                <div className="grid grid-cols-12 gap-1 mt-1">
                  {hourlyOrders.slice(12).map(({ hour, count }) => {
                    const pct = count / maxHourly;
                    const bg = pct === 0 ? "bg-muted/30" : pct < 0.33 ? "bg-primary/25" : pct < 0.67 ? "bg-primary/55" : "bg-primary";
                    return (
                      <div key={hour} className="flex flex-col items-center gap-0.5">
                        <div className={`w-full h-6 rounded ${bg}`} title={`${hour}:00 — ${count}`} />
                        <span className="text-[8px] text-muted-foreground">{hour}</span>
                      </div>
                    );
                  })}
                </div>
                <div className="flex items-center gap-3 mt-3 text-[10px] text-muted-foreground">
                  <span className="size-3 rounded bg-muted/30 inline-block" /> None
                  <span className="size-3 rounded bg-primary/25 inline-block" /> Low
                  <span className="size-3 rounded bg-primary/55 inline-block" /> Mid
                  <span className="size-3 rounded bg-primary inline-block" /> Peak
                </div>
              </div>
            </div>
          </>
        )}
      </div>

      {/* Order Ticket drawer */}
      <Sheet open={!!ticketId} onOpenChange={(o) => { if (!o) setTicketId(null); }}>
        <SheetContent side="right" className="w-full max-w-[640px] p-0 overflow-y-auto">
          {ticketOrder && <OrderTicket order={ticketOrder} role={user?.role ?? "foh"} onClose={() => setTicketId(null)} />}
        </SheetContent>
      </Sheet>
    </>
  );
}