/* Dulius App UI Kit — Automated Profile Analysis (Premium) */

function ReadinessGauge({ value }) {
  const W = 200, H = 108, cx = 100, cy = 94, r = 74, sw = 14;
  const START = -90, SWEEP = 180;
  const pol = (ang, rad) => { const a = (ang * Math.PI) / 180; return [cx + rad * Math.sin(a), cy - rad * Math.cos(a)]; };
  const arc = (a0, a1, rad) => { const [x0, y0] = pol(a0, rad), [x1, y1] = pol(a1, rad); const large = a1 - a0 > 180 ? 1 : 0; return `M ${x0} ${y0} A ${rad} ${rad} 0 ${large} 1 ${x1} ${y1}`; };
  const frac = Math.max(0, Math.min(1, value / 10));
  return (
    <div className="dread-gauge">
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
        <path d={arc(START, START + SWEEP, r)} fill="none" stroke="#E8F0E8" strokeWidth={sw} strokeLinecap="round" />
        <path d={arc(START, START + frac * SWEEP, r)} fill="none" stroke="#2DBD6E" strokeWidth={sw} strokeLinecap="round" />
      </svg>
      <div className="dread-center"><span className="dread-v dnum">{value}</span><span className="dread-d">/ 10</span></div>
    </div>
  );
}

function MetricRow({ m }) {
  const tone = m.status === "good" ? "#21813F" : "#F5A623";
  const icon = m.status === "good" ? "check-circle-2" : "alert-circle";
  return (
    <div className="dmetric">
      <span className="dmetric-icon" style={{ color: tone }}><Icon name={icon} size={18} /></span>
      <div className="dmetric-txt"><div className="dmetric-label">{m.label}</div><div className="dmetric-sub">{m.sub}</div></div>
      <span className="dmetric-val dnum">{m.value}</span>
    </div>
  );
}

function Analysis({ onNav, onUpgrade, locked }) {
  const a = DULIUS.analysis;
  if (locked) {
    return (
      <div className="dscreen">
        <Card className="dlock">
          <div className="dlock-icon"><Icon name="lock" size={26} /></div>
          <h2 className="dlock-h">Automated Profile Analysis</h2>
          <p className="dlock-s">Connect your bank and credit and Dulius automatically analyzes your full financial picture — what's holding you back, what you qualify for, and your 30/60/90-day path. Zero human interaction.</p>
          <Button variant="accent" iconRight="arrow-right" onClick={onUpgrade}>Upgrade to Premium — $19/mo</Button>
        </Card>
      </div>
    );
  }
  return (
    <div className="dscreen">
      <div className="danalysis-top">
        <div className="danalysis-updated"><Icon name="refresh-cw" size={14} /> Updated {a.updated} · auto-generated</div>
      </div>

      {/* Readiness */}
      <Card className="dread">
        <ReadinessGauge value={a.readiness} />
        <div className="dread-side">
          <div className="ds-overline">Funding readiness</div>
          <div className="dread-label">{a.readinessLabel}</div>
          <p className="dread-note">{a.readinessNote}</p>
        </div>
      </Card>

      <div className="dgrid-2">
        {/* Bank health */}
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Bank health</h3><Badge tone="neutral">Plaid · {a.bankScore}/10</Badge></div>
          <div className="dmetrics">{a.bank.map((m, i) => <MetricRow key={i} m={m} />)}</div>
          <div className="dflowchart">
            {a.bankFlow.map((v, i) => <div key={i} className="dflowbar" style={{ height: `${(v / 20) * 100}%` }} title={"$" + v + "k"} />)}
          </div>
          <div className="dflow-label">6-month revenue trend</div>
        </Card>

        {/* Personal credit */}
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Credit estimate</h3><Badge tone="neutral">Self-reported · verify later</Badge></div>
          <div className="dmscredit" style={{ marginBottom: 16 }}>
            <div className="dmscredit-col"><div className="dmscredit-v dnum">{DULIUS.personalCredit.range}</div><div className="dmscredit-l">Est. range</div><Badge tone="warning">{DULIUS.personalCredit.estimate}</Badge></div>
            <div className="dmscredit-div" />
            <div className="dmscredit-col"><div className="dmscredit-v dnum" style={{ color: "#F5A623" }}>{DULIUS.personalCredit.utilization}%</div><div className="dmscredit-l">Est. utilization</div><Badge tone="warning">High</Badge></div>
          </div>
          <div className="dmetrics">
            <MetricRow m={{ label: "Payment history", value: DULIUS.personalCredit.payHistory + "%", sub: "Self-reported on-time rate", status: "good" }} />
            <MetricRow m={{ label: "Derogatory marks", value: String(DULIUS.personalCredit.derogatory), sub: "Confirm during underwriting", status: "warn" }} />
            <MetricRow m={{ label: "Oldest account", value: DULIUS.personalCredit.oldest, sub: "Strong credit age", status: "good" }} />
          </div>
        </Card>
      </div>

      {/* What's holding you back */}
      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">What's holding you back</h3><Badge tone="warning">Ranked by impact</Badge></div>
        <div className="dhold">
          {a.holdingBack.map((h, i) => (
            <div key={i} className="dhold-row">
              <span className="dhold-num dnum">{i + 1}</span>
              <div className="dhold-main">
                <div className="dhold-titlerow"><span className="dhold-title">{h.title}</span><Badge tone="neutral">{h.detail}</Badge></div>
                <div className="dhold-fix"><strong>Fix:</strong> {h.fix} · <span className="dhold-time">{h.timeline}</span></div>
              </div>
              <span className="dhold-gain dnum">+{h.gain}</span>
            </div>
          ))}
        </div>
      </Card>

      <div className="dgrid-2">
        {/* Qualify now */}
        <Card className="dpanel dqual-card">
          <div className="dpanel-head"><h3 className="ds-h3">What you qualify for now</h3></div>
          <div className="dqualnow">
            {a.qualifyNow.map((q, i) => <div key={i} className="dqualnow-row"><Icon name="check" size={16} /><span>{q}</span></div>)}
          </div>
          <Button variant="accent" iconRight="arrow-right" onClick={() => onNav("offers")} style={{ marginTop: 14 }}>Start my Score Builder deal</Button>
        </Card>

        {/* 30/60/90 path */}
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Your 30/60/90-day path</h3></div>
          <div className="dpath9">
            {a.path.map((p, i) => (
              <div key={i} className="dpath9-row">
                <div className="dpath9-when">{p.when}</div>
                <div className="dpath9-line"><span className="dpath9-dot" style={{ background: bandFor(p.score).color }} />{i < a.path.length - 1 && <span className="dpath9-bar" />}</div>
                <div className="dpath9-body"><span className="dpath9-score dnum">{p.score}</span><span className="dpath9-note">{p.note}</span></div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}
Object.assign(window, { Analysis, ReadinessGauge });