"use client";

import { useEffect, useState, useRef, useCallback } from "react";
import Image from "next/image";
import { MagnifyingGlass, X, BellRinging } from "@phosphor-icons/react";

/* ─── Constants ──────────────────────────────────────────────────── */

const ORDER_STATUSES = [
  { key: "all",            label: "Toutes"          },
  { key: "pending",        label: "En attente"      },
  { key: "payment_review", label: "Vérif. paiement" },
  { key: "confirmed",      label: "Confirmées"      },
  { key: "delivered",      label: "Livrées"         },
];

const STATUS_LABEL: Record<string, string> = {
  pending:        "En attente",
  confirmed:      "Confirmée",
  delivered:      "Livrée",
  payment_review: "Vérif. paiement",
};

const STATUS_COLOR: Record<string, string> = {
  pending:        "bg-yellow-100 text-yellow-700 border-yellow-200",
  confirmed:      "bg-blue-100   text-blue-700   border-blue-200",
  delivered:      "bg-green-100  text-green-700  border-green-200",
  payment_review: "bg-orange-100 text-orange-600 border-orange-200",
};

interface Order {
  id:                 number;
  customer_name:      string;
  customer_email:     string;
  items:              { name: string; quantity: number; price: number; size?: string }[];
  total:              number;
  status:             string;
  phone:              string;
  address:            string;
  notes:              string;
  created_at:         string;
  payment_method:     string;
  payment_screenshot: string;
  review_rating?:     number | null;
  review_comment?:    string | null;
}

/* ─── Page ───────────────────────────────────────────────────────── */

function playNotificationSound() {
  try {
    const ctx = new AudioContext();
    // Two clear "ding" hits — each with a sharp attack and long natural decay
    [[1047, 0], [1319, 0.55]].forEach(([freq, delay]) => {
      const osc      = ctx.createOscillator();
      const gain     = ctx.createGain();
      // Add a second harmonic for a bell-like timbre
      const osc2     = ctx.createOscillator();
      const gain2    = ctx.createGain();
      osc.connect(gain);
      osc2.connect(gain2);
      gain.connect(ctx.destination);
      gain2.connect(ctx.destination);
      osc.type  = "sine";
      osc2.type = "sine";
      osc.frequency.setValueAtTime(freq, ctx.currentTime + delay);
      osc2.frequency.setValueAtTime(freq * 2.756, ctx.currentTime + delay); // inharmonic partial
      // Main tone
      gain.gain.setValueAtTime(0, ctx.currentTime + delay);
      gain.gain.linearRampToValueAtTime(0.45, ctx.currentTime + delay + 0.008);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 1.6);
      // Harmonic (softer, decays faster)
      gain2.gain.setValueAtTime(0, ctx.currentTime + delay);
      gain2.gain.linearRampToValueAtTime(0.15, ctx.currentTime + delay + 0.008);
      gain2.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 0.6);
      osc.start(ctx.currentTime + delay);
      osc2.start(ctx.currentTime + delay);
      osc.stop(ctx.currentTime + delay + 1.7);
      osc2.stop(ctx.currentTime + delay + 0.7);
    });
  } catch { /* browser may block AudioContext without user interaction */ }
}

export default function CommandesPage() {
  const [orders,        setOrders]        = useState<Order[]>([]);
  const [ordersLoading, setOrdersLoading] = useState(false);
  const [orderFilter,   setOrderFilter]   = useState("all");
  const [updatingOrder, setUpdatingOrder] = useState<number | null>(null);
  const [orderPage,     setOrderPage]     = useState(1);
  const [orderTotal,    setOrderTotal]    = useState(0);
  const [orderPages,    setOrderPages]    = useState(1);
  const [search,        setSearch]        = useState("");
  const [newOrderIds,   setNewOrderIds]   = useState<Set<number>>(new Set());
  const [newOrderCount, setNewOrderCount] = useState(0);
  const knownMaxId  = useRef<number>(0);
  const filterRef   = useRef("all");
  const pageRef     = useRef(1);
  const searchRef   = useRef("");
  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const pollTimer   = useRef<ReturnType<typeof setInterval> | null>(null);

  const loadOrders = useCallback(async (status = filterRef.current, page = pageRef.current, q = searchRef.current) => {
    setOrdersLoading(true);
    filterRef.current = status;
    pageRef.current   = page;
    searchRef.current = q;
    const params = new URLSearchParams({ status, page: String(page) });
    if (q.trim()) params.set("search", q.trim());
    const res  = await fetch(`/api/admin/orders?${params}`);
    const data = await res.json();
    const fetched: Order[] = data.orders ?? [];
    setOrders(fetched);
    setOrderTotal(data.total ?? 0);
    setOrderPages(data.pages ?? 1);
    setOrderPage(page);
    setOrdersLoading(false);
    // Seed the known max on first load
    if (fetched.length > 0) {
      knownMaxId.current = Math.max(knownMaxId.current, ...fetched.map(o => o.id));
    }
  }, []);

  /* Silent background poll — only checks for new orders, doesn't disrupt current view */
  const pollForNew = useCallback(async () => {
    try {
      const res  = await fetch("/api/admin/orders?status=all&page=1");
      const data = await res.json();
      const fetched: Order[] = data.orders ?? [];
      const incoming = fetched.filter(o => o.id > knownMaxId.current);
      if (incoming.length === 0) return;

      playNotificationSound();
      const ids = new Set(incoming.map(o => o.id));
      knownMaxId.current = Math.max(...fetched.map(o => o.id));
      setNewOrderCount(c => c + incoming.length);
      setNewOrderIds(prev => new Set([...prev, ...ids]));

      // Only prepend if admin is on page 1 with no filters / search
      if (filterRef.current === "all" && pageRef.current === 1 && !searchRef.current.trim()) {
        setOrders(prev => {
          const existingIds = new Set(prev.map(o => o.id));
          const toAdd = incoming.filter(o => !existingIds.has(o.id));
          return toAdd.length ? [...toAdd, ...prev] : prev;
        });
        setOrderTotal(t => t + incoming.length);
      }

      // Remove highlight after 6s
      setTimeout(() => {
        setNewOrderIds(prev => {
          const next = new Set(prev);
          ids.forEach(id => next.delete(id));
          return next;
        });
      }, 6000);
    } catch { /* ignore network errors */ }
  }, []);

  const updateOrderStatus = async (id: number, status: string) => {
    setUpdatingOrder(id);
    const res = await fetch(`/api/admin/orders/${id}`, {
      method:  "PATCH",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ status }),
    });
    if (res.ok) {
      // Update only this order in state — no full reload
      setOrders(prev => prev.map(o => o.id === id ? { ...o, status } : o));
    }
    setUpdatingOrder(null);
  };

  const handleSearch = (val: string) => {
    setSearch(val);
    searchRef.current = val;
    if (searchTimer.current) clearTimeout(searchTimer.current);
    searchTimer.current = setTimeout(() => loadOrders(filterRef.current, 1, val), 400);
  };

  useEffect(() => {
    loadOrders("all", 1, "");
    pollTimer.current = setInterval(pollForNew, 10_000);
    return () => { if (pollTimer.current) clearInterval(pollTimer.current); };
  }, [loadOrders, pollForNew]);

  return (
    <main className="max-w-5xl mx-auto px-4 py-6 space-y-5">
      <div className="space-y-4">

        {/* Filter + search + count */}
        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
          <div className="flex gap-2 overflow-x-auto scrollbar-hide flex-1">
            {ORDER_STATUSES.map(s => (
              <button
                key={s.key}
                onClick={() => { setOrderFilter(s.key); filterRef.current = s.key; loadOrders(s.key, 1, searchRef.current); }}
                className={`flex-shrink-0 text-xs font-bold px-4 py-2 rounded-xl transition-all duration-200 ${
                  orderFilter === s.key
                    ? "bg-brand-dark text-brand-yellow"
                    : "bg-white text-brand-dark/60 hover:text-brand-dark border border-brand-dark/10"
                }`}
              >
                {s.label}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-3 flex-shrink-0">
            <div className="relative">
              <MagnifyingGlass size={13} weight="bold" className="absolute left-3 top-1/2 -translate-y-1/2 text-brand-dark/35 pointer-events-none" />
              <input
                type="text"
                value={search}
                onChange={e => handleSearch(e.target.value)}
                placeholder="N° commande…"
                className="pl-8 pr-7 py-2 rounded-xl bg-white border border-brand-dark/10 text-xs text-brand-dark placeholder:text-brand-dark/30 focus:outline-none focus:border-brand-dark/30 transition-all w-36"
              />
              {search && (
                <button onClick={() => { setSearch(""); loadOrders(orderFilter, 1, ""); }} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-brand-dark/30 hover:text-brand-dark transition-colors">
                  <X size={11} weight="bold" />
                </button>
              )}
            </div>
            {!ordersLoading && (
              <span className="text-brand-dark/50 text-xs font-semibold whitespace-nowrap">
                {orderTotal} commande{orderTotal !== 1 ? "s" : ""}
              </span>
            )}
          </div>
        </div>

        {/* New order toast */}
        {newOrderCount > 0 && (
          <div className="flex items-center gap-3 bg-brand-yellow/20 border border-brand-yellow rounded-2xl px-4 py-3 animate-pulse-once">
            <BellRinging size={18} weight="fill" className="text-brand-dark flex-shrink-0" />
            <span className="text-brand-dark text-sm font-bold flex-1">
              {newOrderCount} nouvelle{newOrderCount > 1 ? "s" : ""} commande{newOrderCount > 1 ? "s" : ""} reçue{newOrderCount > 1 ? "s" : ""}
            </span>
            <button
              onClick={() => { setNewOrderCount(0); setNewOrderIds(new Set()); }}
              className="text-brand-dark/40 hover:text-brand-dark transition-colors"
            >
              <X size={14} weight="bold" />
            </button>
          </div>
        )}

        {/* Orders list */}
        {ordersLoading ? (
          <div className="text-center py-16 text-brand-dark/40 text-sm">Chargement…</div>
        ) : orders.length === 0 ? (
          <div className="text-center py-20 bg-white rounded-3xl border border-brand-dark/8">
            <p className="text-brand-dark/40 text-sm">Aucune commande</p>
          </div>
        ) : (
          <div className="space-y-3">
            {orders.map(order => (
              <div
                key={order.id}
                className={`rounded-2xl border overflow-hidden transition-colors duration-1000 ${
                  newOrderIds.has(order.id)
                    ? "bg-brand-yellow/10 border-brand-yellow"
                    : "bg-white border-brand-dark/10"
                }`}
              >

                {/* Header row */}
                <div className="flex items-center justify-between gap-3 px-5 py-4 flex-wrap">
                  <div className="flex items-center gap-3 flex-wrap">
                    <span className="font-bold text-brand-dark text-base" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                      #{String(order.id).padStart(4, "0")}
                    </span>
                    <span className={`text-xs font-bold px-3 py-1 rounded-full border ${STATUS_COLOR[order.status] ?? STATUS_COLOR.pending}`}>
                      {STATUS_LABEL[order.status] ?? order.status}
                    </span>
                    {order.payment_method && (
                      <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-brand-dark/6 text-brand-dark/70 border border-brand-dark/10 capitalize">
                        {order.payment_method}
                      </span>
                    )}
                  </div>
                  <span className="font-bold text-brand-dark text-base" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                    {Number(order.total).toLocaleString("fr-MR")} MRU
                  </span>
                </div>

                {/* Customer + date */}
                <div className="px-5 pb-3 flex items-center justify-between gap-3 flex-wrap -mt-2">
                  <div>
                    <p className="text-brand-dark text-sm font-semibold">{order.customer_name}</p>
                    <p className="text-brand-dark/55 text-xs">{order.customer_email}</p>
                  </div>
                  <p className="text-brand-dark/55 text-xs">
                    {new Date(order.created_at).toLocaleDateString("fr-FR", { day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" })}
                  </p>
                </div>

                {/* Items */}
                <div className="border-t border-brand-dark/8 px-5 py-3 space-y-1.5">
                  {order.items.map((item, i) => (
                    <div key={i} className="flex justify-between items-center text-sm">
                      <span className="text-brand-dark font-medium">
                        {item.name}{item.size ? ` (${item.size})` : ""} <span className="text-brand-dark/50">× {item.quantity}</span>
                      </span>
                      <span className="text-brand-dark font-semibold">{(item.price * item.quantity).toLocaleString("fr-MR")} MRU</span>
                    </div>
                  ))}
                </div>

                {/* Contact */}
                <div className="border-t border-brand-dark/8 px-5 py-3 grid grid-cols-1 sm:grid-cols-2 gap-1.5 text-sm">
                  <p className="text-brand-dark/70"><span className="font-semibold text-brand-dark">Tél :</span> {order.phone}</p>
                  <p className="text-brand-dark/70 sm:col-span-2"><span className="font-semibold text-brand-dark">Adresse :</span> {order.address}</p>
                  {order.notes && <p className="text-brand-dark/70 sm:col-span-2"><span className="font-semibold text-brand-dark">Notes :</span> {order.notes}</p>}
                </div>

                {/* Review — delivered orders only */}
                {order.status === "delivered" && order.review_rating && (
                  <div className="border-t border-brand-dark/8 px-5 py-3 flex items-center gap-3 bg-green-50/60">
                    <div className="flex gap-0.5">
                      {[1,2,3,4,5].map(s => (
                        <span key={s} className={`text-sm ${s <= order.review_rating! ? "text-brand-yellow" : "text-brand-dark/15"}`}>★</span>
                      ))}
                    </div>
                    {order.review_comment && (
                      <p className="text-brand-dark/55 text-xs italic">&quot;{order.review_comment}&quot;</p>
                    )}
                  </div>
                )}

                {/* Payment screenshot + status actions */}
                <div className="border-t border-brand-dark/8 px-5 py-3 flex items-center justify-between gap-3 flex-wrap bg-brand-sand-light/40">
                  {order.payment_screenshot ? (
                    <a href={order.payment_screenshot} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 group">
                      <div className="relative w-10 h-10 rounded-lg overflow-hidden border border-brand-dark/15 flex-shrink-0">
                        <Image src={order.payment_screenshot} alt="reçu" fill className="object-cover" />
                      </div>
                      <span className="text-xs font-semibold text-brand-dark/60 group-hover:text-brand-dark transition-colors underline underline-offset-2">
                        Voir le reçu
                      </span>
                    </a>
                  ) : <div />}

                  <div className="flex gap-2 flex-wrap">
                    {["payment_review", "pending", "confirmed", "delivered"].map(s => (
                      <button
                        key={s}
                        disabled={order.status === s || updatingOrder === order.id}
                        onClick={() => updateOrderStatus(order.id, s)}
                        className={`text-xs font-bold px-3.5 py-1.5 rounded-full border transition-all disabled:opacity-40 ${
                          order.status === s
                            ? STATUS_COLOR[s]
                            : "border-brand-dark/20 text-brand-dark/60 hover:border-brand-dark hover:text-brand-dark bg-white"
                        }`}
                      >
                        {updatingOrder === order.id && order.status !== s
                          ? <span className="inline-block w-3 h-3 border-2 border-current/30 border-t-current rounded-full animate-spin" />
                          : STATUS_LABEL[s]
                        }
                      </button>
                    ))}
                  </div>
                </div>

              </div>
            ))}
          </div>
        )}

        {/* Pagination */}
        {orderPages > 1 && (
          <div className="flex items-center justify-between gap-3 pt-2">
            <span className="text-brand-dark/50 text-xs">
              Page {orderPage} sur {orderPages}
            </span>
            <div className="flex gap-2">
              <button
                disabled={orderPage <= 1 || ordersLoading}
                onClick={() => loadOrders(orderFilter, orderPage - 1, search)}
                className="px-4 py-2 rounded-xl text-xs font-bold bg-white border border-brand-dark/10 text-brand-dark/60 hover:text-brand-dark disabled:opacity-30 transition-all"
              >
                ← Précédent
              </button>
              <button
                disabled={orderPage >= orderPages || ordersLoading}
                onClick={() => loadOrders(orderFilter, orderPage + 1, search)}
                className="px-4 py-2 rounded-xl text-xs font-bold bg-white border border-brand-dark/10 text-brand-dark/60 hover:text-brand-dark disabled:opacity-30 transition-all"
              >
                Suivant →
              </button>
            </div>
          </div>
        )}

      </div>
    </main>
  );
}