// Admin Dashboard — list of surveys

function Dashboard({ surveys, onOpen, onOpenResponses, onNew, onLogout }) {
  const [filter, setFilter] = React.useState('all');
  const [query, setQuery] = React.useState('');

  const counts = {
    all: surveys.length,
    live: surveys.filter(s => s.status === 'live').length,
    draft: surveys.filter(s => s.status === 'draft').length,
    closed: surveys.filter(s => s.status === 'closed').length,
  };

  const filtered = surveys.filter(s =>
    (filter === 'all' || s.status === filter) &&
    (query === '' || s.title.toLowerCase().includes(query.toLowerCase()))
  );

  return (
    <div style={{ minHeight: '100%', background: 'var(--paper)', color: 'var(--ink)' }}>
      <AdminTopbar onLogout={onLogout} active="surveys" />

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px 80px' }}>
        {/* page head */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 32, marginBottom: 36 }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <Eyebrow>§ Surveys</Eyebrow>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 48, lineHeight: 1.05, margin: '14px 0 14px',
            }}>Erobella Surveys <em style={{ color: 'var(--red)' }}>·</em> Admin Panel</h1>
            <div style={{ color: 'var(--muted)', fontSize: 14, maxWidth: 520 }}>
              {surveys.length === 0
                ? 'No surveys yet. Build your first one.'
                : `${counts.live} live · ${counts.draft} in draft · ${counts.closed} closed.`}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0, marginTop: 28 }}>
            <button className="btn btn-red" onClick={onNew}>
              {Icon.plus(14)} New survey
            </button>
          </div>
        </div>

        <Hair ink style={{ marginBottom: 24 }} />

        {/* filters */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
          {[
            ['all', 'All'],
            ['live', 'Live'],
            ['draft', 'Drafts'],
            ['closed', 'Closed'],
          ].map(([id, label]) => (
            <button key={id} onClick={() => setFilter(id)} style={{
              border: 'none', background: filter === id ? 'var(--ink)' : 'transparent',
              color: filter === id ? 'var(--paper)' : 'var(--ink)',
              padding: '8px 14px', borderRadius: 2, cursor: 'pointer',
              fontFamily: 'var(--font-ui)', fontSize: 13,
              border: filter === id ? '1px solid var(--ink)' : '1px solid var(--line)',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              {label}
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                color: filter === id ? 'rgba(255,255,255,.6)' : 'var(--muted)',
              }}>{counts[id]}</span>
            </button>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            border: '1px solid var(--line)', borderRadius: 2, padding: '8px 12px',
            width: 260, background: 'var(--paper-2)',
          }}>
            <span style={{ color: 'var(--muted)', display: 'flex' }}>{Icon.search(14)}</span>
            <input
              value={query} onChange={e => setQuery(e.target.value)}
              placeholder="Search surveys…"
              style={{ border: 0, background: 'transparent', outline: 'none', flex: 1, fontFamily: 'var(--font-ui)', fontSize: 13 }}
            />
          </div>
        </div>

        {/* table */}
        <div style={{ border: '1px solid var(--line)', borderRadius: 2, background: 'var(--paper)', overflow: 'hidden' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '56px 2.2fr 1.1fr 1.4fr 1fr 130px',
            padding: '14px 20px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)',
            fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--muted)',
          }}>
            <div>№</div>
            <div>Title</div>
            <div>Status</div>
            <div>Responses</div>
            <div>Updated</div>
            <div></div>
          </div>
          {filtered.map((s, i) => (
            <SurveyRow key={s.id} s={s} idx={i + 1}
              onOpen={() => onOpen(s.id)}
              onOpenResponses={() => onOpenResponses && onOpenResponses(s.id)}
            />
          ))}
          {filtered.length === 0 && (
            <div style={{ padding: 60, textAlign: 'center', color: 'var(--muted)' }}>
              No surveys match that filter.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function SurveyRow({ s, idx, onOpen, onOpenResponses }) {
  const pct = Math.min(100, Math.round((s.responses / s.goal) * 100));
  const statusColor = s.status === 'live' ? 'var(--red)' : s.status === 'draft' ? 'var(--muted-2)' : 'var(--ink)';
  return (
    <div
      onClick={onOpen}
      style={{
        display: 'grid', gridTemplateColumns: '56px 2.2fr 1.1fr 1.4fr 1fr 130px',
        padding: '18px 20px', borderBottom: '1px solid var(--line)',
        alignItems: 'center', cursor: 'pointer', transition: 'background .12s',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-2)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>
        {String(idx).padStart(2, '0')}
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 400, lineHeight: 1.2, marginBottom: 4 }}>
          {s.title}
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>
          /surveys/{s.directory}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
        <span className="dot" style={{ background: statusColor }} />
        <span style={{ textTransform: 'capitalize' }}>{s.status}</span>
      </div>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 20 }}>{s.responses.toLocaleString()}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>/ {s.goal.toLocaleString()}</span>
        </div>
        <div style={{ height: 2, background: 'var(--paper-3)', borderRadius: 1, overflow: 'hidden', width: 140 }}>
          <div style={{ height: '100%', width: pct + '%', background: s.status === 'closed' ? 'var(--ink)' : 'var(--red)' }}/>
        </div>
      </div>
      <div style={{ fontSize: 13, color: 'var(--muted)' }}>{formatRelativeTime(s.updatedAt)}</div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }} onClick={e => e.stopPropagation()}>
        {s.responses > 0 && (
          <button className="btn btn-text" onClick={onOpenResponses} style={{ fontSize: 11, color: 'var(--red)', padding: '6px 8px' }}>
            Responses
          </button>
        )}
        <span style={{ color: 'var(--muted)', display: 'flex', alignItems: 'center', paddingLeft: 4 }}>{Icon.arrow(16)}</span>
      </div>
    </div>
  );
}

function formatRelativeTime(ms) {
  if (!ms) return '—';
  const diff = (Date.now() - ms) / 1000;
  if (diff < 60) return 'just now';
  if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
  const days = Math.floor(diff / 86400);
  if (days < 30) return days + 'd ago';
  return new Date(ms).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
}

function AdminTopbar({ onLogout, active }) {
  const tabs = [['surveys', 'Surveys']];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', padding: '18px 40px',
      borderBottom: '1px solid var(--line)', background: 'var(--paper)',
      position: 'sticky', top: 0, zIndex: 10,
    }}>
      <Wordmark size={22} />
      <span style={{ margin: '0 14px', color: 'var(--line-2)', fontFamily: 'var(--font-display)', fontSize: 18 }}>/</span>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)' }}>
        Surveys
      </span>

      <div style={{ display: 'flex', gap: 2, marginLeft: 40 }}>
        {tabs.map(([id, label]) => (
          <div key={id} style={{
            padding: '8px 14px',
            fontSize: 13,
            fontWeight: active === id ? 500 : 400,
            color: active === id ? 'var(--ink)' : 'var(--muted)',
            borderBottom: active === id ? '2px solid var(--red)' : '2px solid transparent',
            cursor: 'pointer',
          }}>{label}</div>
        ))}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-display)', fontSize: 14,
        }}>A</div>
        <button className="btn btn-text" onClick={onLogout} style={{ color: 'var(--muted)' }}>
          {Icon.logout(14)}
        </button>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;
window.AdminTopbar = AdminTopbar;