/* === Compras — agregador read-only de las listas de cada departamento ===
   El Encargado de Compras NO crea ni edita el detalle de los artículos
   (eso lo hace cada departamento desde su propia sección). Solo recibe las compras
   pendientes y las marca como entregadas o no encontradas. */

const COMPRAS_INIT = {
  bar: [
    { id: "cb1", name: "Tequila Casa Dragones Joven", qty: 2, unit: "btl", status: "pendiente", priority: "alta",
      supplier: "La Castellana, Vallarta", note: "Agotado en bar. Etiqueta blanca, 750ml.",
      addedBy: "ssolano", addedOn: "2026-05-18", photo: null },
    { id: "cb2", name: "Vodka Grey Goose 1L", qty: 2, unit: "btl", status: "pendiente", priority: "media",
      supplier: "La Europea (entrega martes/viernes)", note: "Solicitada por huésped recurrente",
      addedBy: "ssolano", addedOn: "2026-05-17", photo: null },
    { id: "cb3", name: "Limones para coctelería", qty: 4, unit: "kg", status: "pendiente", priority: "media",
      supplier: "Mercado Bucerías — puesto de Don Pedro", note: "Que sean con semilla, no persa",
      addedBy: "ssolano", addedOn: "2026-05-19", photo: null },
    { id: "cb4", name: "Sal de gusano premium", qty: 1, unit: "kg", status: "pendiente", priority: "baja",
      supplier: "Oaxaca importadora (online)", note: "Marca 'Gusano de Oro', empaque cristal",
      addedBy: "ssolano", addedOn: "2026-05-19", photo: null },
    { id: "cb5", name: "Champagne Veuve Clicquot Brut", qty: 2, unit: "btl", status: "entregado", priority: "alta",
      supplier: "La Europea", note: "Entregado 18 may, lote 2024-B",
      addedBy: "mgonzalez", addedOn: "2026-05-15", photo: null },
  ],
  cocina: [
    { id: "cc1", name: "Harina de trigo King Arthur", qty: 8, unit: "kg", status: "pendiente", priority: "alta",
      supplier: "Costco Vallarta", note: "Importada, alta proteína. La marca local no rinde igual.",
      addedBy: "rpina", addedOn: "2026-05-19", photo: null },
    { id: "cc2", name: "Pulpo cocido", qty: 3, unit: "kg", status: "pendiente", priority: "alta",
      supplier: "Pescados Punta Mita — Marina", note: "Tamaño mediano. Para menú de jueves (Tlayudas y parrilla).",
      addedBy: "rpina", addedOn: "2026-05-19", photo: null },
    { id: "cc3", name: "Aguacate Hass", qty: 30, unit: "pza", status: "pendiente", priority: "media",
      supplier: "Mercado Bucerías (entrega martes)", note: "Punto medio para guacamole y aguachile",
      addedBy: "rpina", addedOn: "2026-05-18", photo: null },
    { id: "cc4", name: "Sal de mar Colima", qty: 5, unit: "kg", status: "pendiente", priority: "baja",
      supplier: "La Castellana", note: "En frasco, no en bolsa",
      addedBy: "ccuevas", addedOn: "2026-05-18", photo: null },
    { id: "cc5", name: "Aceite de oliva extra virgen", qty: 4, unit: "L", status: "entregado", priority: "media",
      supplier: "La Europea", note: "Lote 5/2025 — Frantoi italianos",
      addedBy: "rpina", addedOn: "2026-05-14", photo: null },
  ],
  amallaves: [
    { id: "ca1", name: "Shampoo amenities Sothys 300ml", qty: 60, unit: "pza", status: "pendiente", priority: "alta",
      supplier: "Sothys México (distribuidor PV)", note: "Misma fragancia que el resto. Empaque sin marca visible.",
      addedBy: "lontiveros", addedOn: "2026-05-19", photo: null },
    { id: "ca2", name: "Toallas grandes blancas bordadas", qty: 20, unit: "pza", status: "pendiente", priority: "media",
      supplier: "Hoteleria del Pacífico — proveedor habitual", note: "Bordado 'CdC' en hilo dorado, esquina inferior",
      addedBy: "lontiveros", addedOn: "2026-05-17", photo: null },
    { id: "ca3", name: "Flores frescas para arreglos", qty: 12, unit: "ramo", status: "pendiente", priority: "media",
      supplier: "Florería Sayulita (entrega lunes y jueves)", note: "Mezcla aves del paraíso + heliconias + follaje tropical",
      addedBy: "lupontiveros", addedOn: "2026-05-19", photo: null },
    { id: "ca4", name: "Detergente lavandería ecológico", qty: 10, unit: "L", status: "entregado", priority: "baja",
      supplier: "Ecolimpio Vallarta", note: "Bidones de 5L",
      addedBy: "lontiveros", addedOn: "2026-05-12", photo: null },
  ],
  yate: [
    { id: "cy1", name: "Diésel marino", qty: 200, unit: "L", status: "pendiente", priority: "alta",
      supplier: "Marina Punta Mita — bomba sur", note: "Tanquear día anterior a salida (miércoles 21)",
      addedBy: "umendoza", addedOn: "2026-05-18", photo: null },
    { id: "cy2", name: "Aceite motor Mercury Verado SAE-25W40", qty: 4, unit: "L", status: "pendiente", priority: "alta",
      supplier: "Náutica del Pacífico — Vallarta", note: "Servicio mensual de los 2 motores. Marca exacta.",
      addedBy: "umendoza", addedOn: "2026-05-19", photo: null },
    { id: "cy3", name: "Hielo para cooler de cubierta", qty: 6, unit: "kg", status: "pendiente", priority: "media",
      supplier: "Marina Punta Mita — tienda", note: "Día de la salida, antes de las 8:00",
      addedBy: "ehernandez", addedOn: "2026-05-19", photo: null },
    { id: "cy4", name: "Snorkels nuevos (set adulto)", qty: 6, unit: "pza", status: "pendiente", priority: "media",
      supplier: "Náutica del Pacífico", note: "Marca Cressi Italia. 2 sets dañados, conservar 4 existentes.",
      addedBy: "umendoza", addedOn: "2026-05-17", photo: null },
    { id: "cy5", name: "Crema solar Reef Safe", qty: 8, unit: "pza", status: "entregado", priority: "baja",
      supplier: "Sayulita Surf Shop", note: "Mineral, sin oxibenzona. SPF 50+",
      addedBy: "umendoza", addedOn: "2026-05-12", photo: null },
  ],
};

const COMPRAS_LISTS = [
  { id: "bar",       label: "Bar",            icon: "Cocktail", area: "bar" },
  { id: "cocina",    label: "Cocina",         icon: "Chef",     area: "cocina" },
  { id: "amallaves", label: "Ama de llaves",  icon: "Bed",      area: "amallaves" },
  { id: "yate",      label: "Yate Máximo",    icon: "Anchor",   area: "yate" },
];

const ComprasView = ({ compras, setCompras, role, user }) => {
  const [activeList, setActiveList] = React.useState("todos"); // "todos" | "bar" | "cocina" | "amallaves" | "yate"

  // Aggregate KPIs across all lists
  const all = Object.entries(compras).flatMap(([area, items]) => items.map(i => ({ ...i, _source: area })));
  const totalPendiente = all.filter(i => i.status === "pendiente").length;
  const totalEntregado = all.filter(i => i.status === "entregado").length;
  const totalNoEnc     = all.filter(i => i.status === "no_encontrado").length;
  const suppliers = [...new Set(all.map(i => i.supplier).filter(Boolean))];

  // El Encargado de Compras + admin + gerente pueden cambiar estado de cualquier lista
  const canManageStatus = role === "admin" || role === "gerente" || role === "compras";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* Banner explicativo */}
      <div style={{
        padding: "12px 18px", background: "var(--cdc-bg-soft)", border: "1px solid var(--cdc-border-soft)",
        borderRadius: 12, fontSize: 13, color: "var(--cdc-ink-2)", display: "flex", alignItems: "center", gap: 10,
      }}>
        <I.Cart size={18} style={{ color: "var(--cdc-coral-deep)" }} />
        <span>Cada departamento gestiona su propia lista de compras desde su sección. Aquí se concentran todas las solicitudes — puedes marcarlas como <strong>entregadas</strong> o <strong>no encontradas</strong> conforme avancen con los proveedores.</span>
      </div>

      {/* KPIs */}
      {/* KPIs */}
      <div className="cdc-grid-cards" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Compra pendiente</div>
          <div className="cdc-kpi__value" style={{ color: totalPendiente ? "var(--cdc-pending)" : "var(--cdc-ink)" }}>{totalPendiente}</div>
          <div className="cdc-kpi__sub">en {Object.keys(compras).length} departamentos</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Comprados</div>
          <div className="cdc-kpi__value" style={{ color: "var(--cdc-done)" }}>{totalEntregado}</div>
          <div className="cdc-kpi__sub">cierre semanal viernes</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">No encontrados</div>
          <div className="cdc-kpi__value" style={{ color: totalNoEnc ? "var(--cdc-overdue)" : "var(--cdc-ink)" }}>{totalNoEnc}</div>
          <div className="cdc-kpi__sub">avisar al departamento</div>
        </div>
      </div>

      {/* Tabs: Todos + por departamento */}
      <div className="cdc-tabs" style={{ background: "var(--cdc-panel)", borderRadius: "14px 14px 0 0", border: "1px solid var(--cdc-border)", borderBottom: 0, paddingLeft: 18 }}>
        <button className="cdc-tab" aria-selected={activeList === "todos"} onClick={() => setActiveList("todos")}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
            <I.List size={14} /> Todas
            <span style={{ background: "var(--cdc-cream-200)", color: "var(--cdc-ink-2)", fontSize: 11, fontWeight: 700, padding: "1px 7px", borderRadius: 999 }}>
              {all.length}
            </span>
          </span>
        </button>
        {COMPRAS_LISTS.map(l => {
          const c = compras[l.id]?.filter(i => i.status === "pendiente").length || 0;
          return (
            <button key={l.id} className="cdc-tab" aria-selected={activeList === l.id} onClick={() => setActiveList(l.id)}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
                <AreaIcon id={l.area} size={14} />
                {l.label}
                {c > 0 && (
                  <span style={{
                    background: "var(--cdc-overdue-bg)", color: "var(--cdc-overdue)",
                    fontSize: 11, fontWeight: 700, padding: "1px 7px", borderRadius: 999,
                  }}>{c}</span>
                )}
              </span>
            </button>
          );
        })}
      </div>

      <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
        {activeList === "todos" ? (
          <AggregatedView compras={compras} setCompras={setCompras} canManageStatus={canManageStatus} />
        ) : (
          <ShoppingListPanel
            items={compras[activeList] || []}
            onUpdate={(newList) => setCompras({ ...compras, [activeList]: newList })}
            listLabel={COMPRAS_LISTS.find(l => l.id === activeList).label}
            listId={activeList}
            user={user}
            role={role}
            canEdit={false}
            canManageStatus={canManageStatus}
          />
        )}
      </div>
    </div>
  );
};

const AggregatedView = ({ compras, setCompras, canManageStatus }) => {
  // Show items grouped by source department
  return (
    <>
      {COMPRAS_LISTS.map(l => {
        const items = compras[l.id] || [];
        const sinPedir = items.filter(i => i.status === "pendiente");
        if (items.length === 0) return null;
        return (
          <div key={l.id}>
            <div style={{ padding: "12px 18px 6px", background: "var(--cdc-cream-50)", borderTop: "1px solid var(--cdc-border-soft)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <AreaIcon id={l.area} size={16} />
                <span style={{ fontWeight: 700, fontSize: 13.5 }}>{l.label}</span>
                <span style={{ fontSize: 11.5, color: "var(--cdc-ink-3)" }}>
                  {items.length} ítems · {sinPedir.length} pendientes
                </span>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))", gap: 14, padding: 14 }}>
              {items.map(it => (
                <ShoppingItemCard
                  key={it.id}
                  item={it}
                  canEdit={false}
                  canManageStatus={canManageStatus}
                  onStatusChange={(s) => setCompras({ ...compras, [l.id]: items.map(x => x.id === it.id ? { ...x, status: s } : x) })}
                  onViewPhoto={() => {}}
                />
              ))}
            </div>
          </div>
        );
      })}
    </>
  );
};

Object.assign(window, { ComprasView, COMPRAS_INIT, COMPRAS_LISTS });