"use client";

import { Fragment, useEffect, useState } from "react";
import AppShell, { Me } from "@/components/AppShell";
import MessageThread from "@/components/MessageThread";
import { api, rupiah, markMsgRead } from "@/lib/client";

interface Product { id: string; name: string; unit: string }
interface Customer { id: string; name: string; phone?: string; address?: string; notes?: string; isActive?: boolean }
interface PriceRow { productId: string; price: number }
interface Courier { id: string; name: string }
interface OrderItem {
  id: string; quantity: number; priceAtTransaction: number; returnedQuantity: number; product: Product;
}
interface DeliveryProof {
  id: string; photoUrl: string; recipientName?: string; conditionNotes?: string; uploadedAt: string;
}
interface Delivery { id: string; status: string; courier?: { name: string }; proofs: DeliveryProof[] }
interface CourierTaskRow { id: string; status: string; assignedAt: string; order: { customer: { name: string } } }
interface Order {
  id: string; status: string; totalAmount: number; createdAt: string; updatedAt: string; isArchived: boolean;
  paymentStatus: string; paymentMethod?: string;
  customer: Customer; items: OrderItem[]; deliveries: Delivery[];
}
interface BranchStock {
  id: string; quantityAvailable: number; quantityReserved: number; quantityDamaged: number; product: Product;
}

const TERMINAL_STATUSES = ["delivered", "cancelled", "failed_delivery", "partially_returned"];
const LOW_STOCK = 100;
const HIGH_STOCK = 2000;
const PAYMENT_METHODS = [
  { value: "cash", label: "Tunai" },
  { value: "transfer", label: "Transfer" },
  { value: "lainnya", label: "Lainnya" },
];

const STATUS_STYLE: Record<string, string> = {
  draft: "bg-slate-100 text-slate-600",
  confirmed: "bg-blue-100 text-blue-700",
  assigned: "bg-indigo-100 text-indigo-700",
  on_delivery: "bg-amber-100 text-amber-700",
  delivered: "bg-green-100 text-green-700",
  partially_returned: "bg-amber-100 text-amber-700",
  failed_delivery: "bg-red-100 text-red-700",
  cancelled: "bg-slate-200 text-slate-600",
};
const ORDER_STATUS_LABEL: Record<string, string> = {
  draft: "Draf",
  confirmed: "Dikonfirmasi",
  assigned: "Kurir Ditugaskan",
  on_delivery: "Sedang Diantar",
  delivered: "Terkirim",
  partially_returned: "Sebagian Diretur",
  failed_delivery: "Gagal Terkirim",
  cancelled: "Dibatalkan",
};
const DELIVERY_STATUS_LABEL: Record<string, string> = {
  waiting: "Belum berangkat",
  on_the_way: "Sedang diantar",
  delivered: "Sudah sampai",
  partially_delivered: "Sebagian sampai",
  failed: "Gagal diantar",
};
const DELIVERY_STATUS_STYLE: Record<string, string> = {
  waiting: "bg-slate-100 text-slate-600",
  on_the_way: "bg-amber-100 text-amber-700",
  delivered: "bg-green-100 text-green-700",
  partially_delivered: "bg-amber-100 text-amber-700",
  failed: "bg-red-100 text-red-700",
};

export default function BranchPage() {
  const [tab, setTab] = useState<"orders" | "stock" | "customers" | "messages">("orders");
  const [me, setMe] = useState<Me | null>(null);

  // Lonceng notifikasi bisa membuka tab Pesan: lewat ?tab=pesan (dari halaman
  // lain) atau event "open-pesan" (saat sudah berada di halaman ini).
  useEffect(() => {
    if (new URLSearchParams(window.location.search).get("tab") === "pesan") setTab("messages");
    const handler = () => setTab("messages");
    window.addEventListener("open-pesan", handler);
    return () => window.removeEventListener("open-pesan", handler);
  }, []);

  // Membuka tab Pesan = menandai pesan sudah dibaca (badge lonceng ke 0).
  useEffect(() => {
    if (tab === "messages" && me) markMsgRead(me.id);
  }, [tab, me]);

  return (
    <AppShell title="Panel Cabang" onMe={setMe}>
      <div className="mb-4 flex flex-wrap gap-2">
        <TabBtn active={tab === "orders"} onClick={() => setTab("orders")}>Beranda</TabBtn>
        <TabBtn active={tab === "stock"} onClick={() => setTab("stock")}>Stok</TabBtn>
        <TabBtn active={tab === "customers"} onClick={() => setTab("customers")}>Pelanggan</TabBtn>
        <TabBtn active={tab === "messages"} onClick={() => setTab("messages")}>💬 Pesan ke Pusat</TabBtn>
      </div>
      {tab === "orders" ? (
        <OrdersTab />
      ) : tab === "stock" ? (
        <StockTab />
      ) : tab === "customers" ? (
        <CustomersTab />
      ) : (
        <div className="card">
          <MessageThread branchId={me?.branchId ?? null} />
        </div>
      )}
    </AppShell>
  );
}

function TabBtn({ active, ...p }: any) {
  return (
    <button
      {...p}
      className={`btn text-sm ${active ? "bg-brand-600 text-white" : "border border-slate-300 bg-white"}`}
    />
  );
}

/* ------------------------------ ORDERS TAB ------------------------------ */
function OrdersTab() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [prices, setPrices] = useState<Record<string, number>>({});
  const [couriers, setCouriers] = useState<Courier[]>([]);
  const [msg, setMsg] = useState("");
  const [showArchived, setShowArchived] = useState(false);
  const [stocks, setStocks] = useState<BranchStock[]>([]);

  const loadOrders = () => {
    api<Order[]>(`/api/orders?archived=${showArchived ? "1" : "0"}`).then(setOrders);
    // Stok ikut di-refresh: order baru/retur/kirim mengubah saldo stok.
    api<BranchStock[]>("/api/stocks").then(setStocks).catch(() => {});
  };
  useEffect(() => {
    loadOrders();
  }, [showArchived]);
  useEffect(() => {
    api<Product[]>("/api/products").then(setProducts);
    api<Customer[]>("/api/customers").then(setCustomers);
    api<Courier[]>("/api/users?role=courier").then(setCouriers);
    api<any[]>("/api/price-lists").then((rows) => {
      const m: Record<string, number> = {};
      rows.forEach((r) => { if (r.validTo === null) m[r.productId] = r.price; });
      setPrices(m);
    });
  }, []);

  // new order form state
  const [customerId, setCustomerId] = useState("");
  const [customerQuery, setCustomerQuery] = useState("");
  const [showCustomerSuggestions, setShowCustomerSuggestions] = useState(false);
  const [lines, setLines] = useState<{ productId: string; quantity: number }[]>([]);
  const [notes, setNotes] = useState("");
  const [paymentMethod, setPaymentMethod] = useState("cash");

  const customerLabel = (c: Customer) => c.name + (c.phone ? ` (${c.phone})` : "");
  const filteredCustomers = customerQuery.trim()
    ? customers.filter((c) =>
        c.name.toLowerCase().includes(customerQuery.trim().toLowerCase()) ||
        (c.phone ?? "").includes(customerQuery.trim())
      )
    : customers;

  function selectCustomer(c: Customer) {
    setCustomerId(c.id);
    setCustomerQuery(customerLabel(c));
    setShowCustomerSuggestions(false);
  }

  // quick-add pelanggan baru
  const [showNewCustomer, setShowNewCustomer] = useState(false);
  const [newCustomerName, setNewCustomerName] = useState("");
  const [newCustomerPhone, setNewCustomerPhone] = useState("");
  const [newCustomerAddress, setNewCustomerAddress] = useState("");
  const [newCustomerMsg, setNewCustomerMsg] = useState("");

  async function createCustomer() {
    setNewCustomerMsg("");
    try {
      const c = await api<Customer>("/api/customers", {
        method: "POST",
        body: JSON.stringify({
          name: newCustomerName,
          phone: newCustomerPhone || undefined,
          address: newCustomerAddress || undefined,
        }),
      });
      setCustomers((prev) => [...prev, c].sort((a, b) => a.name.localeCompare(b.name)));
      selectCustomer(c);
      setNewCustomerName(""); setNewCustomerPhone(""); setNewCustomerAddress("");
      setShowNewCustomer(false);
    } catch (e: any) { setNewCustomerMsg("✗ " + e.message); }
  }

  // Ketuk produk untuk menambah / menambah jumlah. setQty(0) menghapus item.
  function addProduct(productId: string) {
    setLines((prev) => {
      const existing = prev.find((l) => l.productId === productId);
      if (existing)
        return prev.map((l) => (l.productId === productId ? { ...l, quantity: l.quantity + 1 } : l));
      return [...prev, { productId, quantity: 1 }];
    });
  }
  function setQty(productId: string, quantity: number) {
    setLines((prev) =>
      quantity <= 0
        ? prev.filter((l) => l.productId !== productId)
        : prev.map((l) => (l.productId === productId ? { ...l, quantity } : l))
    );
  }
  const total = lines.reduce((s, l) => s + (prices[l.productId] ?? 0) * l.quantity, 0);

  async function createOrder() {
    setMsg("");
    try {
      await api("/api/orders", {
        method: "POST",
        body: JSON.stringify({
          customerId,
          notes: notes || undefined,
          paymentMethod,
          items: lines.filter((l) => l.productId && l.quantity > 0),
        }),
      });
      setCustomerId(""); setCustomerQuery(""); setLines([]); setNotes(""); setPaymentMethod("cash");
      setMsg("✓ Pesanan dibuat & stok direservasi");
      loadOrders();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  const todayStr = new Date().toDateString();
  const omsetHariIni = orders
    .filter((o) => o.status === "delivered" && new Date(o.updatedAt).toDateString() === todayStr)
    .reduce((s, o) => s + o.totalAmount, 0);
  const orderAktif = orders.filter((o) => !TERMINAL_STATUSES.includes(o.status)).length;
  const menungguBayar = orders.filter((o) => o.status === "delivered" && o.paymentStatus === "unpaid").length;

  return (
    <div className="space-y-4">
      {!showArchived && (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <SummaryCard label="Omset Hari Ini" value={rupiah(omsetHariIni)} />
          <SummaryCard label="Pesanan Aktif" value={String(orderAktif)} />
          <SummaryCard label="Menunggu Bayar" value={String(menungguBayar)} tone={menungguBayar > 0 ? "warn" : "ok"} />
        </div>
      )}

      {/* Stok cabang langsung terlihat di dashboard (kelola lengkap di tab Stok) */}
      {!showArchived && stocks.length > 0 && (
        <section>
          <h2 className="mb-2 text-sm font-semibold text-slate-700">Stok Cabang Saat Ini</h2>
          <div className="card overflow-x-auto p-0">
            <table className="w-full text-sm">
              <thead className="border-b bg-slate-50 text-left text-xs text-slate-500">
                <tr>
                  <th className="px-3 py-2">Produk</th>
                  <th className="px-3 py-2 text-right">Siap Jual</th>
                  <th className="px-3 py-2 text-right">Direservasi</th>
                  <th className="px-3 py-2 text-right">Rusak</th>
                </tr>
              </thead>
              <tbody>
                {stocks.map((s) => (
                  <tr key={s.id} className="border-b last:border-0">
                    <td className="px-3 py-2 font-medium">
                      {s.product.name} <span className="text-xs text-slate-400">/ {s.product.unit}</span>
                      {s.quantityAvailable < LOW_STOCK && (
                        <span className="badge ml-2 bg-red-100 text-red-700">stok kritis</span>
                      )}
                    </td>
                    <td className="px-3 py-2 text-right text-base font-bold">{s.quantityAvailable}</td>
                    <td className="px-3 py-2 text-right text-slate-500">{s.quantityReserved}</td>
                    <td className="px-3 py-2 text-right text-slate-500">{s.quantityDamaged}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      )}
      <div className="grid gap-6 lg:grid-cols-2">
      {/* form */}
      <div className="card space-y-3">
        <h2 className="font-semibold">Buat Pesanan Baru</h2>
        <div>
          <label className="label">Pelanggan (wajib dari daftar)</label>
          <div className="flex gap-2">
            <div className="relative flex-1">
              <input
                className="input w-full"
                placeholder="Ketik untuk cari pelanggan…"
                value={customerQuery}
                onChange={(e) => { setCustomerQuery(e.target.value); setCustomerId(""); setShowCustomerSuggestions(true); }}
                onFocus={() => setShowCustomerSuggestions(true)}
                onBlur={() => setTimeout(() => setShowCustomerSuggestions(false), 150)}
              />
              {showCustomerSuggestions && (
                <div className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded border border-slate-200 bg-white shadow-lg">
                  {filteredCustomers.length === 0 && (
                    <div className="px-3 py-2 text-sm text-slate-400">Tidak ada pelanggan cocok</div>
                  )}
                  {filteredCustomers.map((c) => (
                    <button
                      key={c.id}
                      type="button"
                      className="block w-full px-3 py-2 text-left text-sm hover:bg-slate-100"
                      onMouseDown={() => selectCustomer(c)}
                    >
                      {c.name}{c.phone ? ` (${c.phone})` : ""}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <button className="btn-outline text-xs whitespace-nowrap" onClick={() => setShowNewCustomer((v) => !v)}>
              + Pelanggan Baru
            </button>
          </div>
          {showNewCustomer && (
            <div className="mt-2 space-y-2 rounded border border-slate-200 p-3">
              <input
                className="input" placeholder="Nama pelanggan"
                value={newCustomerName} onChange={(e) => setNewCustomerName(e.target.value)}
              />
              <input
                className="input" placeholder="No. telepon (opsional)"
                value={newCustomerPhone} onChange={(e) => setNewCustomerPhone(e.target.value)}
              />
              <input
                className="input" placeholder="Alamat (opsional)"
                value={newCustomerAddress} onChange={(e) => setNewCustomerAddress(e.target.value)}
              />
              <div className="flex gap-2">
                <button className="btn-primary text-sm" disabled={!newCustomerName.trim()} onClick={createCustomer}>
                  Simpan Pelanggan
                </button>
                <button className="btn-outline text-sm" onClick={() => setShowNewCustomer(false)}>Batal</button>
              </div>
              {newCustomerMsg && <p className="text-sm">{newCustomerMsg}</p>}
            </div>
          )}
        </div>

        <div className="space-y-2">
          <label className="label">Item — ketuk produk untuk menambah</label>
          <div className="grid grid-cols-2 gap-2">
            {products.map((p) => {
              const line = lines.find((l) => l.productId === p.id);
              return (
                <button
                  key={p.id}
                  type="button"
                  onClick={() => addProduct(p.id)}
                  className={`rounded-lg border p-3 text-left transition ${
                    line ? "border-brand-500 bg-brand-50" : "border-slate-200 bg-white hover:bg-slate-50"
                  }`}
                >
                  <p className="text-sm font-medium">{p.name}</p>
                  <p className="text-xs text-slate-500">{rupiah(prices[p.id] ?? 0)}/{p.unit}</p>
                  {line && (
                    <span className="badge mt-1 bg-brand-600 text-white">{line.quantity} {p.unit}</span>
                  )}
                </button>
              );
            })}
          </div>

          {lines.length > 0 && (
            <div className="space-y-1 rounded-lg bg-slate-50 p-2">
              {lines.map((l) => {
                const p = products.find((x) => x.id === l.productId);
                if (!p) return null;
                return (
                  <div key={l.productId} className="flex items-center gap-2">
                    <span className="flex-1 truncate text-sm">{p.name}</span>
                    <button type="button" className="btn-outline px-2 py-0.5 text-base leading-none" onClick={() => setQty(l.productId, l.quantity - 1)}>−</button>
                    <input
                      type="number" min={1}
                      className="w-14 rounded-lg border border-slate-300 py-1 text-center text-sm focus:border-brand-500 focus:outline-none"
                      value={l.quantity}
                      onChange={(e) => setQty(l.productId, Number(e.target.value))}
                    />
                    <button type="button" className="btn-outline px-2 py-0.5 text-base leading-none" onClick={() => setQty(l.productId, l.quantity + 1)}>+</button>
                    <span className="w-24 text-right text-sm font-medium">{rupiah((prices[l.productId] ?? 0) * l.quantity)}</span>
                    <button type="button" className="btn-outline px-2 py-0.5" onClick={() => setQty(l.productId, 0)}>✕</button>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div>
          <label className="label">Catatan</label>
          <input className="input" value={notes} onChange={(e) => setNotes(e.target.value)} />
        </div>
        <div>
          <label className="label">Metode pembayaran</label>
          <select className="input" value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
            {PAYMENT_METHODS.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}
          </select>
        </div>

        <div className="flex items-center justify-between border-t pt-3">
          <span className="text-sm text-slate-500">Total</span>
          <span className="text-lg font-bold">{rupiah(Math.max(0, total))}</span>
        </div>
        <button className="btn-primary w-full" disabled={!customerId || lines.length === 0} onClick={createOrder}>
          Simpan Pesanan
        </button>
        {msg && <p className="text-sm">{msg}</p>}
      </div>

      {/* list */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="font-semibold">{showArchived ? "Pesanan Lama" : "Pesanan Terbaru"}</h2>
          <label className="flex items-center gap-1.5 text-xs text-slate-500">
            <input type="checkbox" checked={showArchived} onChange={(e) => setShowArchived(e.target.checked)} />
            Lihat pesanan lama
          </label>
        </div>
        {orders.length === 0 && (
          <p className="text-sm text-slate-500">
            {showArchived ? "Belum ada pesanan lama." : "Belum ada pesanan."}
          </p>
        )}
        {orders.map((o) => (
          <OrderCard key={o.id} order={o} couriers={couriers} onChange={loadOrders} />
        ))}
      </div>
      </div>
    </div>
  );
}

function SummaryCard({ label, value, tone }: { label: string; value: string; tone?: "ok" | "warn" }) {
  return (
    <div className="card">
      <p className="text-xs text-slate-500">{label}</p>
      <p className={`mt-1 text-xl font-bold ${tone === "warn" ? "text-amber-600" : ""}`}>{value}</p>
    </div>
  );
}

// Tabel sederhana: apa saja yang sudah/akan diantar oleh kurir ini, supaya
// admin cabang tahu beban kurir sebelum menambahkan tugas baru (mis. kurir
// sudah antar ke 2 orang & sedang bawa 2 lagi).
function KurirTaskTable({ courierId, courierName }: { courierId: string; courierName: string }) {
  const [rows, setRows] = useState<CourierTaskRow[] | null>(null);

  useEffect(() => {
    if (!courierId) { setRows(null); return; }
    setRows(null);
    api<CourierTaskRow[]>(`/api/deliveries?courierId=${courierId}`).then((r) => setRows(r.slice(0, 8)));
  }, [courierId]);

  if (!courierId) return null;

  return (
    <div className="rounded-lg border border-slate-200 bg-white p-2">
      <p className="mb-1 text-xs font-medium text-slate-600">📦 Tugas {courierName} saat ini</p>
      {rows === null ? (
        <p className="text-xs text-slate-400">Memuat…</p>
      ) : rows.length === 0 ? (
        <p className="text-xs text-slate-400">Belum pernah dapat tugas antar.</p>
      ) : (
        <table className="w-full text-xs">
          <thead className="text-left text-slate-400">
            <tr>
              <th className="py-1 pr-2">Antar ke</th>
              <th className="py-1 pr-2">Status</th>
              <th className="py-1">Waktu</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((d) => (
              <tr key={d.id} className="border-t border-slate-100">
                <td className="py-1 pr-2">{d.order.customer.name}</td>
                <td className="py-1 pr-2">
                  <span className={`badge ${DELIVERY_STATUS_STYLE[d.status] ?? "bg-slate-100"}`}>
                    {DELIVERY_STATUS_LABEL[d.status] ?? d.status}
                  </span>
                </td>
                <td className="py-1 whitespace-nowrap text-slate-500">
                  {new Date(d.assignedAt).toLocaleString("id-ID", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

function OrderCard({ order, couriers, onChange }: { order: Order; couriers: Courier[]; onChange: () => void }) {
  const [assigning, setAssigning] = useState(false);
  // Kosong sampai admin memilih sendiri kurirnya (kurir 1 / kurir 2 cabang ini).
  const [courierId, setCourierId] = useState("");
  const [msg, setMsg] = useState("");
  const canAssign = order.status === "confirmed";
  // Alamat & no. HP tujuan ikut data pelanggan yang sudah diisi saat buat
  // order — tidak perlu diketik ulang di sini. Kalau kosong, admin harus
  // melengkapinya lebih dulu di tab Pelanggan.
  const destinationAddress = order.customer.address ?? "";
  const destinationPhone = order.customer.phone ?? "";

  const [cancelling, setCancelling] = useState(false);
  const [cancelReason, setCancelReason] = useState("");
  const canArchive = TERMINAL_STATUSES.includes(order.status);

  const [marking, setMarking] = useState(false);

  const [returning, setReturning] = useState(false);
  const [returnQty, setReturnQty] = useState<Record<string, string>>({});
  const [returnDamaged, setReturnDamaged] = useState<Record<string, boolean>>({});
  const [returnReason, setReturnReason] = useState("");
  const returnableItems = order.items.filter((it) => it.quantity - it.returnedQuantity > 0);
  const canReturn = ["delivered", "partially_returned"].includes(order.status) && returnableItems.length > 0;

  async function setArchived(isArchived: boolean) {
    setMsg("");
    try {
      await api(`/api/orders/${order.id}`, {
        method: "PATCH",
        body: JSON.stringify({ action: isArchived ? "archive" : "unarchive" }),
      });
      onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  async function markPaid() {
    setMsg(""); setMarking(true);
    try {
      await api(`/api/orders/${order.id}`, { method: "PATCH", body: JSON.stringify({ action: "mark_paid" }) });
      onChange();
    } catch (e: any) { setMsg("✗ " + e.message); } finally { setMarking(false); }
  }

  async function submitReturn() {
    const items = returnableItems
      .map((it) => ({
        orderItemId: it.id,
        quantity: Number(returnQty[it.id] || 0),
        damaged: !!returnDamaged[it.id],
      }))
      .filter((l) => l.quantity > 0);
    if (items.length === 0 || !returnReason.trim()) return;
    setMsg("");
    try {
      await api(`/api/orders/${order.id}`, {
        method: "PATCH",
        body: JSON.stringify({ action: "return", reason: returnReason, items }),
      });
      setReturning(false); setReturnQty({}); setReturnDamaged({}); setReturnReason("");
      onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  async function assign() {
    setMsg("");
    try {
      await api("/api/deliveries", {
        method: "POST",
        body: JSON.stringify({
          orderId: order.id, courierId,
          destinationAddress, destinationPhone: destinationPhone || undefined,
        }),
      });
      setAssigning(false); onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }
  async function cancel() {
    if (!cancelReason.trim()) return;
    setMsg("");
    try {
      await api(`/api/orders/${order.id}`, { method: "PATCH", body: JSON.stringify({ action: "cancel", reason: cancelReason }) });
      setCancelling(false); setCancelReason(""); onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  return (
    <div className="card space-y-2">
      <div className="flex items-start justify-between">
        <div>
          <p className="font-medium">{order.customer.name}</p>
          <p className="text-xs text-slate-500">{new Date(order.createdAt).toLocaleString("id-ID")}</p>
        </div>
        <span className={`badge ${STATUS_STYLE[order.status] ?? "bg-slate-100"}`}>{ORDER_STATUS_LABEL[order.status] ?? order.status}</span>
      </div>
      <ul className="text-sm text-slate-600">
        {order.items.map((it) => (
          <li key={it.id}>{it.product.name} × {it.quantity} — {rupiah(it.priceAtTransaction * it.quantity)}</li>
        ))}
      </ul>
      <div className="flex items-center justify-between border-t pt-2">
        <div className="flex items-center gap-2">
          <span className="font-semibold">{rupiah(order.totalAmount)}</span>
          <span className={`badge ${order.paymentStatus === "paid" ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-500"}`}>
            {order.paymentStatus === "paid" ? "Lunas" : "Belum bayar"}
            {order.paymentMethod ? ` · ${PAYMENT_METHODS.find((m) => m.value === order.paymentMethod)?.label ?? order.paymentMethod}` : ""}
          </span>
        </div>
        <div className="flex flex-wrap justify-end gap-2">
          {order.paymentStatus === "unpaid" && (
            <button className="btn-outline text-xs" disabled={marking} onClick={markPaid}>Tandai Lunas</button>
          )}
          {canAssign && <button className="btn-primary text-xs" onClick={() => setAssigning(!assigning)}>Kirim ke Kurir</button>}
          {["confirmed", "assigned"].includes(order.status) && (
            <button className="btn-outline text-xs" onClick={() => setCancelling(!cancelling)}>Batal</button>
          )}
          {canReturn && (
            <button className="btn-outline text-xs" onClick={() => setReturning(!returning)}>Proses Retur</button>
          )}
          {canArchive && (
            order.isArchived
              ? <button className="btn-outline text-xs" onClick={() => setArchived(false)}>Buka Arsip</button>
              : <button className="btn-outline text-xs" onClick={() => setArchived(true)}>Arsipkan</button>
          )}
        </div>
      </div>
      {order.deliveries[0] && (
        <p className="text-xs text-slate-500">
          Kurir: {order.deliveries[0].courier?.name ?? "-"} · pengiriman {order.deliveries[0].status}
        </p>
      )}
      {order.deliveries[0]?.proofs.length > 0 && (
        <div className="space-y-1 rounded-lg bg-slate-50 p-2">
          <p className="text-xs font-medium text-slate-500">Bukti pengiriman</p>
          <div className="flex flex-wrap gap-2">
            {order.deliveries[0].proofs.map((p) => (
              <a key={p.id} href={p.photoUrl} target="_blank" className="block">
                <img src={p.photoUrl} alt="Bukti pengiriman" className="h-20 w-20 rounded object-cover" />
              </a>
            ))}
          </div>
          {order.deliveries[0].proofs.map((p) => (
            (p.recipientName || p.conditionNotes) && (
              <p key={p.id} className="text-xs text-slate-500">
                {p.recipientName && <>Diterima: {p.recipientName}. </>}
                {p.conditionNotes && <>Catatan: {p.conditionNotes}.</>}
              </p>
            )
          ))}
        </div>
      )}
      {assigning && (
        <div className="space-y-2 rounded-lg bg-slate-50 p-3">
          <div>
            <label className="label">Barang ini mau diantar siapa?</label>
            <select className="input" value={courierId} onChange={(e) => setCourierId(e.target.value)}>
              <option value="">— Pilih kurir —</option>
              {couriers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>

          <div className="rounded-lg border border-slate-200 bg-white p-2 text-sm">
            <p className="text-xs text-slate-500">Diantar ke (ikut data pelanggan)</p>
            {destinationAddress ? (
              <>
                <p>{destinationAddress}</p>
                {destinationPhone && <p className="mt-0.5 text-xs text-slate-500">📞 {destinationPhone}</p>}
              </>
            ) : (
              <p className="text-amber-700">
                Alamat pelanggan belum diisi — lengkapi dulu di tab <strong>Pelanggan</strong> sebelum mengirim.
              </p>
            )}
          </div>

          {courierId && (
            <KurirTaskTable courierId={courierId} courierName={couriers.find((c) => c.id === courierId)?.name ?? "kurir"} />
          )}

          <button
            className="btn-primary w-full text-sm"
            disabled={!courierId || !destinationAddress}
            onClick={assign}
          >
            Ya, Kirim Sekarang
          </button>
          {msg && <p className="text-sm text-red-600">{msg}</p>}
        </div>
      )}
      {cancelling && (
        <div className="space-y-2 rounded-lg bg-slate-50 p-3">
          <input
            className="input" placeholder="Alasan pembatalan"
            value={cancelReason} onChange={(e) => setCancelReason(e.target.value)}
          />
          <div className="flex gap-2">
            <button className="btn-primary text-sm" disabled={!cancelReason.trim()} onClick={cancel}>Batalkan Pesanan</button>
            <button className="btn-outline text-sm" onClick={() => setCancelling(false)}>Tutup</button>
          </div>
          {msg && <p className="text-sm text-red-600">{msg}</p>}
        </div>
      )}
      {returning && (
        <div className="space-y-2 rounded-lg bg-slate-50 p-3">
          <p className="text-xs font-medium text-slate-500">Isi jumlah yang diretur per item (kosongkan jika tidak diretur)</p>
          {returnableItems.map((it) => {
            const remaining = it.quantity - it.returnedQuantity;
            return (
              <div key={it.id} className="flex items-center gap-2">
                <span className="flex-1 text-sm">{it.product.name} <span className="text-xs text-slate-400">(sisa {remaining})</span></span>
                <input
                  type="number" min={0} max={remaining} className="input w-20"
                  value={returnQty[it.id] ?? ""}
                  onChange={(e) => setReturnQty((p) => ({ ...p, [it.id]: e.target.value }))}
                />
                <select
                  className="input w-28"
                  value={returnDamaged[it.id] ? "rusak" : "baik"}
                  onChange={(e) => setReturnDamaged((p) => ({ ...p, [it.id]: e.target.value === "rusak" }))}
                >
                  <option value="baik">Baik</option>
                  <option value="rusak">Rusak</option>
                </select>
              </div>
            );
          })}
          <input
            className="input" placeholder="Alasan retur (wajib)"
            value={returnReason} onChange={(e) => setReturnReason(e.target.value)}
          />
          <div className="flex gap-2">
            <button className="btn-primary text-sm" disabled={!returnReason.trim()} onClick={submitReturn}>Proses Retur</button>
            <button className="btn-outline text-sm" onClick={() => setReturning(false)}>Batal</button>
          </div>
          {msg && <p className="text-sm text-red-600">{msg}</p>}
        </div>
      )}
    </div>
  );
}

/* ------------------------------- STOCK TAB ------------------------------ */
const REDUCING_TYPES = ["adjustment", "return_damaged"];

function StockTab() {
  const [stocks, setStocks] = useState<any[]>([]);
  const [msg, setMsg] = useState("");
  const load = () => api<any[]>("/api/stocks").then(setStocks);
  useEffect(() => { load(); }, []);

  const [action, setAction] = useState<{ productId: string; type: string } | null>(null);
  const [qty, setQty] = useState("");
  const [reason, setReason] = useState("");
  const [confirming, setConfirming] = useState(false);

  function openAction(productId: string, type: string) {
    setAction({ productId, type }); setQty(""); setReason(""); setConfirming(false); setMsg("");
  }

  function reviewOrSubmit() {
    if (!action) return;
    if (REDUCING_TYPES.includes(action.type) && !confirming) {
      setConfirming(true);
      return;
    }
    submit();
  }

  async function submit() {
    if (!action) return;
    const { productId, type } = action;
    try {
      await api("/api/stock-movements", {
        method: "POST",
        body: JSON.stringify({ productId, type, quantity: Number(qty), reason: reason || undefined }),
      });
      setMsg("✓ Tersimpan"); setAction(null); setConfirming(false); load();
    } catch (e: any) { setMsg("✗ " + e.message); setConfirming(false); }
  }

  const [showHistory, setShowHistory] = useState(false);

  return (
    <div className="space-y-3">
      {msg && <p className="text-sm">{msg}</p>}
      <div className="card overflow-x-auto p-0">
        <table className="w-full text-sm">
          <thead className="border-b bg-slate-50 text-left text-xs text-slate-500">
            <tr>
              <th className="px-3 py-2">Produk</th>
              <th className="px-3 py-2 text-right">Tersedia</th>
              <th className="px-3 py-2 text-right">Direservasi</th>
              <th className="px-3 py-2 text-right">Rusak</th>
              <th className="px-3 py-2 text-right">Aksi</th>
            </tr>
          </thead>
          <tbody>
            {stocks.map((s) => {
              const isCritical = s.quantityAvailable < LOW_STOCK;
              const isSlowMoving = s.quantityAvailable > HIGH_STOCK;
              return (
              <Fragment key={s.id}>
                <tr className={`border-b last:border-0 ${isCritical ? "bg-red-50" : isSlowMoving ? "bg-amber-50" : ""}`}>
                  <td className="px-3 py-2 font-medium">
                    {s.product.name}
                    {isCritical && <span className="badge ml-2 bg-red-100 text-red-700">kritis</span>}
                    {isSlowMoving && <span className="badge ml-2 bg-amber-100 text-amber-700">menumpuk</span>}
                  </td>
                  <td className="px-3 py-2 text-right">{s.quantityAvailable}</td>
                  <td className="px-3 py-2 text-right text-slate-500">{s.quantityReserved}</td>
                  <td className="px-3 py-2 text-right text-red-500">{s.quantityDamaged}</td>
                  <td className="px-3 py-2">
                    <div className="flex justify-end gap-1">
                      <button className="btn-outline px-2 py-1 text-xs" onClick={() => openAction(s.productId, "in")}>Masuk</button>
                      <button className="btn-outline px-2 py-1 text-xs" onClick={() => openAction(s.productId, "adjustment")}>Sesuaikan</button>
                      <button className="btn-outline px-2 py-1 text-xs" onClick={() => openAction(s.productId, "return_damaged")}>Rusak</button>
                    </div>
                  </td>
                </tr>
                {action?.productId === s.productId && (
                  <tr className="border-b bg-slate-50 last:border-0">
                    <td colSpan={5} className="px-3 py-2">
                      {!confirming ? (
                        <div className="flex flex-wrap items-center gap-2">
                          <input
                            className="input w-40" type="number"
                            placeholder={action.type === "adjustment" ? "Stok tersedia baru" : "Jumlah"}
                            value={qty} onChange={(e) => setQty(e.target.value)}
                          />
                          {action.type !== "in" && (
                            <input
                              className="input w-56" placeholder="Alasan (wajib)"
                              value={reason} onChange={(e) => setReason(e.target.value)}
                            />
                          )}
                          <button
                            className="btn-primary text-xs"
                            disabled={!qty.trim() || (action.type !== "in" && !reason.trim())}
                            onClick={reviewOrSubmit}
                          >
                            {REDUCING_TYPES.includes(action.type) ? "Lanjut →" : "Simpan"}
                          </button>
                          <button className="btn-outline text-xs" onClick={() => setAction(null)}>Batal</button>
                        </div>
                      ) : (
                        <div className="space-y-2 rounded border border-amber-300 bg-amber-50 p-3">
                          <p className="text-sm font-medium text-amber-800">
                            Konfirmasi {action.type === "adjustment" ? "penyesuaian" : "barang rusak"} — pastikan sudah dicek fisik.
                          </p>
                          <p className="text-sm text-slate-700">
                            {s.product.name}: {action.type === "adjustment"
                              ? <>stok tersedia {s.quantityAvailable} → <strong>{qty}</strong> ({Number(qty) - s.quantityAvailable >= 0 ? "+" : ""}{Number(qty) - s.quantityAvailable})</>
                              : <>tandai rusak <strong>{qty}</strong> {s.product.unit}</>}
                          </p>
                          <p className="text-sm text-slate-700">Alasan: {reason}</p>
                          <div className="flex gap-2">
                            <button className="btn-primary text-xs" onClick={submit}>Ya, Konfirmasi</button>
                            <button className="btn-outline text-xs" onClick={() => setConfirming(false)}>Kembali</button>
                          </div>
                        </div>
                      )}
                    </td>
                  </tr>
                )}
              </Fragment>
              );
            })}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-slate-500">
        Penyesuaian stok yang melebihi ambang % akan otomatis ditandai untuk ditinjau Super Admin (SOP 10.C.4).
      </p>
      <button className="btn-outline text-xs" onClick={() => setShowHistory((v) => !v)}>
        {showHistory ? "Sembunyikan Riwayat Stok" : "Lihat Riwayat Stok"}
      </button>
      {showHistory && <StockHistory />}
    </div>
  );
}

function StockHistory() {
  const [rows, setRows] = useState<any[]>([]);
  const [from, setFrom] = useState("");
  const [to, setTo] = useState("");

  const load = () => {
    const params = new URLSearchParams();
    if (from) params.set("from", from);
    if (to) params.set("to", to);
    api<any[]>(`/api/stock-movements?${params.toString()}`).then(setRows);
  };
  useEffect(() => { load(); }, [from, to]);

  const TYPE_LABEL: Record<string, string> = {
    in: "Masuk", out: "Keluar (terkirim)", adjustment: "Penyesuaian Stok",
    return_good: "Retur baik", return_damaged: "Retur rusak",
  };

  return (
    <div className="card space-y-3">
      <div className="flex flex-wrap items-end gap-2">
        <div>
          <label className="label">Dari tanggal</label>
          <input type="date" className="input" value={from} onChange={(e) => setFrom(e.target.value)} />
        </div>
        <div>
          <label className="label">Sampai tanggal</label>
          <input type="date" className="input" value={to} onChange={(e) => setTo(e.target.value)} />
        </div>
        {(from || to) && (
          <button className="btn-outline text-xs" onClick={() => { setFrom(""); setTo(""); }}>Hapus Filter</button>
        )}
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="border-b bg-slate-50 text-left text-xs text-slate-500">
            <tr>
              <th className="px-3 py-2">Tanggal</th>
              <th className="px-3 py-2">Produk</th>
              <th className="px-3 py-2">Tipe</th>
              <th className="px-3 py-2 text-right">Jumlah</th>
              <th className="px-3 py-2">Alasan</th>
              <th className="px-3 py-2">Oleh</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr><td colSpan={6} className="px-3 py-4 text-center text-slate-400">Tidak ada riwayat pada rentang ini.</td></tr>
            )}
            {rows.map((r) => (
              <tr key={r.id} className="border-b last:border-0">
                <td className="px-3 py-2 whitespace-nowrap">{new Date(r.createdAt).toLocaleString("id-ID")}</td>
                <td className="px-3 py-2">{r.product.name}</td>
                <td className="px-3 py-2">
                  {TYPE_LABEL[r.type] ?? r.type}
                  {r.isFlaggedForReview && <span className="ml-1 badge bg-amber-100 text-amber-700">Perlu Ditinjau</span>}
                </td>
                <td className="px-3 py-2 text-right">{r.quantity}</td>
                <td className="px-3 py-2 text-slate-500">{r.reason ?? "-"}</td>
                <td className="px-3 py-2 text-slate-500">{r.creator?.name ?? "-"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ----------------------------- CUSTOMERS TAB ----------------------------- */
function CustomersTab() {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [query, setQuery] = useState("");
  const load = () => api<Customer[]>("/api/customers?all=1").then(setCustomers);
  useEffect(() => { load(); }, []);

  const filtered = query.trim()
    ? customers.filter((c) =>
        c.name.toLowerCase().includes(query.trim().toLowerCase()) ||
        (c.phone ?? "").includes(query.trim())
      )
    : customers;

  return (
    <div className="space-y-4">
      <input
        className="input" placeholder="Cari nama atau no. telepon…"
        value={query} onChange={(e) => setQuery(e.target.value)}
      />
      <div className="space-y-2">
        {filtered.length === 0 && <p className="text-sm text-slate-500">Tidak ada pelanggan.</p>}
        {filtered.map((c) => (
          <CustomerRow key={c.id} customer={c} onChange={load} />
        ))}
      </div>
    </div>
  );
}

function CustomerRow({ customer, onChange }: { customer: Customer; onChange: () => void }) {
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(customer.name);
  const [phone, setPhone] = useState(customer.phone ?? "");
  const [address, setAddress] = useState(customer.address ?? "");
  const [notes, setNotes] = useState(customer.notes ?? "");
  const [msg, setMsg] = useState("");

  const [showHistory, setShowHistory] = useState(false);
  const [orders, setOrders] = useState<Order[] | null>(null);
  const [confirmingDelete, setConfirmingDelete] = useState(false);
  const [deleting, setDeleting] = useState(false);

  async function doDelete() {
    setMsg(""); setDeleting(true);
    try {
      await api(`/api/customers/${customer.id}`, { method: "DELETE" });
      onChange();
    } catch (e: any) {
      setMsg("✗ " + e.message);
      setConfirmingDelete(false);
    } finally {
      setDeleting(false);
    }
  }

  async function save() {
    setMsg("");
    try {
      await api(`/api/customers/${customer.id}`, {
        method: "PATCH",
        body: JSON.stringify({
          name, phone: phone || null, address: address || null, notes: notes || null,
        }),
      });
      setEditing(false); onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  async function toggleActive() {
    setMsg("");
    try {
      await api(`/api/customers/${customer.id}`, {
        method: "PATCH",
        body: JSON.stringify({ isActive: !customer.isActive }),
      });
      onChange();
    } catch (e: any) { setMsg("✗ " + e.message); }
  }

  async function loadHistory() {
    const next = !showHistory;
    setShowHistory(next);
    if (next && orders === null) {
      api<Order[]>(`/api/orders?customerId=${customer.id}`).then(setOrders);
    }
  }

  return (
    <div className="card space-y-2">
      {!editing ? (
        <div className="flex items-center justify-between">
          <div>
            <p className="font-medium">
              {customer.name}
              {customer.isActive === false && <span className="badge ml-2 bg-slate-200 text-slate-600">nonaktif</span>}
            </p>
            <p className="text-xs text-slate-500">{customer.phone ?? "-"} · {customer.address ?? "-"}</p>
          </div>
          <div className="flex gap-2">
            <button className="btn-outline text-xs" onClick={loadHistory}>
              {showHistory ? "Sembunyikan" : "Riwayat Pesanan"}
            </button>
            <button className="btn-outline text-xs" onClick={() => setEditing(true)}>Ubah</button>
            <button className="btn-outline text-xs" onClick={toggleActive}>
              {customer.isActive === false ? "Aktifkan" : "Nonaktifkan"}
            </button>
            <button
              className="btn text-xs border border-red-300 bg-white text-red-600 hover:bg-red-50"
              onClick={() => { setMsg(""); setConfirmingDelete(true); }}
            >
              Hapus
            </button>
          </div>
        </div>
      ) : (
        <div className="space-y-2">
          <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nama" />
          <input className="input" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="No. telepon" />
          <input className="input" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Alamat" />
          <input className="input" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Catatan" />
          <div className="flex gap-2">
            <button className="btn-primary text-sm" disabled={!name.trim()} onClick={save}>Simpan</button>
            <button className="btn-outline text-sm" onClick={() => setEditing(false)}>Batal</button>
          </div>
        </div>
      )}

      {confirmingDelete && (
        <div className="space-y-2 rounded border border-red-300 bg-red-50 p-3">
          <p className="text-sm font-medium text-red-800">
            Apa benar kamu ingin menghapus pelanggan <strong>{customer.name}</strong>?
          </p>
          <p className="text-xs text-red-700">
            Data pelanggan hilang permanen dan tidak bisa dikembalikan.
          </p>
          <div className="flex gap-2">
            <button
              className="btn bg-red-600 text-sm text-white hover:bg-red-700"
              disabled={deleting}
              onClick={doDelete}
            >
              {deleting ? "Menghapus…" : "Ya, Hapus Pelanggan"}
            </button>
            <button className="btn-outline text-sm" onClick={() => setConfirmingDelete(false)}>Batal</button>
          </div>
        </div>
      )}
      {msg && <p className="text-sm text-red-600">{msg}</p>}

      {showHistory && (
        <div className="space-y-1 rounded-lg bg-slate-50 p-3">
          {orders === null ? (
            <p className="text-sm text-slate-500">Memuat…</p>
          ) : orders.length === 0 ? (
            <p className="text-sm text-slate-500">Belum ada pesanan.</p>
          ) : (
            <ul className="space-y-1 text-sm">
              {orders.map((o) => (
                <li key={o.id} className="flex items-center justify-between">
                  <span className="text-slate-600">{new Date(o.createdAt).toLocaleDateString("id-ID")} · {ORDER_STATUS_LABEL[o.status] ?? o.status}</span>
                  <span className="font-medium">{rupiah(o.totalAmount)}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}