/* Dashboard Home */

function DashboardHome({ user, credits, onNavigate, onOpenIndex }) {
  const stats = [
    { label: 'Indexes', value: '6', delta: '+1 this week', icon: 'Database', accent: false },
    { label: 'Hours indexed', value: '4,221', delta: '+312h', icon: 'Clock', accent: false },
    { label: 'Storage saved', value: '186 TB', delta: 'via Dwarf', icon: 'Compress', accent: true },
    { label: 'API calls (7d)', value: '128.4K', delta: '+18%', icon: 'Activity', accent: false },
  ];

  const recentActivity = [
    { type: 'index', title: 'dashcam-fleet-q1', detail: 'Indexing 62% · 612 of 988h', time: '12m', status: 'indexing', progress: 0.62 },
    { type: 'dwarf', title: 'cam-04 / east-perimeter / 2026-01-15.mp4', detail: 'Compressed 14.0 GB → 364 MB · 38.4×', time: '34m', status: 'ready' },
    { type: 'tool', title: 'Captioning · ugc-moderation-pool', detail: '1,284 videos · 18.2K transcripts', time: '1h', status: 'ready' },
    { type: 'index', title: 'manufacturing-line-a', detail: 'Reader timeout on cam-7-stream-3', time: '2h', status: 'failed' },
    { type: 'tool', title: 'Embeddings · product-demo-archive', detail: '86 videos · 412K vectors stored', time: '3h', status: 'ready' },
  ];

  const quickActions = [
    { label: 'Create an index', sub: 'Upload videos and make them searchable.', icon: 'Plus', dest: 'indexes' },
    { label: 'Encode with Dwarf', sub: 'Compress 30–40× with our DCVC-RT models.', icon: 'Compress', dest: 'dwarf' },
    { label: 'Run a tool', sub: 'Caption, embed, segment, or enhance.', icon: 'Tools', dest: 'tools' },
  ];

  return (
    <div className="page-content">
      {/* Greeting */}
      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</div>
          <h1 className="page-title">
            {user.isReturning ? 'Welcome back, ' : 'Welcome, '}
            <span style={{ color: 'var(--accent)' }}>{user.name.split(' ')[0]}.</span>
          </h1>
          <p className="page-subtitle">Your AI-native video infrastructure workspace.</p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-primary" onClick={() => onNavigate('indexes')}>
            <Icon.Plus size={14} /> New index
          </button>
        </div>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
        {stats.map((s, i) => {
          const Comp = Icon[s.icon];
          return (
            <div key={i} className="card" style={{ padding: 20, position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, gap: 8 }}>
                <span className="eyebrow" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>{s.label}</span>
                <Comp size={14} color={s.accent ? 'var(--accent)' : 'var(--text-tertiary)'} style={{ flexShrink: 0 }} />
              </div>
              <div className="mono" style={{ fontSize: 26, fontWeight: 500, color: s.accent ? 'var(--accent)' : 'var(--text-primary)', letterSpacing: '-0.02em', lineHeight: 1 }}>
                {s.value}
              </div>
              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-tertiary)' }}>{s.delta}</div>
            </div>
          );
        })}
      </div>

      {/* Two-col: Activity + Side */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20, alignItems: 'start' }}>
        {/* Activity */}
        <div className="card">
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h3 style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>Recent activity</h3>
            <button className="btn btn-ghost btn-sm">View all</button>
          </div>
          {recentActivity.map((a, i) => (
            <div key={i} style={{
              padding: '14px 20px',
              borderBottom: i < recentActivity.length - 1 ? '1px solid var(--border-subtle)' : 'none',
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 6, flexShrink: 0,
                background: a.status === 'failed' ? 'var(--negative-bg)' : a.type === 'dwarf' ? 'var(--accent-subtle)' : 'var(--bg-inset)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {a.type === 'index' && <Icon.Database size={14} color={a.status === 'failed' ? 'var(--negative)' : 'var(--text-secondary)'} />}
                {a.type === 'dwarf' && <Icon.Compress size={14} color="var(--accent)" />}
                {a.type === 'tool' && <Icon.Tools size={14} color="var(--text-secondary)" />}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 2 }}>{a.detail}</div>
              </div>
              <StatusPill status={a.status} progress={a.progress} />
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', minWidth: 28, textAlign: 'right' }}>{a.time}</span>
            </div>
          ))}
        </div>

        {/* Side */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Quick actions */}
          <div className="card">
            <div style={{ padding: '16px 20px 12px' }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>Quick start</h3>
            </div>
            {quickActions.map((q, i) => {
              const Comp = Icon[q.icon];
              return (
                <button key={i} onClick={() => onNavigate(q.dest)}
                  style={{
                    width: '100%', display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 20px', textAlign: 'left',
                    borderTop: '1px solid var(--border-subtle)',
                    transition: 'background var(--duration-fast)',
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-surface-hover)'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: 'var(--accent-subtle)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <Comp size={14} color="var(--accent)" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{q.label}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 1 }}>{q.sub}</div>
                  </div>
                  <Icon.ArrowRight size={14} color="var(--text-tertiary)" />
                </button>
              );
            })}
          </div>

          {/* Usage chart */}
          <div className="card card-padded">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>Credits this week</h3>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>1,629 used</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 100 }}>
              {MOCK_USAGE.map((d, i) => {
                const max = Math.max(...MOCK_USAGE.map(x => x.credits));
                const h = (d.credits / max) * 80;
                return (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%', justifyContent: 'flex-end' }}>
                    <div style={{
                      width: '100%', height: `${h}px`,
                      background: i === MOCK_USAGE.length - 1 ? 'var(--accent)' : 'var(--accent-subtle)',
                      borderRadius: 2,
                      transition: 'all 0.4s var(--ease-out)',
                    }} />
                    <span className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>{d.day}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardHome });