// Woodbury Operator — Vendors directory. Registers window.VendorsScreen.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, StatCard, IconTile, Input, Modal, Select } = NS;

  function VendorsScreen() {
    const V = window.WB_DATA.vendors;
    const [modal, setModal] = React.useState(null); // 'add' | vendor
    const [q, setQ] = React.useState("");
    const close = () => setModal(null);
    const shown = V.filter((v) => !q || (v.name + v.trade).toLowerCase().includes(q.toLowerCase()));
    React.useEffect(() => { const f = window.WBFocus; if (f && f.kind === "vendor") { const v = V.find((x) => x.name === f.key); if (v) { window.WB_ACTIVE_VENDOR = v; window.WBNavigate && window.WBNavigate("VendorDetail"); } window.WBFocus = null; } }, []);

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 28, padding: "36px 40px", maxWidth: 1440 }}>
        <window.WBPageHeader eyebrow="Facilities Network" title="Vendors"
          sub="Approved contractors for maintenance dispatch across the portfolio."
          actions={<Button variant="primary" icon="plus" onClick={() => setModal("add")}>Add Vendor</Button>} />
        <div style={{ display: "flex", gap: 20 }}>
          <StatCard onClick={()=>window.WBNavigate&&window.WBNavigate("Vendors")} label="Approved Vendors" value="5" icon="hard-hat" iconTone="brand" />
          <StatCard onClick={()=>window.WBNavigate&&window.WBNavigate("Vendors")} label="Preferred" value="2" icon="star" iconTone="success" emphasis="success" />
          <StatCard onClick={()=>window.WBNavigate&&window.WBNavigate("Vendors")} label="On-site Today" value="1" icon="map-pin" iconTone="accent" />
          <StatCard onClick={()=>window.WBNavigate&&window.WBNavigate("Vendors")} label="Open Assignments" value="6" icon="wrench" iconTone="sunken" />
        </div>
        <Card>
          <CardHeader title="Vendor Directory" action={<Input icon="search" placeholder="Search vendors..." size="sm" value={q} onChange={(e) => setQ(e.target.value)} containerStyle={{ width: 260 }} />} />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.1fr 0.7fr 0.6fr", padding: "14px 24px", borderBottom: "1px solid var(--border)" }}>
            {["Vendor", "Trade", "Phone", "Status", "Action"].map((h, i) => (
              <span key={h} style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", textAlign: i === 4 ? "right" : "left" }}>{h}</span>
            ))}
          </div>
          {V.map((v, i) => (
            <div key={v.name} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.1fr 0.7fr 0.6fr", alignItems: "center", padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none", display: (q && !(v.name + v.trade).toLowerCase().includes(q.toLowerCase())) ? "none" : "grid" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <IconTile icon={v.icon} tone={v.tone} size={40} />
                <div><div style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>{v.name}</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>{v.jobs} completed jobs</div></div>
              </div>
              <span style={{ fontSize: 14, color: "var(--text-heading)" }}>{v.trade}</span>
              <span style={{ fontSize: 14, color: "var(--text-body)" }}>{v.phone}</span>
              <div><Badge tone={v.rating === "Preferred" ? "success" : v.rating === "On-site" ? "accent" : "neutral"}>{v.rating}</Badge></div>
              <div style={{ textAlign: "right", display: "flex", gap: 6, justifyContent: "flex-end" }}>
                <Button variant="ghost" size="sm" icon="wrench" onClick={() => window.WBToast("Assigning a ticket to " + v.name)} />
                <Button variant="secondary" size="sm" onClick={() => { window.WB_ACTIVE_VENDOR = v; window.WBNavigate && window.WBNavigate("VendorDetail"); }}>View</Button>
              </div>
            </div>
          ))}
          {shown.length === 0 && <div style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 14 }}>No vendors match “{q}”.</div>}
        </Card>

        {/* Add vendor */}
        <Modal open={modal === "add"} onClose={close} icon="hard-hat" title="Add Vendor" subtitle="Register an approved contractor."
          footer={<React.Fragment><Button variant="secondary" onClick={close}>Cancel</Button><Button variant="primary" icon="check" onClick={() => { close(); window.WBToast("Vendor added to directory"); }}>Add Vendor</Button></React.Fragment>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <Input label="Company name" placeholder="e.g. Accra Electricals Ltd" />
            <div style={{ display: "flex", gap: 14 }}>
              <Select label="Trade" options={["Plumbing", "HVAC", "Roofing", "Electrical", "Access & Gates", "General"]} containerStyle={{ flex: 1 }} />
              <Input label="Phone" placeholder="+233 …" containerStyle={{ flex: 1 }} />
            </div>
            <Select label="Rating" options={["Standard", "Preferred"]} />
          </div>
        </Modal>

        {/* View vendor */}
        <Modal open={modal && typeof modal === "object"} onClose={close} icon={modal && typeof modal === "object" ? modal.icon : "hard-hat"} title={modal && modal.name} subtitle={modal && `${modal.trade} · ${modal.jobs} completed jobs`} width={520}
          footer={<React.Fragment><Button variant="secondary" onClick={close}>Close</Button><Button variant="primary" icon="wrench" onClick={() => { close(); window.WBToast("Assigning a ticket to " + modal.name); }}>Assign Ticket</Button></React.Fragment>}>
          {modal && typeof modal === "object" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["Trade", modal.trade], ["Phone", modal.phone], ["Completed jobs", modal.jobs], ["Status", modal.rating]].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
                  <span style={{ fontSize: 13, color: "var(--text-muted)" }}>{k}</span><span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-heading)" }}>{v}</span>
                </div>
              ))}
            </div>
          )}
        </Modal>
      </div>
    );
  }
  window.VendorsScreen = VendorsScreen;
})();