// CoolSouq Buyer Account — screens (RFQs, Quote detail, Order tracking).
const NSb = window.CoolSouqDesignSystem_f4ec4c;

const BIcon = ({ d, s = 18 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>;
const BI = {
  rfq: <BIcon d={<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></>} />,
  orders: <BIcon d={<><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></>} />,
  watch: <BIcon d={<path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>} />,
  truck: <BIcon d={<><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7"/><circle cx="5.5" cy="18.5" r="2"/><circle cx="18.5" cy="18.5" r="2"/></>} />,
  settings: <BIcon d={<><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.3l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2.2-1.3L13.9 2h-3.8l-.4 2.5a7 7 0 0 0-2.2 1.3l-2.4-1-2 3.4 2 1.6a7 7 0 0 0 0 2.6l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2.2 1.3l.4 2.5h3.8l.4-2.5a7 7 0 0 0 2.2-1.3l2.4 1 2-3.4-2-1.6c.1-.4.1-.9.1-1.3z"/></>} />,
};

function BuyerRail({ active, onNav }) {
  const items = [["rfqs", "My RFQs", BI.rfq, 6], ["orders", "Orders", BI.orders, 2], ["watch", "Watchlist", BI.watch, 3], ["tracking", "Shipments", BI.truck, 1], ["settings", "Settings", BI.settings]];
  return (
    <aside style={{ width: 230, flexShrink: 0 }}>
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 16, marginBottom: 14, display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: "50%", background: "var(--slate-900)", color: "var(--gold-300)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16 }}>KM</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)" }}>Khalid Al-Mansoori</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, color: "var(--text-muted)" }}>Mansoori Facilities Co.</div>
        </div>
      </div>
      <nav style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 8, display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map(([k, label, icon, n]) => {
          const on = active === k;
          return (
            <button key={k} onClick={() => onNav(k)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 12px", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", textAlign: "start", fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: on ? 600 : 500, color: on ? "var(--text-strong)" : "var(--text-body)", background: on ? "var(--surface-brand-tint)" : "transparent", borderLeft: on ? "2px solid var(--brand)" : "2px solid transparent" }}>
              <span style={{ display: "inline-flex", color: on ? "var(--brand-ink)" : "var(--text-muted)" }}>{icon}</span>{label}
              {n ? <span style={{ marginInlineStart: "auto", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, color: on ? "var(--brand-ink)" : "var(--text-faint)", background: on ? "var(--gold-100)" : "var(--bg-sunken)", borderRadius: 10, padding: "1px 7px" }}>{n}</span> : null}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}

function RfqsScreen({ onOpen }) {
  const { StatusPill, Button, Tabs } = NSb;
  const [tab, setTab] = React.useState("open");
  const rfqs = [
    { ref: "RFQ-2841", item: "Air-cooled chiller NECS-WL/B 1314", dealer: "Gulf Cooling Trading", status: "quoted", price: "€ 17,900", date: "12 Jun", quotes: 3 },
    { ref: "RFQ-2838", item: "AquaForce 30XA-802 chiller", dealer: "Najd Climate Systems", status: "waiting", price: "—", date: "11 Jun", quotes: 0 },
    { ref: "RFQ-2835", item: "Sintesis RTAD 150 chiller", dealer: "Anadolu İklimlendirme", status: "negotiating", price: "€ 28,400", date: "09 Jun", quotes: 2 },
    { ref: "RFQ-2829", item: "VRV IV+ RXYQ-T condensing unit", dealer: "Emirates HVAC Supply", status: "quoted", price: "€ 21,750", date: "06 Jun", quotes: 1 },
    { ref: "RFQ-2820", item: "Series 3000 cooling tower 850 kW", dealer: "Gulf Cooling Trading", status: "accepted", price: "€ 12,800", date: "01 Jun", quotes: 4 },
  ];
  const map = { quoted: ["new", "info", "Quoted"], waiting: ["reserved", "warning", "Awaiting quote"], negotiating: ["reserved", "warning", "Negotiating"], accepted: ["in-stock", "success", "Accepted"] };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Tabs value={tab} onChange={setTab} items={[{ value: "open", label: "Open", count: 6 }, { value: "accepted", label: "Accepted", count: 2 }, { value: "closed", label: "Closed", count: 14 }]} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {rfqs.map(r => {
          const [st, tone, lbl] = map[r.status];
          return (
            <div key={r.ref} onClick={() => onOpen(r)} style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 16, display: "flex", alignItems: "center", gap: 18, cursor: "pointer", transition: "var(--t-color)" }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.boxShadow = "none"; }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--slate-100)", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-faint)" }}>{r.ref}</span>
                  <StatusPill status={st} tone={tone} label={lbl} />
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)", marginTop: 4 }}>{r.item}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 2 }}>{r.dealer} · sent {r.date}{r.quotes > 0 ? ` · ${r.quotes} ${r.quotes === 1 ? "quote" : "quotes"} received` : ""}</div>
              </div>
              <div style={{ textAlign: "end" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 600, color: r.price === "—" ? "var(--text-faint)" : "var(--text-strong)" }}>{r.price}</div>
                <div style={{ marginTop: 6 }}><Button size="sm" variant={r.status === "quoted" ? "primary" : "secondary"}>{r.status === "quoted" ? "Review quotes" : "View"}</Button></div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function OrderTrackingScreen() {
  const { Card, StatusPill, Button, VerifiedDealerBadge } = NSb;
  const steps = [
    ["Order placed", "01 Jun · Payment held in escrow", true],
    ["Dealer confirmed", "02 Jun · Gulf Cooling Trading", true],
    ["Inspection passed", "04 Jun · Independent surveyor", true],
    ["In transit", "Est. arrival 18 Jun · 1× 40ft flat-rack", "active"],
    ["Customs clearance", "Pending — Jebel Ali → Riyadh", false],
    ["Delivered", "Confirm to release escrow", false],
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 18 }}>
      <Card padding="lg">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6 }}>
          <div>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)" }}>ORDER-1182</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, color: "var(--text-strong)", margin: "4px 0 0" }}>Series 3000 cooling tower — 850 kW</h2>
          </div>
          <StatusPill status="reserved" tone="info" label="In transit" />
        </div>
        <div style={{ marginTop: 24, position: "relative" }}>
          {steps.map(([t, s, done], i) => (
            <div key={i} style={{ display: "flex", gap: 14, paddingBottom: i < steps.length - 1 ? 22 : 0, position: "relative" }}>
              {i < steps.length - 1 && <div style={{ position: "absolute", insetInlineStart: 11, top: 24, bottom: 0, width: 2, background: done === true ? "var(--success)" : "var(--border)" }} />}
              <div style={{ width: 24, height: 24, borderRadius: "50%", flexShrink: 0, zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: done === true ? "var(--success)" : done === "active" ? "var(--brand)" : "var(--bg-sunken)", border: done === false ? "2px solid var(--border-strong)" : "none", color: "#fff" }}>
                {done === true && <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}
                {done === "active" && <span style={{ width: 8, height: 8, borderRadius: 4, background: "#fff" }} />}
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, color: done === false ? "var(--text-faint)" : "var(--text-strong)" }}>{t}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 1 }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <Card padding="lg">
          <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, color: "var(--text-strong)", marginBottom: 14 }}>Order summary</div>
          {[["Equipment", "€ 12,800"], ["Inspection", "€ 350"], ["Freight (DDP)", "€ 2,150"], ["Platform fee", "€ 0"]].map(([l, v]) => (
            <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "7px 0", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-body)", borderBottom: "1px solid var(--border-faint)" }}><span>{l}</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{v}</span></div>
          ))}
          <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 12, fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, color: "var(--text-strong)" }}><span>Total</span><span style={{ fontFamily: "var(--font-mono)" }}>€ 15,300</span></div>
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
            <Button fullWidth disabled>Confirm delivery</Button>
            <Button fullWidth variant="ghost">Contact dealer</Button>
          </div>
        </Card>
        <Card padding="md">
          <VerifiedDealerBadge name="Gulf Cooling Trading" deals={240} country="AE" size="sm" />
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { BuyerRail, RfqsScreen, OrderTrackingScreen });