// Komonichi — Dashboard. Stats, activity graph, brain map.
const { useKomonichi, sel, fmtMin, actions } = window.KomonichiState;

function StatTile({ label, value, sub, tone }) {
  return (
    <div className="card">
      <div className="label">{label}</div>
      <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1, fontWeight: 300, marginTop: 10, letterSpacing: '-0.02em', color: tone || 'var(--ink)' }}>
        {value}
      </div>
      {sub ? <div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 8, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{sub}</div> : null}
    </div>
  );
}

function ActivityGraph() {
  const [state] = useKomonichi();
  const data = sel.last14(state);
  const max = Math.max(60, ...data.map(d => d.minutes));
  const W = 720, H = 200, padX = 8, padY = 16;

  return (
    <div className="card">
      <div className="cap">
        <div>
          <div className="label">fourteen days · minutes attended</div>
          <h3 className="title"><span className="em">activity</span>, over time</h3>
        </div>
        <span className="chip">total {fmtMin(sel.totalFocusMin(state))}</span>
      </div>
      <div style={{ position: 'relative' }}>
        <svg viewBox={`0 0 ${W} ${H + 28}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
          {/* horizontal guides */}
          {[0.25, 0.5, 0.75, 1].map((p, i) => (
            <line key={i} x1={padX} x2={W - padX} y1={padY + (H - padY) * (1 - p)} y2={padY + (H - padY) * (1 - p)}
              stroke="var(--paper-line)" strokeWidth="0.6" strokeDasharray="2 4" opacity="0.6" />
          ))}
          {/* line path */}
          {(() => {
            const xs = data.map((d, i) => padX + (i / (data.length - 1)) * (W - padX * 2));
            const ys = data.map(d => padY + (H - padY) * (1 - d.minutes / max));
            const path = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x} ${ys[i]}`).join(' ');
            const area = `M ${xs[0]} ${H} ` + xs.map((x, i) => `L ${x} ${ys[i]}`).join(' ') + ` L ${xs[xs.length - 1]} ${H} Z`;
            return (
              <g>
                <path d={area} fill="rgba(179,90,58,0.10)" />
                <path d={path} fill="none" stroke="var(--persimmon)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                {xs.map((x, i) => (
                  <g key={i}>
                    <circle cx={x} cy={ys[i]} r={data[i].minutes > 0 ? 3.5 : 2}
                      fill={data[i].minutes > 0 ? 'var(--persimmon)' : 'var(--paper-line)'}
                      stroke="var(--paper)" strokeWidth="1.5" />
                  </g>
                ))}
              </g>
            );
          })()}
          {/* x labels */}
          {data.map((d, i) => {
            const x = padX + (i / (data.length - 1)) * (W - padX * 2);
            return (
              <text key={i} x={x} y={H + 22} textAnchor="middle"
                style={{ fontFamily: 'var(--mono)', fontSize: 9, fill: 'var(--ink-faint)', letterSpacing: '0.1em' }}>
                {d.day.getDate()}
              </text>
            );
          })}
        </svg>
      </div>
    </div>
  );
}

function BadgesPanel() {
  const [state] = useKomonichi();
  const recent = [...state.badges].sort((a, b) => b.date.localeCompare(a.date)).slice(0, 12);
  return (
    <div className="card">
      <div className="cap">
        <div>
          <div className="label">marks of practice</div>
          <h3 className="title"><span className="em">badges</span>, lately</h3>
        </div>
        <span className="chip warm">{state.badges.length}</span>
      </div>
      {recent.length === 0 ? (
        <div className="haiku">
          <span className="line">No marks yet.</span>
          <span className="line">Begin a session — the brush</span>
          <span className="line">leaves its first quiet print.</span>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {recent.map(b => (
            <div key={b.id} style={{ textAlign: 'center' }}>
              <div style={{
                width: 54, height: 54, borderRadius: '50%',
                border: '1px solid var(--persimmon)', margin: '0 auto 8px',
                background: 'radial-gradient(circle at 32% 30%, rgba(179,90,58,0.18), transparent 70%)',
                boxShadow: 'inset 3px -4px 0 -2px var(--paper), inset -5px 4px 0 -3px var(--paper-deep)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <span className="display" style={{ color: 'var(--persimmon)', fontSize: 22 }}>○</span>
              </div>
              <div className="display" style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.3 }}>{b.label}</div>
              <div className="label" style={{ fontSize: 8, marginTop: 4, opacity: 0.7 }}>{b.date}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ObjectivesProgress() {
  const [state] = useKomonichi();
  const all = [
    ...state.objectives.weekly.map(o => ({ ...o, scale: 'week' })),
    ...state.objectives.monthly.map(o => ({ ...o, scale: 'month' })),
    ...state.objectives.quarterly.map(o => ({ ...o, scale: 'quarter' })),
    ...state.objectives.yearly.map(o => ({ ...o, scale: 'year' })),
  ];
  return (
    <div className="card">
      <div className="cap">
        <div>
          <div className="label">direction · keeping</div>
          <h3 className="title">objectives, <span className="em">measured</span></h3>
        </div>
      </div>
      {all.map(o => {
        const linked = state.tasks.filter(t => t.objectiveId === o.id);
        const done = linked.filter(t => t.status === 'done').length;
        const pct = linked.length > 0 ? Math.round((done / linked.length) * 100) : 0;
        return (
          <div key={o.id} style={{ padding: '12px 0', borderBottom: '1px dashed var(--paper-line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
              <div className="display" style={{ fontSize: 15, color: 'var(--ink)' }}>{o.text}</div>
              <span className="chip">{o.scale}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
              <div className="label" style={{ opacity: 0.8 }}>{done}/{linked.length || 0} kept</div>
              <div className="num" style={{ fontSize: 11, color: 'var(--ink-faint)' }}>{pct}%</div>
            </div>
            <div style={{ height: 2, background: 'var(--paper-line)', marginTop: 5 }}>
              <div style={{ width: `${pct}%`, height: '100%', background: 'var(--persimmon)', transition: 'width 0.8s ease' }}></div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function FocusTargetSettings() {
  const [state] = useKomonichi();
  return (
    <div className="card">
      <div className="cap">
        <div>
          <div className="label">a chosen measure</div>
          <h3 className="title">daily <span className="em">target</span></h3>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 14 }}>
        {[60, 90, 120, 180, 240].map(m => (
          <button key={m} onClick={() => actions.setSettings({ dailyFocusTargetMin: m })}
            className="btn tiny"
            style={{
              background: state.settings.dailyFocusTargetMin === m ? 'var(--ink)' : 'transparent',
              color: state.settings.dailyFocusTargetMin === m ? 'var(--paper)' : 'var(--ink)',
            }}>
            {fmtMin(m)}
          </button>
        ))}
      </div>
      <div className="haiku" style={{ fontSize: 13 }}>
        Choose the day's mark. Beyond it, nothing more is owed — only what wishes to be done.
      </div>
      <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px dashed var(--paper-line)' }}>
        <div className="label">manage your account and data from your profile</div>
      </div>
    </div>
  );
}

function DashboardPage() {
  const [state] = useKomonichi();
  const total = sel.totalFocusMin(state);
  const sessions = sel.totalSessions(state);
  const streak = sel.streakDays(state);
  const today = sel.todayMinutes(state);
  const todayPct = sel.todayTargetPct(state);

  return (
    <div className="fade-in">
      <div style={{ marginBottom: 22 }}>
        <div className="label">what has accrued</div>
        <h2 className="display" style={{ fontSize: 48, lineHeight: 1, margin: '8px 0 0' }}>
          dashboard, <span style={{ color: 'var(--persimmon)' }}>quietly counted</span>
        </h2>
      </div>

      <div className="brush" style={{ marginBottom: 22 }}></div>

      <div className="grid g-12" style={{ marginBottom: 22 }}>
        <div className="c-3"><StatTile label="total attended" value={fmtMin(total)} sub={`${sessions} sessions`} /></div>
        <div className="c-3"><StatTile label="today" value={fmtMin(today)} sub={`${todayPct}% of the day's mark`} tone="var(--persimmon)" /></div>
        <div className="c-3"><StatTile label="streak" value={`${streak}`} sub={streak === 1 ? 'day' : 'days kept'} /></div>
        <div className="c-3"><StatTile label="open tasks" value={state.tasks.filter(t => t.status !== 'done').length} sub={`${state.tasks.filter(t => t.status === 'done').length} kept`} /></div>
      </div>

      <div className="grid g-12" style={{ marginBottom: 22 }}>
        <div className="c-7"><ActivityGraph /></div>
        <div className="c-5"><BadgesPanel /></div>
      </div>

      <div className="grid g-12" style={{ marginBottom: 22 }}>
        <div className="c-12">{window.BrainMap ? React.createElement(window.BrainMap) : null}</div>
      </div>

      <div className="grid g-12">
        <div className="c-7"><ObjectivesProgress /></div>
        <div className="c-5"><FocusTargetSettings /></div>
      </div>
    </div>
  );
}

window.DashboardPage = DashboardPage;