// Shipping Methods list view
const { useState: useStateLV, useMemo: useMemoLV } = React;

const ShippingMethodsList = ({ rows, onRowClick, onCreate, onSetDefault, onToggleActive, query, setQuery, statusFilter, setStatusFilter, typeFilter, setTypeFilter }) => {
  const filtered = useMemoLV(() => {
    return rows.filter(r => {
      if (statusFilter === "active" && !r.active) return false;
      if (statusFilter === "inactive" && r.active) return false;
      if (typeFilter && typeFilter !== "All Types" && r.type !== typeFilter) return false;
      if (query) {
        const q = query.toLowerCase();
        if (!r.name.toLowerCase().includes(q) && !r.code.toLowerCase().includes(q) && !(r.carrier || "").toLowerCase().includes(q)) return false;
      }
      return true;
    }).sort((a, b) => {
      if (a.isDefault && !b.isDefault) return -1;
      if (!a.isDefault && b.isDefault) return 1;
      return a.name.localeCompare(b.name);
    });
  }, [rows, query, statusFilter, typeFilter]);

  return (
    <div style={{ background: "#fff", border: "1px solid var(--mw-border)", borderRadius: 16, overflow: "hidden", boxShadow: "var(--mw-shadow-card)" }}>
      {/* Tab strip */}
      <div style={{ display: "flex", alignItems: "center", padding: "8px 12px", gap: 6, borderBottom: "1px solid var(--mw-border-soft)" }}>
        <button style={{ width: 28, height: 28, border: "1px solid var(--mw-border)", borderRadius: 8, background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
          <img src="assets/icons/clock.svg" style={{ width: 14, height: 14, opacity: 0.5 }} />
        </button>
        <SegTab active={statusFilter === "all"} onClick={() => setStatusFilter("all")}>All <span style={{ color: "var(--mw-text-tertiary)", marginLeft: 4 }}>{rows.length}</span></SegTab>
        <SegTab active={statusFilter === "active"} onClick={() => setStatusFilter("active")}>Active <span style={{ color: "var(--mw-text-tertiary)", marginLeft: 4 }}>{rows.filter(r => r.active).length}</span></SegTab>
        <SegTab active={statusFilter === "inactive"} onClick={() => setStatusFilter("inactive")}>Inactive <span style={{ color: "var(--mw-text-tertiary)", marginLeft: 4 }}>{rows.filter(r => !r.active).length}</span></SegTab>
        <button style={{ width: 28, height: 28, border: "0", borderRadius: 8, background: "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--mw-text-tertiary)", marginLeft: 2 }}>
          <img src="assets/icons/plus.svg" style={{ width: 14, height: 14 }} />
        </button>
      </div>
      {/* Toolbar */}
      <div style={{ display: "flex", alignItems: "center", padding: "12px 16px", gap: 10, justifyContent: "space-between", borderBottom: "1px solid var(--mw-border-soft)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <div style={{ position: "relative", width: 260 }}>
            <img src="assets/icons/search.svg" style={{ position: "absolute", left: 10, top: 8, width: 14, height: 14, opacity: 0.5 }} />
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search shipping methods…" style={{ width: "100%", paddingLeft: 30, paddingRight: 10, height: 30, borderRadius: 9999, border: "1px solid var(--mw-border-strong)", fontSize: 13, fontFamily: "inherit", outline: 0, background: "#fff" }} />
          </div>
          <Select value={typeFilter} onChange={e => setTypeFilter(e.target.value)} options={["All Types", ...SHIPPING_TYPES]} style={{ width: 160 }} />
          <Button size="sm" icon="filter">More filters</Button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Button size="sm" icon="download">Manage view</Button>
          <Button size="sm" kind="primary" icon="plus" onClick={onCreate}>New Shipping Method</Button>
        </div>
      </div>
      {/* Table */}
      <div style={{ display: "grid", gridTemplateColumns: "32px 2fr 1.2fr 1fr 1fr 0.9fr 0.7fr 110px", padding: "10px 16px", fontSize: 12, fontWeight: 500, color: "var(--mw-text-tertiary)", borderBottom: "1px solid var(--mw-border-soft)", background: "#fff", alignItems: "center" }}>
        <span></span>
        <span>Method</span>
        <span>Type</span>
        <span>Carrier</span>
        <span>Pricing</span>
        <span>Transit</span>
        <span>Default</span>
        <span style={{ textAlign: "right" }}>Updated</span>
      </div>
      {filtered.length === 0 && (
        <div style={{ padding: "60px 24px", textAlign: "center", color: "var(--mw-text-tertiary)", fontSize: 14 }}>
          No shipping methods match your filters.
        </div>
      )}
      {filtered.map((r, i) => {
        const u = USERS[r.updatedBy] || { name: r.updatedBy, color: "#A3ACBA" };
        return (
          <div key={r.id} onClick={() => onRowClick && onRowClick(r)}
            style={{ display: "grid", gridTemplateColumns: "32px 2fr 1.2fr 1fr 1fr 0.9fr 0.7fr 110px", padding: "10px 16px", fontSize: 13, color: "var(--mw-text-primary)", borderBottom: i === filtered.length - 1 ? "0" : "1px solid var(--mw-border-soft)", alignItems: "center", cursor: "pointer", transition: "background 120ms" }}
            onMouseEnter={e => e.currentTarget.style.background = "var(--mw-bg)"}
            onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
            <TypeEmblem type={r.type} size={28} />
            <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ color: "var(--mw-brand-500)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</span>
                {r.isDefault && <Chip tone="indigoSoft" size="sm" dot>Default</Chip>}
              </span>
              <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)", fontFamily: "var(--mw-font-mono)" }}>{r.code}</span>
            </div>
            <span style={{ color: "var(--mw-text-secondary)" }}>{r.type}</span>
            <span style={{ color: "var(--mw-text-secondary)" }}>{r.carrier || <span style={{ color: "var(--mw-text-quaternary)" }}>—</span>}</span>
            <span style={{ color: "var(--mw-text-secondary)" }}>
              {r.pricing === "Flat Rate" ? `$${r.flat.toFixed(2)}` : r.pricing}
            </span>
            <span style={{ color: "var(--mw-text-secondary)" }}>{r.transit > 0 ? `${r.transit} ${r.transit === 1 ? "day" : "days"}` : <span style={{ color: "var(--mw-text-quaternary)" }}>—</span>}</span>
            <span onClick={e => e.stopPropagation()}>
              {r.isDefault
                ? <Chip tone="indigoSoft" size="sm" dot>Default</Chip>
                : <button onClick={() => onSetDefault(r.id)} style={{ border: 0, background: "transparent", color: "var(--mw-text-tertiary)", fontSize: 12, cursor: "pointer", padding: 0, fontFamily: "inherit" }}>Set default</button>}
            </span>
            <span style={{ textAlign: "right", color: "var(--mw-text-tertiary)", fontSize: 12, display: "inline-flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
              <Avatar size={18} initials={r.updatedBy} color={u.color} />
              {r.updated}
            </span>
          </div>
        );
      })}
    </div>
  );
};

const SegTab = ({ active, children, onClick }) => (
  <button onClick={onClick} style={{
    border: active ? "1px solid var(--mw-brand-200)" : "1px solid transparent",
    background: active ? "rgba(232,233,246,.5)" : "transparent",
    color: active ? "var(--mw-brand-500)" : "var(--mw-text-secondary)",
    padding: "4px 12px", borderRadius: 9999, fontSize: 12, fontWeight: 500, cursor: "pointer",
    fontFamily: "inherit", display: "inline-flex", alignItems: "center"
  }}>{children}</button>
);

window.ShippingMethodsList = ShippingMethodsList;