"use client";

import { useEffect, useState } from "react";

import { ChefHat, Clock, MapPin, Package } from "lucide-react";

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

const KITCHEN_STAGES: { stage: OrderStage; label: string; color: string }[] = [
  { stage: "sent_to_kitchen", label: "Sent to Kitchen", color: "border-orange-300 dark:border-orange-700" },
  { stage: "preparing", label: "Preparing", color: "border-amber-400 dark:border-amber-600" },
  { stage: "ready", label: "Ready", color: "border-green-400 dark:border-green-600" },
];

export default function KitchenPage() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<"kanban" | "tickets">("kanban");
  const t = useT();
  const { lang } = useLanguage();

  const orders = useOrdersStore((s) => s.orders);
  const updateItemStates = useOrdersStore((s) => s.updateItemStates);

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

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

  const ordersByStage = Object.fromEntries(
    KITCHEN_STAGES.map(({ stage }) => [
      stage,
      orders
        .filter((o) => o.stage === stage)
        .sort((a, b) => {
          if (a.requestedAt && b.requestedAt) {
            return new Date(a.requestedAt).getTime() - new Date(b.requestedAt).getTime();
          }
          return new Date(a.orderedAt).getTime() - new Date(b.orderedAt).getTime();
        }),
    ]),
  ) as Record<OrderStage, Order[]>;

  const totalKitchen = KITCHEN_STAGES.reduce((acc, { stage }) => acc + (ordersByStage[stage]?.length ?? 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.kitchen_queue}</h1>
          <p className="text-muted-foreground text-sm">{totalKitchen} {t.kitchen_orders_in}</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setViewMode((v) => (v === "kanban" ? "tickets" : "kanban"))}
            className="rounded-lg border px-2.5 py-1 text-[11px] font-semibold transition-colors hover:bg-muted/50"
            title={viewMode === "kanban" ? "Switch to 6-column tickets" : "Switch to kanban"}
          >
            {viewMode === "kanban" ? "⊞ Tickets" : "≡ Kanban"}
          </button>
          <ChefHat className="size-6 text-muted-foreground" />
        </div>
      </div>

      {/* 6-column narrow tickets view */}
      {viewMode === "tickets" && (
        <div className="flex-1 overflow-auto">
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
            {KITCHEN_STAGES.flatMap(({ stage }) => ordersByStage[stage] ?? []).map((order) => (
              <TicketCard key={order.id} order={order} onClick={() => setSelectedId(order.id)} />
            ))}
            {totalKitchen === 0 && (
              <div className="col-span-full flex flex-col items-center justify-center py-16 text-muted-foreground">
                <Package className="size-10 mb-3 opacity-30" />
                <p className="text-sm">{t.kitchen_no_orders}</p>
              </div>
            )}
          </div>
        </div>
      )}

      {/* 3-column kanban */}
      {viewMode === "kanban" && (
      <div className="grid flex-1 grid-cols-1 gap-3 overflow-auto md:grid-cols-3">
        {KITCHEN_STAGES.map(({ stage, label, color }) => {
          const colOrders = ordersByStage[stage] ?? [];
          return (
            <div key={stage} className={`flex flex-col gap-2 rounded-xl border-2 bg-muted/20 p-3 ${color}`}>
              <div className="flex items-center justify-between">
                <h2 className="font-semibold text-sm">{stageLabel(stage, "delivery", lang)}</h2>
                <span className="rounded-full bg-foreground/10 px-2 py-0.5 font-bold text-xs">
                  {colOrders.length}
                </span>
              </div>

              {colOrders.length === 0 && (
                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
                  <Package className="size-8 mb-2 opacity-30" />
                  <p className="text-xs">No orders</p>
                </div>
              )}

              {colOrders.map((order) => (
                <KitchenCard
                  key={order.id}
                  order={order}
                  isSelected={selectedId === order.id}
                  onClick={() => setSelectedId(order.id)}
                  onItemSet={(code, state) => {
                    const updated = { ...(order.itemStates ?? {}), [code]: state };
                    updateItemStates(order.id, updated);
                  }}
                />
              ))}
            </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 KitchenCard({
  order,
  isSelected,
  onClick,
  onItemSet,
}: {
  order: Order;
  isSelected: boolean;
  onClick: () => void;
  onItemSet: (code: string, state: "cooking" | "done") => void;
}) {
  const { lang } = useLanguage();
  const t = useT();
  const requestedTime = order.requestedAt
    ? new Date(order.requestedAt).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })
    : null;
  const isUrgent = order.requestedAt
    ? new Date(order.requestedAt).getTime() - Date.now() < 10 * 60 * 1000
    : false;

  const doneCount    = order.items.filter((i) => order.itemStates?.[i.code] === "done").length;
  const cookingCount = order.items.filter((i) => order.itemStates?.[i.code] === "cooking").length;
  const totalCount   = order.items.length;

  return (
    <div className={`rounded-lg border bg-card overflow-hidden transition-all ${
      isSelected ? "border-primary ring-1 ring-primary/30" : ""
    } ${isUrgent ? "border-red-400 dark:border-red-600" : ""}`}>

      {/* Header — tap to open full ticket */}
      <button
        type="button"
        onClick={onClick}
        className="w-full px-3 pt-3 pb-2 text-left hover:bg-muted/30 transition-colors"
      >
        {/* Row 1: order ID + type badge + time */}
        <div className="flex items-center gap-1.5">
          <span className="font-mono font-bold text-xs text-muted-foreground">{order.id}</span>
          <span className={`rounded border px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${
            order.type === "delivery"
              ? "border-blue-200 bg-blue-500/10 text-blue-700 dark:text-blue-400"
              : "border-green-200 bg-green-500/10 text-green-700 dark:text-green-400"
          }`}>
            {order.type === "delivery" ? t.type_delivery : t.type_collection}
          </span>
          {requestedTime && (
            <div className={`ml-auto flex items-center gap-1 text-[11px] shrink-0 ${isUrgent ? "font-bold text-red-600" : "text-muted-foreground"}`}>
              <Clock className="size-3" />
              {requestedTime}
            </div>
          )}
        </div>
        {/* Row 2: customer name */}
        <p className="mt-1 font-bold text-sm">{order.customer.na}</p>

        {/* Per-item progress dots */}
        <div className="mt-2 flex gap-1">
          {order.items.map((item, i) => {
            const s = order.itemStates?.[item.code];
            return (
              <div key={i} className={`h-1.5 flex-1 rounded-full ${
                s === "done" ? "bg-green-500" : s === "cooking" ? "bg-amber-400" : "bg-muted"
              }`} />
            );
          })}
        </div>
        <p className="mt-1 text-[10px] text-muted-foreground">
          {doneCount === totalCount
            ? t.kitchen_all_done
            : t.kitchen_progress(doneCount, cookingCount, totalCount - doneCount - cookingCount)}
        </p>
      </button>

      {/* Item rows — explicit action buttons */}
      <div className="divide-y border-t">
        {order.items.map((item, i) => {
          const state = order.itemStates?.[item.code];
          return (
            <div
              key={`${item.code}-${i}`}
              className={`flex items-center gap-2 px-3 py-2 transition-colors ${
                state === "done"    ? "bg-green-50 dark:bg-green-900/20" :
                state === "cooking" ? "bg-amber-50 dark:bg-amber-900/20" : ""
              }`}
            >
              {/* Item info */}
              <div className="flex-1 min-w-0">
                <div className="flex items-baseline gap-1">
                  <span className={`font-bold text-sm leading-tight ${state === "done" ? "line-through text-muted-foreground" : ""}`}>
                    {lang === "zh" ? item.chineseName : item.description}
                  </span>
                  <span className={`text-sm font-bold ${state === "done" ? "text-muted-foreground" : "text-foreground"}`}>
                    ×{item.qty}
                  </span>
                </div>
                {item.notes && (
                  <p className="text-[11px] font-medium text-amber-700 dark:text-amber-400">{item.notes}</p>
                )}
              </div>

              {/* Action button — one clear action per state */}
              {!state && (
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); onItemSet(item.code, "cooking"); }}
                  className="shrink-0 rounded-full bg-amber-100 hover:bg-amber-200 dark:bg-amber-900/40 dark:hover:bg-amber-900/60 px-3 py-1 text-[11px] font-bold text-amber-700 dark:text-amber-400 transition-colors"
                >
                  {t.kitchen_start}
                </button>
              )}
              {state === "cooking" && (
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); onItemSet(item.code, "done"); }}
                  className="shrink-0 rounded-full bg-green-500 hover:bg-green-600 px-3 py-1 text-[11px] font-bold text-white transition-colors"
                >
                  {t.kitchen_done}
                </button>
              )}
              {state === "done" && (
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); onItemSet(item.code, "cooking"); }}
                  className="shrink-0 rounded-full border bg-background hover:bg-muted px-3 py-1 text-[11px] font-semibold text-muted-foreground transition-colors"
                >
                  {t.kitchen_undo}
                </button>
              )}
            </div>
          );
        })}
      </div>

      {order.type === "delivery" && order.address && (
        <div className="flex items-center gap-1 border-t px-3 py-1.5 text-muted-foreground text-[11px]">
          <MapPin className="size-3 shrink-0" />
          <span className="truncate">{order.address.ad}</span>
        </div>
      )}
    </div>
  );
}

function TicketCard({ order, onClick }: { order: Order; onClick: () => void }) {
  const { lang } = useLanguage();
  const t = useT();
  const requestedTime = order.requestedAt
    ? new Date(order.requestedAt).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })
    : null;
  const isUrgent = order.requestedAt
    ? new Date(order.requestedAt).getTime() - Date.now() < 10 * 60 * 1000
    : false;
  const stageBorder =
    order.stage === "sent_to_kitchen" ? "border-orange-400 dark:border-orange-600" :
    order.stage === "preparing"       ? "border-amber-400 dark:border-amber-600" :
                                        "border-green-400 dark:border-green-600";

  return (
    <button
      type="button"
      onClick={onClick}
      className={`w-full rounded-lg border-2 bg-card p-2 text-left transition-all hover:shadow-sm ${stageBorder} ${isUrgent ? "ring-1 ring-red-500" : ""}`}
    >
      <div className="font-mono font-bold text-[9px] text-muted-foreground truncate">{order.id}</div>
      <div className="font-bold text-[13px] truncate mt-0.5">{order.customer.na}</div>
      {requestedTime && (
        <div className={`text-[10px] font-semibold mt-0.5 ${isUrgent ? "text-red-600" : "text-muted-foreground"}`}>
          ⏰ {requestedTime}
        </div>
      )}
      <div className="mt-1.5 space-y-0.5 border-t pt-1.5">
        {order.items.map((item, i) => {
          const state = order.itemStates?.[item.code];
          return (
            <div
              key={`${item.code}-${i}`}
              className={`text-[11px] leading-tight ${
                state === "done"    ? "line-through text-muted-foreground" :
                state === "cooking" ? "text-amber-700 font-semibold dark:text-amber-400" : ""
              }`}
            >
              {lang === "zh" ? item.chineseName : item.description} ×{item.qty}
              {item.notes && <span className="ml-1 text-[10px] text-amber-600 italic">({item.notes})</span>}
            </div>
          );
        })}
      </div>
      <div className={`mt-1.5 inline-block rounded px-1 py-0.5 text-[9px] font-bold uppercase ${
        order.type === "delivery"
          ? "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
          : "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300"
      }`}>
        {order.type === "delivery" ? t.type_delivery : t.type_collection}
      </div>
    </button>
  );
}