// Lynxe — Dashboard
const { useState: dUseState, useEffect: dUseEffect, useMemo: dUseMemo } = React;

function Dashboard({ goto }) {
  const [tasks, setTasks] = dUseState([]);
  const [missions, setMissions] = dUseState([]);
  const [lectures, setLectures] = dUseState([]);
  const [posts, setPosts] = dUseState([]);
  const [loading, setLoading] = dUseState(true);

  dUseEffect(() => {
    Promise.all([
      fnGetCached('today-tasks').then(r => {
        const list = (r.tasks || []).map(transformTask);
        setTasks(list);
        window.TODAY_TASKS = list;
      }),
      fnGetCached('missions').then(r => {
        const list = (r.missions || []).map(transformMission);
        setMissions(list);
        window.MISSIONS = list;
      }),
      fnGetCached('lecture-sessions').then(r => {
        const list = (r.sessions || []).map(transformLecture);
        setLectures(list);
        window.LECTURES = list;
      }),
      dbGetCached('classroom_posts?order=synced_at.desc&limit=100').then(rows => {
        const list = rows.map(transformPost);
        setPosts(list);
        window.CLASSROOM_POSTS = list;
      }),
    ])
      .catch(e => console.error('dashboard load:', e))
      .finally(() => setLoading(false));
  }, []);

  const toggle = (task) => {
    setTasks(ts => ts.map(t => t.id === task.id ? { ...t, done: !t.done } : t));
    fnPost('complete-task', { task_id: task.id, mission_id: task.missionId }).catch(() => {
      setTasks(ts => ts.map(t => t.id === task.id ? { ...t, done: task.done } : t));
    });
  };

  const remaining = tasks.filter(t => !t.done);
  const completed = tasks.filter(t => t.done);
  const totalMin = remaining.reduce((a, t) => a + parseInt(t.est, 10), 0);
  const upcoming = dUseMemo(() => [...missions].sort((a, b) => a.daysLeft - b.daysLeft).slice(0, 5), [missions]);
  const nextDeadline = upcoming[0];
  const recentLectures = lectures.slice(0, 3);
  const inbox = posts.slice(0, 3);
  const unreadInbox = posts.filter(p => !p.done).length;

  const today = new Date();
  const dateLabel = today.toLocaleString('en', { weekday: 'long', month: 'long', day: 'numeric' });
  const greet = greeting ? greeting() : 'afternoon';

  return (
    <>
      <Topbar
        crumbs={['Dashboard']}
        actions={<span className="dim" style={{ fontSize: 12 }}>{dateLabel}</span>}
      />
      <div className="content">
        <div style={{ maxWidth: 1080, margin: '0 auto', padding: '32px 28px 80px' }}>
          <div style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.022em', marginBottom: 4 }}>
              Good {greet}, Sahishnu.
            </div>
            <div className="muted" style={{ fontSize: 13 }}>
              {loading ? 'Loading…' : (
                <>
                  {remaining.length} task{remaining.length === 1 ? '' : 's'} today
                  {totalMin > 0 && <> · ~{Math.floor(totalMin/60)}h {totalMin%60}m</>}
                  {nextDeadline && (
                    <> · next deadline in{' '}
                      <span style={{ color: nextDeadline.daysLeft <= 7 ? 'var(--warn)' : 'var(--fg-2)' }}>
                        {nextDeadline.daysLeft} days
                      </span>
                    </>
                  )}
                </>
              )}
            </div>
          </div>

          <div className="hstack" style={{ gap: 6, marginBottom: 22, flexWrap: 'wrap' }}>
            <button className="btn primary" onClick={() => goto('new-lecture')}>
              <I.Mic size={11} /> Start a lecture
            </button>
            <button className="btn" onClick={() => goto('today')}>
              <I.Today size={11} /> Open Today
            </button>
            <button className="btn ghost" onClick={() => goto('missions')}>
              <I.Mission size={11} /> Missions
            </button>
          </div>

          <div className="bento">
            {/* Today's focus */}
            <div className="bento-tile bento-focus">
              <div className="bento-head">
                <div>
                  <div className="bento-eyebrow">Today's focus</div>
                  <div className="bento-h1">
                    {loading ? '…' : remaining.length === 0 ? 'All clear.' : `${remaining.length} left`}
                    {!loading && <span className="dim" style={{ fontSize: 13, fontWeight: 400, marginLeft: 8 }}>
                      {completed.length}/{tasks.length} done
                    </span>}
                  </div>
                </div>
                <a className="dash-link" onClick={() => goto('today')}>Open <I.ArrowRight size={10} /></a>
              </div>
              <div className="focus-progress">
                <div className="focus-progress-fill" style={{ width: `${tasks.length ? (completed.length / tasks.length) * 100 : 0}%` }} />
              </div>
              <div className="bento-body" style={{ padding: '6px 4px 8px' }}>
                {loading ? (
                  <div className="empty" style={{ padding: 24 }}><span className="spinner" /></div>
                ) : remaining.length === 0 ? (
                  <div className="empty" style={{ padding: 32 }}>Nothing left for today.</div>
                ) : (
                  remaining.slice(0, 5).map(t => (
                    <div key={t.id} className="hstack dash-row" onClick={() => toggle(t)}>
                      <Checkbox checked={t.done} onChange={() => toggle(t)} />
                      <span className="subj-dot" style={{ background: (SUBJ_BY_ID[t.subject] || SUBJ_BY_ID.maths).hex }} />
                      <span style={{ flex: 1, fontSize: 13 }}>{t.label}</span>
                      <span className="dim tnum" style={{ fontSize: 11 }}>{t.est}</span>
                    </div>
                  ))
                )}
              </div>
            </div>

            {/* Next up */}
            <div className="bento-tile bento-next">
              <div className="bento-head">
                <div className="bento-eyebrow">Next up</div>
                <a className="dash-link" onClick={() => goto('missions')}>All <I.ArrowRight size={10} /></a>
              </div>
              {nextDeadline ? (
                <div className="next-hero" onClick={() => goto('mission', { id: nextDeadline.id })}>
                  <div className="hstack" style={{ gap: 8, marginBottom: 6 }}>
                    <span className="subj-dot" style={{ background: (SUBJ_BY_ID[nextDeadline.subject] || SUBJ_BY_ID.maths).hex }} />
                    <span className="dim" style={{ fontSize: 11 }}>{(SUBJ_BY_ID[nextDeadline.subject] || SUBJ_BY_ID.maths).short}</span>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.012em', lineHeight: 1.3, marginBottom: 8 }}>
                    {nextDeadline.title}
                  </div>
                  <div className="hstack" style={{ gap: 8, marginBottom: 10 }}>
                    <span className="tnum" style={{
                      fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
                      color: nextDeadline.daysLeft <= 7 ? 'var(--warn)' : 'var(--fg)'
                    }}>
                      {nextDeadline.daysLeft}d
                    </span>
                    <span className="dim" style={{ fontSize: 11.5 }}>{nextDeadline.due}</span>
                  </div>
                  <div className="progress" style={{ marginBottom: 4 }}>
                    <div className="progress-fill" style={{ width: `${nextDeadline.progress * 100}%` }} />
                  </div>
                  <div className="dim" style={{ fontSize: 11 }}>{Math.round(nextDeadline.progress * 100)}% complete</div>
                </div>
              ) : (
                <div className="empty" style={{ padding: 24, fontSize: 12 }}>No missions yet.</div>
              )}
              <div className="next-rest">
                {upcoming.slice(1, 4).map(m => (
                  <div key={m.id} className="next-row" onClick={() => goto('mission', { id: m.id })}>
                    <span className="subj-dot" style={{ background: (SUBJ_BY_ID[m.subject] || SUBJ_BY_ID.maths).hex }} />
                    <span className="ellipsis" style={{ flex: 1, fontSize: 12 }}>{m.title}</span>
                    <span className="tnum dim" style={{ fontSize: 11 }}>{m.daysLeft}d</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Stats strip */}
            <div className="bento-tile bento-stats">
              <div className="stat" onClick={() => goto('today')}>
                <div className="stat-num tnum">{remaining.length}</div>
                <div className="stat-label">Tasks today</div>
              </div>
              <div className="stat-divider" />
              <div className="stat" onClick={() => goto('missions')}>
                <div className="stat-num tnum">{missions.filter(m => m.daysLeft <= 7).length}</div>
                <div className="stat-label">Due this week</div>
              </div>
              <div className="stat-divider" />
              <div className="stat" onClick={() => goto('notes')}>
                <div className="stat-num tnum">{lectures.length}</div>
                <div className="stat-label">Lectures</div>
              </div>
              <div className="stat-divider" />
              <div className="stat" onClick={() => goto('classroom')}>
                <div className="stat-num tnum">
                  {unreadInbox}<span className="dim" style={{ fontSize: 13, fontWeight: 400 }}>/{posts.length}</span>
                </div>
                <div className="stat-label">Inbox unread</div>
              </div>
            </div>

            {/* Recent lectures */}
            <div className="bento-tile bento-lectures">
              <div className="bento-head">
                <div className="bento-eyebrow">Recent lectures</div>
                <a className="dash-link" onClick={() => goto('notes')}>All <I.ArrowRight size={10} /></a>
              </div>
              <div className="bento-body">
                {loading ? (
                  <div className="empty" style={{ padding: 20 }}><span className="spinner" /></div>
                ) : recentLectures.length === 0 ? (
                  <div className="empty" style={{ padding: 20 }}>No lectures recorded yet.</div>
                ) : recentLectures.map(l => (
                  <div key={l.id} className="lec-mini" onClick={() => openNotion(l.notionUrl)}>
                    <span className="subj-bar" style={{ background: (SUBJ_BY_ID[l.subject] || SUBJ_BY_ID.maths).hex, width: 2, alignSelf: 'stretch' }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="ellipsis" style={{ fontSize: 12.5, fontWeight: 500 }}>{l.title}</div>
                      <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>{l.date} · {(SUBJ_BY_ID[l.subject] || SUBJ_BY_ID.maths).short}</div>
                    </div>
                    <span className="hstack dim" style={{ fontSize: 11, gap: 5 }}>
                      <span className="tnum">{l.duration}</span><I.External size={10} />
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Inbox */}
            <div className="bento-tile bento-inbox">
              <div className="bento-head">
                <div className="bento-eyebrow">
                  Inbox
                  {unreadInbox > 0 && <span className="inbox-pill">{unreadInbox}</span>}
                </div>
                <a className="dash-link" onClick={() => goto('classroom')}>Open <I.ArrowRight size={10} /></a>
              </div>
              <div className="bento-body">
                {loading ? (
                  <div className="empty" style={{ padding: 20 }}><span className="spinner" /></div>
                ) : inbox.length === 0 ? (
                  <div className="empty" style={{ padding: 20 }}>No posts yet.</div>
                ) : inbox.map(p => (
                  <div key={p.id} className="inbox-row" onClick={() => goto('classroom', { focus: p.id })}>
                    <span className="subj-dot" style={{ background: (SUBJ_BY_ID[p.subject] || SUBJ_BY_ID.maths).hex, marginTop: 6 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="hstack" style={{ gap: 6 }}>
                        <span className="ellipsis" style={{ fontSize: 12.5, fontWeight: !p.done ? 500 : 400, flex: 1 }}>{p.title}</span>
                        <Badge>{p.type}</Badge>
                      </div>
                      <div className="dim ellipsis" style={{ fontSize: 11, marginTop: 2 }}>{p.teacher} · {p.date}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.Dashboard = Dashboard;