/* ============================================================
   PROGRESS PORTFOLIO v2 — Business & Money (Wealth)
   ============================================================ */
function Business({ me, updateMe, today }) {
  const P = window.PP;
  const [incOpen, setIncOpen] = useState(false);
  const [ytOpen, setYtOpen] = useState(false);
  const totals = P.moneyTotals(me, today);
  const goal = me.business.monthlyGoal || 0;
  const income = me.business.income || [];

  const weekBars = [];
  for (let i = 7; i >= 0; i--) {
    const ws = P.addDays(P.weekStart(today), -7 * i), we = P.addDays(ws, 6);
    let v = 0; income.forEach((e) => { if (e.iso >= ws && e.iso <= we) v += e.amount || 0; });
    weekBars.push({ label: P.MONTHS[P.parseISO(ws).getMonth()].slice(0, 3) + " " + P.parseISO(ws).getDate(), v: Math.round(v) });
  }
  // source breakdown
  const bySource = {};
  income.forEach((e) => (bySource[e.source] = (bySource[e.source] || 0) + (e.amount || 0)));
  const totalMin = income.reduce((a, e) => a + (e.minutes || 0), 0);
  const rate = totalMin ? totals.total / (totalMin / 60) : 0;

  function addIncome(e) { updateMe((m) => m.business.income.unshift(e)); }
  function delIncome(id) { updateMe((m) => (m.business.income = m.business.income.filter((x) => x.id !== id))); }
  function setGoal(v) { updateMe((m) => (m.business.monthlyGoal = v)); }
  function setChannel(id, patch) { updateMe((m) => (m.business.channels = m.business.channels.map((c) => c.id === id ? { ...c, ...patch } : c))); }
  function addYt(e) { updateMe((m) => m.business.youtube.unshift(e)); }

  const STAGES = ["Idea", "Building", "First 100", "1K subs", "Monetized", "Scaling"];

  return (
    <div className="biz">
      <div className="biz-top">
        <Card className="money-hero" glow>
          <div className="money-hero-grid">
            <div className="money-big">
              <div className="money-label">TOTAL EARNED</div>
              <div className="money-amount mono">${totals.total.toLocaleString()}</div>
              <div className="money-since mono dim">since {P.prettyDate(me.meta.createdISO)}</div>
            </div>
            <div className="money-splits">
              <div className="money-split"><span className="ms-label">THIS WEEK</span><span className="mono ms-val">${Math.round(totals.week).toLocaleString()}</span></div>
              <div className="money-split"><span className="ms-label">THIS MONTH</span><span className="mono ms-val">${Math.round(totals.month).toLocaleString()}</span></div>
            </div>
          </div>
          <div className="goal-block">
            <Bar pct={goal ? totals.month / goal : 0} label={`Monthly goal · $${Math.round(totals.month)} / $${goal}`} value={goal ? Math.round((totals.month / goal) * 100) + "%" : "—"} mono height={10} />
            <button className="mini-btn" onClick={() => { const v = prompt("Monthly income goal ($)", goal); if (v) setGoal(Number(v) || 0); }}>edit goal</button>
          </div>
        </Card>
        <Card title="Income — last 8 weeks"><BarChart data={weekBars} h={130} /></Card>
      </div>

      <div className="biz-grid">
        <Card title="Income log" right={<button className="btn btn-sm btn-accent" onClick={() => setIncOpen(true)}>+ Log income</button>}>
          <div className="dad-stats">
            <div><b className="mono">${totals.total.toLocaleString()}</b><span>total</span></div>
            <div><b className="mono">{(totalMin / 60).toFixed(1)}h</b><span>worked</span></div>
            <div><b className="mono">${rate.toFixed(0)}/h</b><span>effective</span></div>
          </div>
          <div className="source-chips">
            {Object.keys(bySource).map((s) => <span key={s} className="src-chip">{s} <b className="mono">${bySource[s].toLocaleString()}</b></span>)}
          </div>
          <div className="log-list">
            {income.length === 0 && <Empty>No income logged yet.</Empty>}
            {income.map((e) => (
              <div className="log-row" key={e.id}>
                <div className="log-main"><div className="log-title">{e.desc} <span className="src-tag">{e.source}</span></div><div className="log-meta mono dim">{P.prettyDate(e.iso)}{e.minutes ? " · " + (e.minutes / 60).toFixed(1) + "h" : ""}</div></div>
                <div className="log-amt mono">${e.amount}</div>
                <button className="mini-btn" onClick={() => delIncome(e.id)}>✕</button>
              </div>
            ))}
          </div>
        </Card>

        <Card title="YouTube" right={<button className="btn btn-sm btn-accent" onClick={() => setYtOpen(true)}>+ Log progress</button>}>
          <div className="channels">
            {me.business.channels.map((c) => {
              const pct = c.goalSubs ? Math.min(1, c.subs / c.goalSubs) : 0;
              return (
                <div className="channel" key={c.id}>
                  <div className="channel-head"><span className="channel-name">{c.name}</span><span className="channel-subs mono">{c.subs.toLocaleString()}<span className="dim"> / {c.goalSubs.toLocaleString()}</span></span></div>
                  <Bar pct={pct} height={8} />
                  <div className="stage-track">{STAGES.map((s, i) => <button key={s} className={"stage" + (i <= c.stage ? " on" : "")} onClick={() => setChannel(c.id, { stage: i })}>{s}</button>)}</div>
                  <div className="channel-edit"><button className="mini-btn" onClick={() => { const v = prompt("Sub count for " + c.name, c.subs); if (v != null) setChannel(c.id, { subs: Number(v) || 0 }); }}>edit subs</button></div>
                </div>
              );
            })}
          </div>
          <div className="yt-log">
            <div className="dd-section-label">RECENT</div>
            {me.business.youtube.slice(0, 6).map((e) => (
              <div className="yt-row" key={e.id}><span className={"yt-badge " + e.metric}>{e.metric === "income" ? "$" + e.value : e.value + " subs"}</span><span className="yt-note">{e.note}</span><span className="mono dim yt-date">{P.parseISO(e.iso).getMonth() + 1}/{P.parseISO(e.iso).getDate()}</span></div>
            ))}
          </div>
        </Card>
      </div>

      <CustomBlocks me={me} updateMe={updateMe} today={today} />

      {incOpen && <IncomeModal onClose={() => setIncOpen(false)} onAdd={addIncome} today={today} />}
      {ytOpen && <YtModal onClose={() => setYtOpen(false)} onAdd={addYt} channels={me.business.channels} today={today} />}
    </div>
  );
}

function CustomBlocks({ me, updateMe, today }) {
  const P = window.PP;
  const [adding, setAdding] = useState(false);
  const [logFor, setLogFor] = useState(null);
  const blocks = (me.business && me.business.custom) || [];
  function mutate(fn) { updateMe((m) => { m.business.custom = m.business.custom || []; fn(m.business.custom); }); }
  return (
    <Card title="Custom trackers" right={<button className="btn btn-sm btn-accent" onClick={() => setAdding(true)}>+ New tracker</button>}>
      <div className="ql-quote" style={{ marginTop: -4, marginBottom: 14 }}>Track any side-hustle metric — revenue, units sold, clients, downloads. These don't touch your stats.</div>
      {blocks.length === 0 && <Empty>No custom trackers yet.</Empty>}
      <div className="custom-grid">
        {blocks.map((b, bi) => {
          const total = b.entries.reduce((a, e) => a + (e.value || 0), 0);
          const series = b.entries.slice().sort((x, y) => x.iso < y.iso ? -1 : 1).map((e) => e.value);
          const hue = b.hue != null ? b.hue : 90;
          return (
            <div className="custom-block" key={b.id} style={{ "--gc": `oklch(0.82 0.15 ${hue})` }}>
              <div className="goal-card-head"><div className="goal-card-title" style={{ "--gc": `oklch(0.82 0.15 ${hue})` }}>{b.name}</div><button className="mini-btn" onClick={() => { if (confirm("Delete tracker?")) mutate((bs) => bs.splice(bi, 1)); }}>✕</button></div>
              <div className="custom-total mono" style={{ color: `oklch(0.82 0.15 ${hue})` }}>{b.unit === "$" ? "$" : ""}{total.toLocaleString()}{b.unit && b.unit !== "$" ? " " + b.unit : ""}</div>
              <div className="custom-sub mono dim">{b.entries.length} entries</div>
              {series.length > 1 && <Spark data={series} h={50} hue={hue} fill />}
              <div className="custom-recent">
                {b.entries.slice(-3).reverse().map((e) => <div className="custom-entry mono" key={e.id}><span>{b.unit === "$" ? "$" : ""}{e.value}{b.unit && b.unit !== "$" ? " " + b.unit : ""}</span><span className="dim">{e.note || P.parseISO(e.iso).getMonth() + 1 + "/" + P.parseISO(e.iso).getDate()}</span></div>)}
              </div>
              <button className="btn btn-sm btn-accent" onClick={() => setLogFor(bi)}>+ Log</button>
            </div>
          );
        })}
      </div>
      {adding && <NewBlockModal onClose={() => setAdding(false)} onCreate={(b) => { mutate((bs) => bs.push(b)); setAdding(false); }} />}
      {logFor != null && <LogBlockModal block={blocks[logFor]} today={today} onClose={() => setLogFor(null)} onAdd={(e) => { mutate((bs) => bs[logFor].entries.push(e)); setLogFor(null); }} />}
    </Card>
  );
}

function NewBlockModal({ onClose, onCreate }) {
  const [name, setName] = useState("");
  const [unit, setUnit] = useState("$");
  const [hue, setHue] = useState(90);
  const HUES = [90, 162, 200, 75, 295, 330];
  return (
    <Modal open onClose={onClose} title="New custom tracker"
      footer={<button className="btn btn-accent" disabled={!name.trim()} onClick={() => { onCreate({ id: "cb" + Date.now(), name: name.trim(), unit, hue, entries: [] }); }}>Create</button>}>
      <div className="stack">
        <Field label="Tracker name"><input className="inp" autoFocus value={name} placeholder="e.g. Etsy revenue, Clients closed" onChange={(e) => setName(e.target.value)} /></Field>
        <Field label="Unit"><input className="inp" value={unit} placeholder="$, units, clients…" onChange={(e) => setUnit(e.target.value)} /></Field>
        <Field label="Color"><div className="hue-row">{HUES.map((h) => <button key={h} className={"hue-dot" + (hue === h ? " on" : "")} style={{ background: `oklch(0.82 0.15 ${h})` }} onClick={() => setHue(h)} />)}</div></Field>
      </div>
    </Modal>
  );
}

function LogBlockModal({ block, today, onClose, onAdd }) {
  const [value, setValue] = useState("");
  const [note, setNote] = useState("");
  const [iso, setIso] = useState(today);
  return (
    <Modal open onClose={onClose} title={"Log — " + block.name}
      footer={<button className="btn btn-accent" disabled={value === ""} onClick={() => { onAdd({ id: "e" + Date.now(), iso, value: Number(value) || 0, note }); }}>Add entry</button>}>
      <div className="stack">
        <Field label={"Value (" + block.unit + ")"}><input className="inp" type="number" autoFocus value={value} onChange={(e) => setValue(e.target.value)} /></Field>
        <Field label="Note (optional)"><input className="inp" value={note} placeholder="e.g. 3 orders" onChange={(e) => setNote(e.target.value)} /></Field>
        <Field label="Date"><input className="inp" type="date" value={iso} onChange={(e) => setIso(e.target.value)} /></Field>
      </div>
    </Modal>
  );
}

function IncomeModal({ onClose, onAdd, today }) {
  const [desc, setDesc] = useState("");
  const [source, setSource] = useState("Dad");
  const [amount, setAmount] = useState(100);
  const [hours, setHours] = useState(2);
  const [iso, setIso] = useState(today);
  return (
    <Modal open onClose={onClose} title="Log income"
      footer={<button className="btn btn-accent" disabled={!desc.trim()} onClick={() => { onAdd({ id: "inc" + Date.now(), iso, source, desc, amount: Number(amount) || 0, minutes: Math.round((Number(hours) || 0) * 60) }); onClose(); }}>Log it</button>}>
      <div className="stack">
        <Field label="What did you do?"><input className="inp" autoFocus value={desc} placeholder="e.g. Helped with client install" onChange={(e) => setDesc(e.target.value)} /></Field>
        <Field label="Source"><Seg options={[{ value: "Dad", label: "Dad" }, { value: "Freelance", label: "Freelance" }, { value: "Sales", label: "Sales" }, { value: "Content", label: "Content" }]} value={source} onChange={setSource} /></Field>
        <div className="row2">
          <Field label="Amount made ($)"><input className="inp" type="number" value={amount} onChange={(e) => setAmount(e.target.value)} /></Field>
          <Field label="Time (hours)"><input className="inp" type="number" step="0.25" value={hours} onChange={(e) => setHours(e.target.value)} /></Field>
        </div>
        <Field label="Date"><input className="inp" type="date" value={iso} onChange={(e) => setIso(e.target.value)} /></Field>
      </div>
    </Modal>
  );
}

function YtModal({ onClose, onAdd, channels, today }) {
  const [channel, setChannel] = useState(channels[0] ? channels[0].name : "Main Channel");
  const [metric, setMetric] = useState("subs");
  const [value, setValue] = useState(0);
  const [note, setNote] = useState("");
  const [iso, setIso] = useState(today);
  return (
    <Modal open onClose={onClose} title="Log YouTube progress"
      footer={<button className="btn btn-accent" onClick={() => { onAdd({ id: "yt" + Date.now(), iso, channel, metric, value: Number(value) || 0, note }); onClose(); }}>Log it</button>}>
      <div className="stack">
        <Field label="Channel"><select className="inp" value={channel} onChange={(e) => setChannel(e.target.value)}>{channels.map((c) => <option key={c.id}>{c.name}</option>)}</select></Field>
        <Field label="Metric"><Seg options={[{ value: "subs", label: "Subs" }, { value: "income", label: "Income $" }, { value: "views", label: "Views" }]} value={metric} onChange={setMetric} /></Field>
        <Field label="Value"><input className="inp" type="number" value={value} onChange={(e) => setValue(e.target.value)} /></Field>
        <Field label="Note"><input className="inp" value={note} placeholder="e.g. Shorts pushed a spike" onChange={(e) => setNote(e.target.value)} /></Field>
        <Field label="Date"><input className="inp" type="date" value={iso} onChange={(e) => setIso(e.target.value)} /></Field>
      </div>
    </Modal>
  );
}

Object.assign(window, { Business });