// Directory.jsx, supplier search + filter + grid

const Directory = ({ onNavigate, onRFQ }) => {
 const vp = useViewport();
 const [country, setCountry] = useState("any");
 const [verifiedOnly, setVerifiedOnly] = useState(true);
 const [view, setView] = useState("grid"); // grid | table
 const [filtersOpen, setFiltersOpen] = useState(false);

 const filtered = SUPPLIERS.filter(s =>
  (country === "any" || s.country === country) &&
  (!verifiedOnly || s.verified)
 );

 // Tablet-down: hide sidebar in flow, show as drawer when opened
 const showSidebarInline = vp.isDesktop;

 const filterContent = (
  <>
   <FilterGroup label="Origin">
    {[
     { id: "any", label: "Any", count: SUPPLIERS.length },
     { id: "vn", label: "Vietnam", count: SUPPLIERS.filter(s => s.country === "vn").length },
     { id: "jp", label: "Japan", count: SUPPLIERS.filter(s => s.country === "jp").length },
    ].map(opt => (
     <label key={opt.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 0", cursor: "pointer", fontSize: 14 }}>
      <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
       <input type="radio" checked={country === opt.id} onChange={() => setCountry(opt.id)} style={{ accentColor: "var(--jv-navy-800)" }}/>
       {opt.id !== "any" && <img src={`assets/flag-${opt.id}.svg`} width="16" height="12"/>}
       <span style={{ color: country === opt.id ? "var(--jv-navy-800)" : "var(--color-fg-body)", fontWeight: country === opt.id ? 500 : 400 }}>{opt.label}</span>
      </span>
      <Mono style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>{opt.count}</Mono>
     </label>
    ))}
   </FilterGroup>

   <FilterGroup label="Trust">
    <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
     <input type="checkbox" checked={verifiedOnly} onChange={e => setVerifiedOnly(e.target.checked)} style={{ accentColor: "var(--jv-navy-800)" }}/>
     Verified only
    </label>
    <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
     <input type="checkbox" style={{ accentColor: "var(--jv-navy-800)" }}/>
     Audited facility
    </label>
    <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
     <input type="checkbox" style={{ accentColor: "var(--jv-navy-800)" }}/>
     Premium tier
    </label>
   </FilterGroup>

   <FilterGroup label="Certifications">
    {["HACCP", "FSSC 22000", "BRCGS", "ASC CoC", "MSC CoC", "JAS Organic"].map(c => (
     <label key={c} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
      <input type="checkbox" style={{ accentColor: "var(--jv-navy-800)" }}/>
      <CertTag>{c}</CertTag>
     </label>
    ))}
   </FilterGroup>

   <FilterGroup label="MOQ ceiling">
    {["≤ 500 kg", "≤ 1 t", "≤ 5 t", "Any"].map(c => (
     <label key={c} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
      <input type="radio" name="moq" style={{ accentColor: "var(--jv-navy-800)" }}/>
      {c}
     </label>
    ))}
   </FilterGroup>
  </>
 );

 return (
  <div>
   {/* PAGE HEADER */}
   <section style={{ padding: "32px var(--pad-x) 24px", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ fontSize: 12, color: "var(--color-fg-muted)", display: "flex", gap: 6, marginBottom: 12 }}>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate("home"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Home</a>
      <span>/</span><span style={{ color: "var(--color-fg)" }}>Suppliers</span>
     </div>
     <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
      <div>
       <h1 style={{ fontSize: vp.isMobile ? 26 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>Suppliers</h1>
       <div style={{ marginTop: 6, fontSize: 14, color: "var(--color-fg-muted)" }}>
        <Mono style={{ color: "var(--color-fg)" }}>{filtered.length}</Mono> of <Mono>{SUPPLIERS.length}</Mono> matches · Vietnam ⇄ Japan
       </div>
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
       {!showSidebarInline && (
        <Button variant="secondary" size="sm" leading="filter" onClick={() => setFiltersOpen(true)}>Filters</Button>
       )}
       <Button variant={view === "grid" ? "secondary" : "ghost"} size="sm" onClick={() => setView("grid")}>Cards</Button>
       <Button variant={view === "table" ? "secondary" : "ghost"} size="sm" onClick={() => setView("table")}>Table</Button>
       <Button variant="primary" size="sm" onClick={onRFQ}>Post an RFQ</Button>
      </div>
     </div>
    </div>
   </section>

   <div style={{ maxWidth: 1280, margin: "0 auto", padding: "32px var(--pad-x)", display: "grid", gridTemplateColumns: showSidebarInline ? "240px 1fr" : "1fr", gap: 32 }}>
    {showSidebarInline && (
     <aside style={{ display: "flex", flexDirection: "column", gap: 28 }}>
      {filterContent}
     </aside>
    )}

    {/* RESULTS */}
    <main style={{ minWidth: 0 }}>
     {view === "grid" ? (
      <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "repeat(auto-fill, minmax(280px, 1fr))", gap: 16 }}>
       {filtered.map(s => <SupplierCard key={s.id} supplier={s} onClick={() => onNavigate("profile", s.id)} onRFQ={onRFQ}/>)}
      </div>
     ) : (
      <DirectoryTable rows={filtered} onNavigate={onNavigate}/>
     )}
    </main>
   </div>

   {/* Filter drawer (tablet & mobile) */}
   {!showSidebarInline && (
    <>
     <div className="jv-drawer-scrim" data-open={filtersOpen ? "true" : "false"} onClick={() => setFiltersOpen(false)}/>
     <aside className="jv-drawer" data-open={filtersOpen ? "true" : "false"}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 22px", borderBottom: "1px solid var(--color-border)" }}>
       <div style={{ fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>Filters</div>
       <button onClick={() => setFiltersOpen(false)} aria-label="Close filters" style={{ background: "transparent", border: 0, padding: 6, cursor: "pointer", color: "var(--color-fg-muted)" }}>
        <Icon name="x" size={20}/>
       </button>
      </div>
      <div style={{ padding: "20px 22px", display: "flex", flexDirection: "column", gap: 28, overflowY: "auto", flex: 1 }}>
       {filterContent}
      </div>
      <div style={{ padding: "16px 22px", borderTop: "1px solid var(--color-border)" }}>
       <Button variant="primary" size="md" onClick={() => setFiltersOpen(false)} style={{ width: "100%", justifyContent: "center" }}>
        Show {filtered.length} suppliers
       </Button>
      </div>
     </aside>
    </>
   )}
  </div>
 );
};

const FilterGroup = ({ label, children }) => (
 <div>
  <Eyebrow style={{ paddingBottom: 8, borderBottom: "1px solid var(--color-border)", marginBottom: 4 }}>{label}</Eyebrow>
  {children}
 </div>
);

const DirectoryTable = ({ rows, onNavigate }) => (
 <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
  <div className="jv-x-scroll">
   <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 720 }}>
    <thead style={{ background: "var(--jv-ink-50)" }}>
     <tr style={{ textAlign: "left", color: "var(--color-fg-muted)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>
      <th style={{ padding: "10px 14px" }}>Supplier</th>
      <th style={{ padding: "10px 14px" }}>Country</th>
      <th style={{ padding: "10px 14px" }}>Certifications</th>
      <th style={{ padding: "10px 14px", textAlign: "right" }}>MOQ</th>
      <th style={{ padding: "10px 14px", textAlign: "right" }}>Lead</th>
      <th style={{ padding: "10px 14px" }}>Status</th>
      <th style={{ padding: "10px 14px" }}/>
     </tr>
    </thead>
    <tbody style={{ color: "var(--color-fg-body)" }}>
     {rows.map((s, i) => (
      <tr key={s.id} style={{ borderTop: "1px solid var(--color-divider)", background: i % 2 ? "var(--jv-ink-50)" : "#fff", cursor: "pointer" }}
       onClick={() => onNavigate("profile", s.id)}>
       <td style={{ padding: "12px 14px", color: "var(--jv-navy-800)", fontWeight: 500 }}>{s.name}</td>
       <td style={{ padding: "12px 14px" }}><CountryChip country={s.country}/></td>
       <td style={{ padding: "12px 14px" }}>
        <span style={{ display: "inline-flex", gap: 4, flexWrap: "wrap" }}>{s.certs.map(c => <CertTag key={c}>{c}</CertTag>)}</span>
       </td>
       <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{s.moq}</Mono></td>
       <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{s.leadTime}</Mono></td>
       <td style={{ padding: "12px 14px" }}>{s.verified ? <StatusPill tone="trust">Verified</StatusPill> : <StatusPill tone="warn">Pending</StatusPill>}</td>
       <td style={{ padding: "12px 14px", color: "var(--color-fg-muted)" }}><Icon name="chevron-right" size={16}/></td>
      </tr>
     ))}
    </tbody>
   </table>
  </div>
 </div>
);

Object.assign(window, { Directory });