/* Dulius App UI Kit — Disputes & Negotiation center */

function ServiceCard({ s, onRequest }) {
  return (
    <Card className="dsvc">
      <div className="dsvc-head">
        <div className="dsvc-icon"><Icon name={s.icon} size={22} /></div>
        <div className="dsvc-price">
          <span className="dsvc-amt dnum">{s.price}</span>
          <span className="dsvc-model">{s.model}{s.info && <InfoDot text={s.info} />}</span>
        </div>
      </div>
      <div className="dsvc-name">{s.name}</div>
      <p className="dsvc-desc">{s.desc}</p>
      <div className="dsvc-includes">
        {s.includes.map((it, i) => <div key={i} className="dsvc-inc"><Icon name="check" size={15} /><span>{it}</span></div>)}
      </div>
      {s.id === "negotiation" && (
        <div className="dsvc-guarantee"><Icon name="shield-check" size={15} /> You're not charged unless the deal funds or terms improve.</div>
      )}
      {DULIUS.plans.current !== "Pro" && (
        <div className="dsvc-prodisc"><Icon name="gem" size={14} /> Pro members pay {s.id === "dispute" ? "$49 — save $50" : "$199 — save $100"}</div>
      )}
      <Button variant={s.id === "dispute" ? "primary" : "accent"} style={{ width: "100%" }} iconRight="arrow-right" onClick={() => onRequest(s)}>{s.cta}</Button>
    </Card>
  );
}

const DISPUTE_STEPS = ["Filed", "Under review", "In progress", "Resolved"];

function Disputes() {
  const d = DULIUS;
  const [confirm, setConfirm] = React.useState(null);
  const [accepted, setAccepted] = React.useState(false);
  const [dealSel, setDealSel] = React.useState(null);
  const [uploaded, setUploaded] = React.useState(false);
  const closeSvc = () => { setConfirm(null); setAccepted(false); setDealSel(null); setUploaded(false); };
  return (
    <div className="dscreen">
      <Card className="ddisp-hero" pad={false}>
        <div className="ddisp-hero-in">
          <div className="ddisp-hero-icon"><Icon name="shield" size={24} /></div>
          <div>
            <div className="ddisp-hero-t">We step in when things go sideways</div>
            <div className="ddisp-hero-s">If an issue arises between you and a lender, Dulius reviews everything and works to a fair resolution on your behalf.</div>
          </div>
        </div>
      </Card>

      <div className="dgrid-2">
        {d.services.map((s, i) => <ServiceCard key={i} s={s} onRequest={setConfirm} />)}
      </div>

      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Your active cases</h3><Badge tone="info" dot>{d.disputes.length} open</Badge></div>
        {d.disputes.map((c, i) => (
          <div key={i} className="ddisp-case">
            <div className="ddisp-case-top">
              <div><div className="ddisp-case-ref">{c.ref}</div><div className="ddisp-case-meta">{c.type} · filed {c.filed}</div></div>
              <Badge tone="info" dot>{c.status}</Badge>
            </div>
            <div className="ddisp-track">
              {DISPUTE_STEPS.map((st, j) => (
                <div key={j} className={`ddisp-tstep ${j <= c.step ? "done" : ""} ${j === c.step ? "active" : ""}`}>
                  <span className="ddisp-tdot">{j < c.step ? <Icon name="check" size={12} /> : ""}</span>
                  <span className="ddisp-tlabel">{st}</span>
                  {j < DISPUTE_STEPS.length - 1 && <span className="ddisp-tbar" />}
                </div>
              ))}
            </div>
            <div className="ddisp-case-foot">
              <button className="dchip ghost"><Icon name="paperclip" size={15} /> Upload documents</button>
              <button className="dchip ghost"><Icon name="message-square" size={15} /> Message thread</button>
            </div>
          </div>
        ))}
      </Card>

      {confirm && (
        <div className="dmodal-scrim" onClick={closeSvc}>
          <div className="dmodal wide" onClick={(e) => e.stopPropagation()}>
            {accepted ? (
              <React.Fragment>
                <div className="dmodal-icon" style={{ background: "var(--green-500)", color: "#08311A" }}><Icon name="check" size={24} /></div>
                <h3 className="dmodal-t">{confirm.id === "negotiation" ? "Negotiation requested" : "Dispute filed"}</h3>
                <p className="dmodal-s">For your <strong>{(DULIUS.openDeals.find(d => d.id === dealSel) || {}).name}</strong> deal. {confirm.id === "negotiation" ? "Our team will review it and reach out to the lender — you're not charged unless the deal funds or terms improve." : "We've opened your case. Track its status below as we work to a resolution."}</p>
                <Button variant="primary" style={{ width: "100%" }} onClick={closeSvc}>Got it</Button>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div className="dmodal-icon"><Icon name={confirm.icon} size={24} /></div>
                <h3 className="dmodal-t">{confirm.name}</h3>
                <p className="dmodal-s">{confirm.desc}</p>
                <div className="dsvc-dealsel">
                  <div className="dsvc-dealsel-h">Which deal is this about?</div>
                  {DULIUS.openDeals.map((d) => (
                    <button key={d.id} className={`dsvc-deal ${dealSel === d.id ? "on" : ""}`} onClick={() => setDealSel(d.id)}>
                      <span className="dsvc-deal-logo">{d.initials}</span>
                      <span className="dsvc-deal-txt"><span className="dsvc-deal-name">{d.name}</span><span className="dsvc-deal-detail">{d.detail}</span></span>
                      <span className={`dsvc-deal-radio ${dealSel === d.id ? "on" : ""}`}>{dealSel === d.id && <Icon name="check" size={12} />}</span>
                    </button>
                  ))}
                </div>
                <div className="dsvc-upload">
                  <div className="dsvc-upload-l"><Icon name="paperclip" size={16} /><div><div className="dsvc-upload-t">Supporting documents</div><div className="dsvc-upload-s">{uploaded ? "1 file attached" : "Add anything that helps your case (optional)"}</div></div></div>
                  <button className={`dchip ${uploaded ? "" : "ghost"}`} onClick={() => setUploaded(!uploaded)}><Icon name={uploaded ? "check" : "upload"} size={15} /> {uploaded ? "Added" : "Upload"}</button>
                </div>
                <div className="dmodal-pricerow">
                  <span>{confirm.model}</span>
                  <span className="dnum">{confirm.price}</span>
                </div>
                {confirm.info && <div className="dmodal-info"><Icon name="info" size={15} /> {confirm.info}</div>}
                <Button variant="accent" style={{ width: "100%", opacity: dealSel ? 1 : .5, pointerEvents: dealSel ? "auto" : "none" }} iconRight="arrow-right" onClick={() => { try { window.duliusSubmitRequest && window.duliusSubmitRequest({ service: confirm && confirm.name, serviceId: confirm && confirm.id, dealId: dealSel }); } catch (e) {} setAccepted(true); }}>{dealSel ? confirm.cta : "Select a deal to continue"}</Button>
                <button className="dmodal-cancel" onClick={closeSvc}>Not now</button>
              </React.Fragment>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Disputes, ServiceCard });