"use client";

import { useEffect, useState } from "react";

import { CheckCircle2, Clock, MapPin, Navigation, Package, Truck } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { OrderTicket } from "@/components/order-ticket/order-ticket";
import { StageBadge } from "@/components/order-ticket/stage-badge";
import { useShallow } from "zustand/react/shallow";

import { type AuthUser, getAuthUser } from "@/lib/auth";
import { useT } from "@/lib/i18n";
import type { OrderEvent } from "@/lib/order/types";
import { useOrdersStore } from "@/stores/orders/orders-store";

type DriverAction = {
  label: string;
  eventType: OrderEvent["type"];
  eventLabel: string;
  targetStage?: "out_for_delivery" | "completed";
  variant: "outline" | "default";
  icon: React.ElementType;
};

const DRIVER_ACTIONS: DriverAction[] = [
  {
    label: "driver_pickup",
    eventType: "driver_pickup",
    eventLabel: "Driver picked up order at shop",
    variant: "outline",
    icon: Package,
  },
  {
    label: "driver_on_the_way",
    eventType: "driver_on_the_way",
    eventLabel: "Driver on the way",
    targetStage: "out_for_delivery",
    variant: "outline",
    icon: Truck,
  },
  {
    label: "driver_arrived",
    eventType: "driver_arrived",
    eventLabel: "Driver arrived at destination",
    variant: "outline",
    icon: MapPin,
  },
  {
    label: "driver_delivered",
    eventType: "driver_delivered",
    eventLabel: "Order delivered to customer",
    targetStage: "completed",
    variant: "default",
    icon: CheckCircle2,
  },
];

export default function DriverPage() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const t = useT();

  const { orders, drivers, transition, recordDriverEvent, driverRunOrder } = useOrdersStore(
    useShallow((s) => ({
      orders: s.orders,
      drivers: s.drivers,
      transition: s.transition,
      recordDriverEvent: s.recordDriverEvent,
      driverRunOrder: s.driverRunOrder,
    })),
  );

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

  const selectedOrder = orders.find((o) => o.id === selectedId);

  // Show all delivery orders assigned to any driver (POC: no per-driver filtering yet)
  const rawOrders = orders.filter(
    (o) => o.type === "delivery" && (o.stage === "assigned" || o.stage === "out_for_delivery"),
  );

  // Apply FOH-assigned run sequence for this driver (locked — driver cannot reorder)
  const myDriverId = drivers.find(() => true)?.id; // POC: first driver for demo
  const runOrder = myDriverId ? driverRunOrder[myDriverId] : undefined;
  const myOrders = runOrder
    ? [...rawOrders].sort((a, b) => {
        const ai = runOrder.indexOf(a.id);
        const bi = runOrder.indexOf(b.id);
        return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
      })
    : rawOrders;

  const completedToday = orders.filter(
    (o) =>
      o.type === "delivery" &&
      o.stage === "completed" &&
      new Date(o.orderedAt).toDateString() === new Date().toDateString(),
  );

  const handleDriverAction = (orderId: string, action: DriverAction) => {
    if (action.eventType === "driver_delivered" && "geolocation" in navigator) {
      // Capture delivery geo coordinates
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const geo = `${pos.coords.latitude.toFixed(6)},${pos.coords.longitude.toFixed(6)}`;
          recordDriverEvent(orderId, action.eventType, `${action.eventLabel} · geo: ${geo}`);
          if (action.targetStage) transition(orderId, action.targetStage);
        },
        () => {
          // Geo denied — record without coordinates
          recordDriverEvent(orderId, action.eventType, action.eventLabel);
          if (action.targetStage) transition(orderId, action.targetStage);
        },
        { timeout: 5000, maximumAge: 0 },
      );
    } else {
      recordDriverEvent(orderId, action.eventType, action.eventLabel);
      if (action.targetStage) transition(orderId, action.targetStage);
    }
  };

  const totalMiles = myOrders.reduce((acc, o) => acc + (o.address?.miles ?? 0), 0);

  return (
    <div className="flex h-full flex-col gap-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-bold text-xl">{t.driver_my_runs}</h1>
          <p className="text-muted-foreground text-sm">
            {myOrders.length} active · {totalMiles.toFixed(1)} mi total
          </p>
        </div>
        <Truck className="size-6 text-muted-foreground" />
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-2">
        <StatCard
          label={t.driver_active}
          value={myOrders.length}
          color="text-primary"
        />
        <StatCard
          label={t.driver_completed_today}
          value={completedToday.length}
          color="text-green-600"
        />
        <StatCard
          label={t.driver_total_miles}
          value={`${totalMiles.toFixed(1)} mi`}
          color="text-muted-foreground"
        />
      </div>

      {/* Run list */}
      {runOrder && myOrders.length > 0 && (
        <div className="flex items-center gap-1.5 rounded border border-violet-300 bg-violet-50 px-3 py-1.5 text-[11px] text-violet-700 dark:bg-violet-950/30 dark:text-violet-300">
          <span className="font-semibold">{t.dispatch_seq_locked}</span>
          <span className="text-violet-500">{t.dispatch_seq_sub}</span>
        </div>
      )}
      <div className="flex-1 space-y-3 overflow-auto">
        {myOrders.length === 0 && (
          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
            <Truck className="size-10 mb-3 opacity-30" />
            <p className="text-sm">No active deliveries</p>
          </div>
        )}

        {myOrders.map((order, idx) => {
          const requestedTime = order.requestedAt
            ? new Date(order.requestedAt).toLocaleTimeString("en-GB", {
                hour: "2-digit",
                minute: "2-digit",
              })
            : null;

          return (
            <div key={order.id} className="rounded-xl border bg-card p-4">
              <button
                type="button"
                onClick={() => setSelectedId(order.id)}
                className="flex w-full items-start justify-between gap-3 text-left hover:opacity-80"
              >
                <div className="flex items-center gap-2">
                  <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary font-bold text-primary-foreground text-xs">
                    {idx + 1}
                  </span>
                  <div>
                    <div className="font-mono font-bold text-xs text-muted-foreground">{order.id}</div>
                    <div className="font-semibold">{order.customer.na}</div>
                  </div>
                </div>
                <StageBadge stage={order.stage} type={order.type} />
              </button>

              {/* Address */}
              {order.address && (
                <div className="mt-2 flex items-start gap-2 rounded-lg bg-muted/40 px-3 py-2">
                  <MapPin className="mt-0.5 size-4 shrink-0 text-primary" />
                  <div className="flex-1">
                    <p className="font-medium text-sm">{order.address.ad}</p>
                    {order.address.an && (
                      <p className="text-muted-foreground text-xs">{order.address.an}</p>
                    )}
                    <div className="mt-1 flex items-center gap-3 text-muted-foreground text-xs">
                      {order.address.miles && <span>{order.address.miles} mi</span>}
                      {requestedTime && (
                        <span className="flex items-center gap-1">
                          <Clock className="size-3" />
                          {requestedTime}
                        </span>
                      )}
                    </div>
                  </div>
                  {order.address.ge && (
                    <a
                      href={`https://maps.google.com/?q=${order.address.ge}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="shrink-0 rounded-lg bg-primary/10 p-2 text-primary hover:bg-primary/20"
                      title="Open in Google Maps"
                    >
                      <Navigation className="size-4" />
                    </a>
                  )}
                </div>
              )}

              {/* Mobile + WhatsApp */}
              <div className="mt-2 flex items-center gap-2 text-sm flex-wrap">
                <span className="text-muted-foreground text-xs">Customer:</span>
                <a
                  href={`tel:${order.customer.mo}`}
                  className="font-mono text-[13px] hover:text-primary"
                >
                  {order.customer.mo}
                </a>
                <a
                  href={`https://wa.me/${order.customer.mo.replace(/[^0-9]/g, "")}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 rounded border border-green-400 bg-green-50 px-2 py-0.5 text-[11px] font-medium text-green-700 hover:bg-green-100 transition-colors"
                  title="WhatsApp customer"
                >
                  <svg viewBox="0 0 24 24" className="size-3 fill-green-600" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                  WA
                </a>
              </div>

              {/* Customer note */}
              {order.customer.cn && (
                <div className="mt-1.5 rounded bg-amber-50 px-2 py-1 text-amber-800 text-xs dark:bg-amber-900/20 dark:text-amber-300">
                  {order.customer.cn}
                </div>
              )}

              {/* Driver action buttons — highlight next expected action */}
              <div className="mt-3 flex flex-wrap gap-2">
                {DRIVER_ACTIONS.map((action, i) => {
                  const Icon = action.icon;
                  const doneTypes = order.events.map((e) => e.type);
                  const alreadyDone = doneTypes.includes(action.eventType);
                  const prevDone = i === 0 || doneTypes.includes(DRIVER_ACTIONS[i - 1].eventType);
                  const isNext = !alreadyDone && prevDone;
                  return (
                    <Button
                      key={action.label}
                      variant={isNext ? "default" : "outline"}
                      size="sm"
                      className={`h-8 gap-1.5 text-xs ${alreadyDone ? "opacity-40" : ""}`}
                      onClick={() => handleDriverAction(order.id, action)}
                    >
                      <Icon className="size-3.5" />
                      {alreadyDone ? "✓ " : ""}{t[action.label as keyof typeof t] as string ?? action.label}
                    </Button>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <Sheet open={!!selectedOrder} onOpenChange={(open) => { if (!open) setSelectedId(null); }}>
        <SheetContent side="right" className="w-full w-[440px] max-w-[92vw] p-0 overflow-hidden flex flex-col">
          {selectedOrder && user && (
            <OrderTicket
              order={selectedOrder}
              role={user.role}
              onNew={() => setSelectedId(null)}
              onClose={() => setSelectedId(null)}
            />
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}

function StatCard({ label, value, color }: { label: string; value: string | number; color: string }) {
  return (
    <div className="rounded-lg border bg-card p-3 text-center">
      <p className={`font-bold text-lg ${color}`}>{value}</p>
      <p className="text-muted-foreground text-xs">{label}</p>
    </div>
  );
}