// CoolSouq Seller Dashboard — screens (Overview, Listings, Leads).
const NSds = window.CoolSouqDesignSystem_f4ec4c;

function Stat({ label, value, delta, up, accent }) {
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 18 }}>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-faint)" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 30, fontWeight: 600, color: accent ? "var(--accent-ink)" : "var(--text-strong)", marginTop: 8, letterSpacing: "-0.01em" }}>{value}</div>
      {delta && (
        <div style={{ display: "inline-flex", alignItems: "center", gap: 4, marginTop: 8, fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, color: up ? "var(--success-ink)" : "var(--danger-ink)" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: up ? "none" : "rotate(180deg)" }}><path d="M12 19V5M5 12l7-7 7 7"/></svg>
          {delta} <span style={{ color: "var(--text-faint)", fontWeight: 500 }}>vs last month</span>
        </div>
      )}
    </div>
  );
}

function MiniBars() {
  const data = [42, 58, 51, 70, 64, 88, 76, 95, 82, 110, 98, 124];
  const max = Math.max(...data);
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height: 130, padding: "0 4px" }}>
      {data.map((v, i) => (
        <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
          <div style={{ width: "100%", height: `${(v / max) * 100}%`, background: i === data.length - 1 ? "var(--brand)" : "var(--teal-200)", borderRadius: "3px 3px 0 0", minHeight: 4 }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--text-faint)" }}>{["J","F","M","A","M","J","J","A","S","O","N","D"][i]}</span>
        </div>
      ))}
    </div>
  );
}

function OverviewScreen({ onNav }) {
  const { Button, StatusPill, VerifiedDealerBadge } = NSds;
  const recent = window.CS_PRODUCTS.slice(0, 4);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 1100 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        <Stat label="Active listings" value="48" delta="+6" up />
        <Stat label="New leads (30d)" value="124" delta="+18%" up accent />
        <Stat label="Quote value" value="€ 1.84M" delta="+12%" up />
        <Stat label="Response time" value="3.2h" delta="−0.4h" up />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16 }}>
        <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 20 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Lead volume</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--text-muted)" }}>RFQs received per month</div>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--accent-ink)", fontWeight: 600 }}>▲ 28% YoY</div>
          </div>
          <MiniBars />
        </div>
        <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Account health</div>
          <VerifiedDealerBadge name="Gulf Cooling Trading" deals={240} country="AE" size="sm" />
          {[["Listing quality", 92], ["Response rate", 88], ["Buyer rating", 96]].map(([l, v]) => (
            <div key={l}>
              <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-body)", marginBottom: 5 }}><span>{l}</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{v}%</span></div>
              <div style={{ height: 6, background: "var(--bg-sunken)", borderRadius: 3, overflow: "hidden" }}><div style={{ width: `${v}%`, height: "100%", background: v > 90 ? "var(--success)" : "var(--brand)", borderRadius: 3 }} /></div>
            </div>
          ))}
        </div>
      </div>
      {/* recent leads table */}
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Recent leads</div>
          <Button size="sm" variant="ghost" onClick={() => onNav("leads")}>View all</Button>
        </div>
        <LeadRows compact />
      </div>
    </div>
  );
}

function LeadRows({ compact }) {
  const { StatusPill, Button } = NSds;
  const leads = [
    ["Khalid Al-Mansoori", "Mansoori Facilities", "NECS-WL/B 1314", "new", "€ 18,400", "12m ago"],
    ["Ayşe Demir", "Anadolu Yapı", "RTAD 150 chiller", "replied", "€ 29,900", "1h ago"],
    ["Mohammed Saleh", "Saleh Contracting", "AquaForce 30XA", "negotiating", "€ 46,500", "3h ago"],
    ["Fatima Noor", "Noor Developments", "VRV IV+ unit", "new", "€ 21,750", "5h ago"],
    ["Omar Yıldız", "Yıldız Mühendislik", "Cooling tower 850kW", "won", "€ 12,800", "1d ago"],
  ].slice(0, compact ? 4 : 5);
  const tone = { new: "info", replied: "warning", negotiating: "warning", won: "success" };
  return (
    <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-sans)" }}>
      <thead>
        <tr style={{ background: "var(--surface-inset)" }}>
          {["Buyer", "Equipment", "Status", "Quote", "Received", ""].map((h, i) => (
            <th key={i} style={{ textAlign: i === 3 ? "end" : "start", padding: "9px 20px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-faint)", borderBottom: "1px solid var(--border)" }}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {leads.map((l, i) => (
          <tr key={i} style={{ borderBottom: i < leads.length - 1 ? "1px solid var(--border-faint)" : "none" }}>
            <td style={{ padding: "13px 20px" }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)" }}>{l[0]}</div>
              <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{l[1]}</div>
            </td>
            <td style={{ padding: "13px 20px", fontSize: 13, color: "var(--text-body)" }}>{l[2]}</td>
            <td style={{ padding: "13px 20px" }}><StatusPill status={l[3] === "won" ? "in-stock" : l[3] === "new" ? "new" : "reserved"} tone={tone[l[3]]} label={l[3]} /></td>
            <td style={{ padding: "13px 20px", textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--text-strong)" }}>{l[4]}</td>
            <td style={{ padding: "13px 20px", fontSize: 12.5, color: "var(--text-muted)", whiteSpace: "nowrap" }}>{l[5]}</td>
            <td style={{ padding: "13px 20px", textAlign: "end" }}><Button size="sm" variant="secondary">Reply</Button></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ListingsScreen({ onNav }) {
  const { Button, StatusPill, Tag, PriceTag, Tabs } = NSds;
  const [tab, setTab] = React.useState("active");
  const rows = window.CS_PRODUCTS;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 1100 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Tabs variant="pill" value={tab} onChange={setTab} items={[{ value: "active", label: "Active", count: 48 }, { value: "draft", label: "Drafts", count: 6 }, { value: "sold", label: "Sold", count: 132 }]} />
        <div style={{ display: "flex", gap: 6 }}><Tag selected>R410A</Tag><Tag>Chillers</Tag></div>
      </div>
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-sans)" }}>
          <thead><tr style={{ background: "var(--surface-inset)" }}>
            {["Equipment", "Ref", "Capacity", "Status", "Views", "Leads", "Price", ""].map((h, i) => (
              <th key={i} style={{ textAlign: ["Capacity", "Views", "Leads", "Price"].includes(h) ? "end" : "start", padding: "10px 18px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-faint)", borderBottom: "1px solid var(--border)" }}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {rows.map((p, i) => (
              <tr key={p.id} style={{ borderBottom: i < rows.length - 1 ? "1px solid var(--border-faint)" : "none" }}>
                <td style={{ padding: "12px 18px", display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--slate-100)", flexShrink: 0 }} />
                  <div><div style={{ fontSize: 13, fontWeight: 600, color: "var(--text-strong)", maxWidth: 240, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.title}</div><div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{p.brand} · {p.condition}</div></div>
                </td>
                <td style={{ padding: "12px 18px", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{p.id.toUpperCase()}</td>
                <td style={{ padding: "12px 18px", textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, color: "var(--accent-ink)" }}>{p.capacity} kW</td>
                <td style={{ padding: "12px 18px" }}><StatusPill status={p.status} /></td>
                <td style={{ padding: "12px 18px", textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-body)" }}>{(1.2 + i * 0.4).toFixed(1)}k</td>
                <td style={{ padding: "12px 18px", textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)" }}>{3 + i}</td>
                <td style={{ padding: "12px 18px", textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)" }}>{p.price.onRequest ? "POA" : `€${(p.price.amount/1000).toFixed(1)}k`}</td>
                <td style={{ padding: "12px 18px", textAlign: "end" }}><Button size="sm" variant="ghost">Edit</Button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function LeadsScreen() {
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden", maxWidth: 1100 }}>
      <LeadRows />
    </div>
  );
}

Object.assign(window, { OverviewScreen, ListingsScreen, LeadsScreen, Stat });