// People — team roster, roles, pending access requests.

const PEOPLE_ROSTER = [
  { name: 'Rian Saputra',  email: 'rian@bankcorp.com',  role: 'admin',   team: 'Workspace',   color: 'oklch(0.78 0.08 50)',  initial: 'R', status: 'active' },
  { name: 'Ibu Dewi',      email: 'dewi.r@bankcorp.com',role: 'admin',   team: 'Finance',     color: 'oklch(0.6 0.13 268)',  initial: 'D', status: 'active' },
  { name: 'Pak Andi',      email: 'andi.k@bankcorp.com',role: 'analyst', team: 'Procurement', color: 'oklch(0.62 0.16 50)',  initial: 'A', status: 'active' },
  { name: 'Bu Sari',       email: 'sari@bankcorp.com',  role: 'analyst', team: 'Risk',        color: 'oklch(0.55 0.18 25)',  initial: 'S', status: 'active' },
  { name: 'Pak Budi',      email: 'budi.s@bankcorp.com',role: 'analyst', team: 'Sales',       color: 'oklch(0.5 0.18 230)',  initial: 'B', status: 'active' },
  { name: 'Mbak Rina',     email: 'rina@bankcorp.com',  role: 'analyst', team: 'HR',          color: 'oklch(0.55 0.18 145)', initial: 'R', status: 'active' },
  { name: 'Pak Hadi',      email: 'hadi.w@bankcorp.com',role: 'admin',   team: 'Compliance',  color: 'oklch(0.45 0.18 268)', initial: 'H', status: 'active' },
  { name: 'Lina M.',       email: 'lina.m@bankcorp.com',role: 'viewer',  team: 'Risk Ops',    color: 'oklch(0.5 0.05 145)',  initial: 'L', status: 'pending' },
];

const ROLE_META = {
  admin:   { label: 'Workspace admin', tone: 'oklch(0.42 0.16 268)', bg: 'oklch(0.96 0.025 268)' },
  analyst: { label: 'Analyst',         tone: 'var(--ink-2)',          bg: 'var(--bg-sunken)' },
  viewer:  { label: 'Viewer',          tone: 'var(--ink-3)',          bg: 'var(--bg-sunken)' },
};

const ROLE_COUNTS = [
  { id: 'admin',   label: 'Workspace admin', desc: 'Manage connectors, users, billing', count: 4 },
  { id: 'analyst', label: 'Analyst',         desc: 'Ask questions, export, save artifacts', count: 142 },
  { id: 'viewer',  label: 'Viewer',          desc: 'Read-only across configured sources', count: 87 },
];

const PENDING_REQUESTS = [
  { who: 'Lina M.',  email: 'lina.m@bankcorp.com', team: 'Risk Ops',    wants: 'Add fraud_alerts schema',   when: '2 hr ago' },
  { who: 'Bayu T.',  email: 'bayu.t@bankcorp.com', team: 'Procurement', wants: 'Access to Coupa connector', when: '1 day ago' },
  { who: 'Maya S.',  email: 'maya.s@bankcorp.com', team: 'Compliance',  wants: 'Promote to Admin',          when: '2 days ago' },
];

const ScreenPeople = () => {
  const [tab, setTab] = React.useState('roster');
  const [search, setSearch] = React.useState('');
  const [dept, setDept] = React.useState('all');

  const teams = [...new Set(PEOPLE_ROSTER.map(p => p.team))];

  const filtered = PEOPLE_ROSTER.filter(p =>
    (dept === 'all' || p.team === dept) &&
    (!search.trim() ||
      p.name.toLowerCase().includes(search.toLowerCase()) ||
      p.email.toLowerCase().includes(search.toLowerCase()) ||
      p.team.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div className="nx-page" style={{
      padding: '24px 32px 40px',
      maxWidth: 1080, margin: '0 auto',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>
            People
          </h1>
          <div style={{ marginTop: 4, color: 'var(--ink-3)', fontSize: 13 }}>
            Workspace members, roles, dan pending access requests.
          </div>
        </div>
        <button className="nx-btn accent">
          <Icon name="plus" size={12} /> Invite member
        </button>
      </div>

      {/* Role summary */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
        {ROLE_COUNTS.map(r => (
          <div key={r.id} className="nx-card" style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
              <span className="nx-chip" style={{
                background: ROLE_META[r.id].bg,
                color: ROLE_META[r.id].tone,
                borderColor: 'transparent', height: 20, fontSize: 11,
              }}>
                {r.label}
              </span>
              <span style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink)' }}>
                {r.count}
              </span>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.45 }}>
              {r.desc}
            </div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{
        display: 'flex', gap: 18, borderBottom: '0.5px solid var(--line)',
        marginBottom: 14,
      }}>
        {[
          { id: 'roster',   label: `Members (${PEOPLE_ROSTER.length})` },
          { id: 'pending',  label: `Pending requests (${PENDING_REQUESTS.length})` },
        ].map(t => (
          <button key={t.id}
            onClick={() => setTab(t.id)}
            style={{
              padding: '8px 0', border: 0, background: 'transparent',
              fontSize: 13, fontWeight: tab === t.id ? 600 : 500,
              color: tab === t.id ? 'var(--ink)' : 'var(--ink-4)',
              cursor: 'pointer',
              borderBottom: tab === t.id ? '2px solid var(--accent)' : '2px solid transparent',
              marginBottom: -1,
            }}
          >{t.label}</button>
        ))}
      </div>

      {tab === 'roster' && (
        <>
          {/* Search */}
          <div style={{ marginBottom: 12 }}>
            <div style={{ position: 'relative' }}>
              <Icon name="search" size={13} style={{
                position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
                color: 'var(--ink-4)',
              }} />
              <input value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search by name, email, or team"
                style={{
                  width: '100%', height: 34, padding: '0 12px 0 32px',
                  border: '0.5px solid var(--line)', borderRadius: 8,
                  background: 'var(--bg-elev)', fontSize: 13, fontFamily: 'inherit',
                  color: 'var(--ink)', outline: 0,
                }} />
            </div>
          </div>

          {/* Department filter */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
            {['all', ...teams].map(t => {
              const on = dept === t;
              return (
                <button key={t} onClick={() => setDept(t)}
                  style={{
                    height: 28, padding: '0 12px', borderRadius: 999, cursor: 'pointer', fontFamily: 'inherit',
                    fontSize: 12, fontWeight: on ? 600 : 500,
                    border: '0.5px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
                    background: on ? 'var(--accent-soft)' : 'var(--bg-elev)',
                    color: on ? 'var(--accent-ink)' : 'var(--ink-3)',
                    transition: 'border-color .12s',
                  }}>
                  {t === 'all' ? 'All departments' : t}
                </button>
              );
            })}
          </div>

          {/* Roster table */}
          <div className="nx-card" style={{ overflow: 'hidden' }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 130px 110px 30px',
              padding: '10px 14px', borderBottom: '0.5px solid var(--line)',
              fontSize: 10.5, fontWeight: 600, color: 'var(--ink-4)',
              textTransform: 'uppercase', letterSpacing: '0.06em',
              background: 'var(--bg-sunken)',
            }}>
              <span>Member</span>
              <span>Team</span>
              <span>Role</span>
              <span>Status</span>
              <span />
            </div>
            {filtered.map((p, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr 130px 110px 30px',
                alignItems: 'center', gap: 10,
                padding: '10px 14px',
                borderBottom: i === filtered.length - 1 ? 'none' : '0.5px solid var(--line)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: p.color, color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 600, fontSize: 11.5,
                    flexShrink: 0,
                  }}>{p.initial}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {p.name}
                    </div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-4)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {p.email}
                    </div>
                  </div>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{p.team}</div>
                <span className="nx-chip" style={{
                  background: ROLE_META[p.role].bg,
                  color: ROLE_META[p.role].tone,
                  borderColor: 'transparent', height: 20, fontSize: 11,
                  width: 'fit-content',
                }}>{ROLE_META[p.role].label}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5 }}>
                  {p.status === 'active' ? (
                    <>
                      <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--ok)' }} />
                      <span style={{ color: 'var(--ok)' }}>Active</span>
                    </>
                  ) : (
                    <>
                      <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--warn)' }} />
                      <span style={{ color: 'var(--warn)' }}>Pending</span>
                    </>
                  )}
                </div>
                <button className="nx-btn ghost sm" style={{ height: 24, padding: '0 6px', color: 'var(--ink-4)' }}>
                  <Icon name="menu-dots" size={12} />
                </button>
              </div>
            ))}
          </div>
        </>
      )}

      {tab === 'pending' && (
        <div className="nx-card" style={{ padding: 4 }}>
          {PENDING_REQUESTS.map((r, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderBottom: i === PENDING_REQUESTS.length - 1 ? 'none' : '0.5px solid var(--line)',
            }}>
              <div style={{
                width: 30, height: 30, borderRadius: '50%',
                background: 'var(--bg-sunken)', color: 'var(--ink-3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 600, fontSize: 12,
              }}>{r.who[0]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>
                  {r.who} <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>· {r.team}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>
                  Wants: <b style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{r.wants}</b>
                </div>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-4)' }}>{r.when}</div>
              <button className="nx-btn ghost sm" style={{ color: 'var(--ink-3)' }}>
                Deny
              </button>
              <button className="nx-btn primary sm">
                <Icon name="check" size={11} /> Approve
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.ScreenPeople = ScreenPeople;