// CoolSouq Marketplace — Request-for-quote modal (multi-step).
const NSr = window.CoolSouqDesignSystem_f4ec4c;

function RfqModal({ product, onClose }) {
  const { Button, Input, Select, Checkbox, PriceTag, StatusPill } = NSr;
  const [step, setStep] = React.useState(1);
  const p = product;
  if (!p) return null;

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "var(--overlay)", backdropFilter: "blur(2px)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 560, maxWidth: "100%", maxHeight: "90vh", overflow: "auto", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)" }}>
        {/* header */}
        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>
              {step < 3 ? "Request a quote" : "Request sent"}
            </div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>{p.brand} · {p.title}</div>
          </div>
          <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: "1px solid var(--border)", background: "var(--surface-card)", cursor: "pointer", color: "var(--text-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
        </div>

        {/* steps indicator */}
        {step < 3 && (
          <div style={{ display: "flex", gap: 6, padding: "14px 24px 0" }}>
            {[1, 2].map(s => <div key={s} style={{ flex: 1, height: 4, borderRadius: 2, background: s <= step ? "var(--brand)" : "var(--border)" }} />)}
          </div>
        )}

        <div style={{ padding: 24 }}>
          {step === 1 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", gap: 12, padding: 12, background: "var(--surface-inset)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border)" }}>
                <div style={{ width: 64, height: 64, borderRadius: "var(--radius-md)", background: "var(--slate-100)", flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <StatusPill status={p.status} />
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--text-strong)", marginTop: 6, lineHeight: 1.3 }}>{p.title}</div>
                </div>
                <PriceTag size="md" amount={p.price.amount} currency={p.price.currency} onRequest={p.price.onRequest} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <Input label="Quantity" defaultValue="1" inputMode="numeric" />
                <Select label="Needed by" options={[{ value: "asap", label: "As soon as possible" }, { value: "30", label: "Within 30 days" }, { value: "q", label: "This quarter" }]} />
              </div>
              <Select label="Delivery terms" options={[{ value: "exw", label: "EXW — I arrange transport" }, { value: "ddp", label: "DDP — delivered, duties paid" }, { value: "fob", label: "FOB — to nearest port" }]} />
              <div>
                <label style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)", display: "block", marginBottom: 6 }}>Message to dealer</label>
                <textarea rows={3} defaultValue="Please confirm availability, latest service report and freight cost to Riyadh." style={{ width: "100%", boxSizing: "border-box", padding: "10px 12px", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-control)", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", resize: "vertical", outline: "none", background: "var(--surface-inset)" }} />
              </div>
              <Checkbox label="Also request an independent inspection (from € 350)" checked={false} onChange={() => {}} />
            </div>
          )}

          {step === 2 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <Input label="Full name" defaultValue="Khalid Al-Mansoori" />
                <Input label="Company" defaultValue="Mansoori Facilities Co." />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <Input label="Work email" defaultValue="k.almansoori@mfc.ae" />
                <Input label="Phone" defaultValue="+966 50 123 4567" />
              </div>
              <Select label="Country" options={[{ value: "sa", label: "Saudi Arabia" }, { value: "ae", label: "United Arab Emirates" }, { value: "qa", label: "Qatar" }, { value: "tr", label: "Türkiye" }]} />
              <Checkbox label="I agree to CoolSouq's buyer terms and privacy policy" checked={true} onChange={() => {}} />
            </div>
          )}

          {step === 3 && (
            <div style={{ textAlign: "center", padding: "16px 0 8px" }}>
              <div style={{ width: 64, height: 64, margin: "0 auto", borderRadius: "50%", background: "var(--success-bg)", color: "var(--success-ink)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 700, color: "var(--text-strong)", margin: "16px 0 6px" }}>Quote request sent</h3>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)", maxWidth: 360, margin: "0 auto" }}>
                <strong style={{ color: "var(--text-body)" }}>{p.dealer}</strong> typically replies within 4 business hours. We've sent a copy to your email — track it under <em>My RFQs</em>.
              </p>
            </div>
          )}
        </div>

        {/* footer */}
        <div style={{ padding: "16px 24px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
          {step === 1 && <><span style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-faint)" }}>Free · no obligation</span><Button onClick={() => setStep(2)}>Continue</Button></>}
          {step === 2 && <><Button variant="ghost" onClick={() => setStep(1)}>Back</Button><Button onClick={() => setStep(3)}>Send request</Button></>}
          {step === 3 && <><span /><Button variant="secondary" onClick={onClose}>Done</Button></>}
        </div>
      </div>
    </div>
  );
}
window.RfqModal = RfqModal;