/* Dulius App UI Kit — Dashboard */

function Sparkline({ points, w = 132, h = 40 }) {
  const min = Math.min(...points), max = Math.max(...points);
  const pad = 4;
  const xs = (i) => pad + (i * (w - pad * 2)) / (points.length - 1);
  const ys = (v) => h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2);
  const d = points.map((p, i) => `${i ? "L" : "M"} ${xs(i).toFixed(1)} ${ys(p).toFixed(1)}`).join(" ");
  const area = `${d} L ${xs(points.length - 1)} ${h} L ${xs(0)} ${h} Z`;
  return (
    <svg width={w} height={h} className="dspark">
      <defs><linearGradient id="spk" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#2DBD6E" stopOpacity="0.25" /><stop offset="1" stopColor="#2DBD6E" stopOpacity="0" />
      </linearGradient></defs>
      <path d={area} fill="url(#spk)" />
      <path d={d} fill="none" stroke="#21813F" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function FactorRow({ f }) {
  const tone = { good: "#21813F", ok: "#F5A623", warn: "#E05C5C" }[f.tone];
  return (
    <div className="dfactor">
      <div className="dfactor-head">
        <span className="dfactor-label">{f.label}</span>
        <span className="dfactor-weight">{f.weightPct}% weight</span>
      </div>
      <div className="dfactor-bar">
        <ProgressBar value={f.contribution} color={tone} height={7} />
        <span className="dfactor-score dnum" style={{ color: tone }}>{f.contribution}</span>
      </div>
      <div className="dfactor-note">{f.note}</div>
    </div>
  );
}

function Dashboard({ onNav, onApply, onApplyFunding }) {
  const d = DULIUS;
  return (
    <div className="dscreen">
      <div className="dapply-cta">
        <div className="dapply-cta-l">
          <span className="dapply-cta-ic"><Icon name="file-plus" size={20} /></span>
          <div><div className="dapply-cta-t">Need capital? Apply for funding</div><div className="dapply-cta-s">One application · no credit pull · matched to funders ranked by fit</div></div>
        </div>
        <Button variant="accent" iconRight="arrow-right" onClick={() => onApplyFunding && onApplyFunding()}>Apply for funding</Button>
      </div>
      <div className="dgrid-hero">
        {/* Score hero */}
        <Card className="dscorehero">
          <div className="dscorehero-top">
            <div>
              <div className="ds-overline">Your Dulius Score</div>
              <div className="dscorehero-sub">Updated {d.score.updated}</div>
            </div>
            <Badge tone="success" dot>Auto-synced</Badge>
          </div>
          <div className="dscorehero-body">
            <ScoreGauge value={d.score.value} size={252} />
            <div className="dscorehero-side">
              <div className="dscorehero-deltarow">
                <Delta value={d.score.delta} /> <span className="dmuted">this month</span>
              </div>
              <p className="dscorehero-msg">You're in <strong>{d.score.band}</strong>. You're <strong className="dnum">{d.milestone.points} points</strong> from {d.milestone.target} — keep your payments on time and you'll get there.</p>
              <Button variant="accent" iconRight="arrow-right" onClick={() => onNav("myscore")}>See my score path</Button>
              <div className="dscorehero-range dnum"><span>300</span><span>850</span></div>
            </div>
          </div>
        </Card>

        {/* Stats column */}
        <div className="dstatcol">
          {d.stats.map((s, i) => (
            <Card key={i} className="dstat">
              <div className="dstat-icon"><Icon name={s.icon} size={20} /></div>
              <div className="dstat-body">
                <div className="dstat-label">{s.label}</div>
                <div className="dstat-value dnum">{s.value}</div>
                {s.delta != null && <Delta value={s.delta} suffix={s.suffix || ""} money={s.money} />}
                {s.sub && <div className="dstat-sub">{s.sub}</div>}
              </div>
            </Card>
          ))}
        </div>
      </div>

      <div className="dgrid-2">
        {/* Score factors */}
        <Card className="dpanel">
          <div className="dpanel-head">
            <h3 className="ds-h3">What's shaping your score</h3>
            <a className="dlink" href="#" onClick={(e)=>{e.preventDefault();onNav("myscore");}}>Full breakdown →</a>
          </div>
          <div className="dfactors">
            {d.factors.map((f, i) => <FactorRow key={i} f={f} />)}
          </div>
        </Card>

        <div className="dstack">
          {/* Trend */}
          <Card className="dpanel">
            <div className="dpanel-head">
              <h3 className="ds-h3">6-month trend</h3>
              <Badge tone="success">+{d.history6mo[5] - d.history6mo[0]} pts</Badge>
            </div>
            <div className="dtrend">
              <div className="dtrend-now dnum">{d.score.value}</div>
              <Sparkline points={d.history6mo} w={180} h={56} />
            </div>
            <div className="dtrend-labels"><span>Dec</span><span>May</span></div>
          </Card>

          {/* Top offer */}
          <Card className="dpanel">
            <div className="dpanel-head">
              <h3 className="ds-h3">Top match</h3>
              <a className="dlink" href="#" onClick={(e)=>{e.preventDefault();onNav("offers");}}>All offers →</a>
            </div>
            <OfferRow o={d.offers[0]} compact onApply={onApply} />
          </Card>
        </div>
      </div>

      {/* Activity */}
      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Recent activity</h3></div>
        <div className="dactivity">
          {d.activity.map((a, i) => (
            <div key={i} className="dactivity-row">
              <span className={`dactivity-icon t-${a.tone}`}><Icon name={a.icon} size={18} /></span>
              <div className="dactivity-txt"><div className="dactivity-title">{a.title}</div><div className="dactivity-meta">{a.meta}</div></div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Dashboard, Sparkline, FactorRow });