// staff.jsx — Staff profile cards section

const { useState: useST } = React;

// Subject tag colours come from the app-wide SUBJECT_COLORS palette (shared.jsx).

function StaffCard({ member }) {
  const [editOpen, setEditOpen] = useST(false);
  const classes = SAMPLE_CLASSES.filter(c => c.tutorId === member.id);

  return (
    <>
      <div style={{ background: 'var(--bg-surface)', borderRadius: '8px', border: '1px solid var(--border-soft)', padding: '20px', display: 'flex', flexDirection: 'column', gap: '14px' }}>

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
          <Avatar name={`${member.firstName} ${member.lastName}`} size={52} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)' }}>{member.firstName} {member.lastName}</div>
            <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '3px' }}>{member.role}</div>
          </div>
          <Button variant="ghost" size="sm" onClick={() => setEditOpen(true)}>Edit</Button>
        </div>

        {/* Contact */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
          {[['📞', member.mobile], ['✉', member.email]].map(([icon, val]) => (
            <div key={val} style={{ display: 'flex', gap: '8px', fontSize: '12px', color: 'var(--text-secondary)', alignItems: 'center' }}>
              <span style={{ fontSize: '11px', opacity: 0.55, width: 14, textAlign: 'center', flexShrink: 0 }}>{icon}</span>
              {val}
            </div>
          ))}
        </div>

        {/* Subjects */}
        {member.subjects.length > 0 && (
          <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
            {member.subjects.map(s => {
              const c = SUBJECT_COLORS[s] || '#7A7367';
              return (
                <span key={s} style={{ fontSize: '11px', fontWeight: 600, padding: '2px 8px', borderRadius: '4px',
                  background: `color-mix(in srgb, ${c} 15%, transparent)`,
                  color: c, border: `1px solid color-mix(in srgb, ${c} 30%, transparent)` }}>
                  {s}
                </span>
              );
            })}
          </div>
        )}

        {/* Classes */}
        {classes.length > 0 && (
          <div>
            <div style={{ fontSize: '11px', fontWeight: 500, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '6px' }}>Classes</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
              {classes.map(c => (
                <div key={c.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                  <span style={{ color: 'var(--text-secondary)' }}>{classLabel(c)}</span>
                  <span style={{ color: 'var(--text-muted)' }}>{c.campus}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <Modal open={editOpen} onClose={() => setEditOpen(false)} title={`Edit — ${member.firstName} ${member.lastName}`}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
            <Input label="First name" value={member.firstName} onChange={() => {}} />
            <Input label="Last name"  value={member.lastName}  onChange={() => {}} />
          </div>
          <Input label="Mobile" value={member.mobile} onChange={() => {}} />
          <Input label="Email"  value={member.email}  onChange={() => {}} type="email" />
          <TMSelect label="Role" value={member.role} onChange={() => {}} options={['Junior tutor', 'Senior tutor', 'Marker', 'Reception']} />
          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
            <Button variant="secondary" onClick={() => setEditOpen(false)}>Cancel</Button>
            <Button variant="primary"   onClick={() => setEditOpen(false)}>Save changes</Button>
          </div>
        </div>
      </Modal>
    </>
  );
}

function StaffSection({ showData }) {
  const [search,  setSearch]  = useST('');
  const [addOpen, setAddOpen] = useST(false);

  const filtered = SAMPLE_STAFF.filter(s =>
    !search || `${s.firstName} ${s.lastName} ${s.role}`.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <SectionHeader title="Staff" subtitle="Tutors, markers and reception team across both campuses"
        action={<Button variant="primary" onClick={() => setAddOpen(true)}>+ Add staff</Button>} />

      <div style={{ marginBottom: '20px', position: 'relative', display: 'inline-block' }}>
        <Icon name="search" size={14} color="var(--text-muted)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }} />
        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search staff…"
          style={{ background: 'var(--bg-surface-muted)', border: '1px solid var(--border-default)', borderRadius: '4px',
            padding: '7px 12px 7px 32px', fontSize: '13px', color: 'var(--text-primary)', fontFamily: 'inherit',
            outline: 'none', width: '260px' }} />
      </div>

      {showData ? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
          {filtered.map(m => <StaffCard key={m.id} member={m} />)}
        </div>
      ) : (
        <EmptyState message="Enable sample data to see staff" />
      )}

      <Modal open={addOpen} onClose={() => setAddOpen(false)} title="Add staff member">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
            <Input label="First name" value="" onChange={() => {}} placeholder="Jamie" />
            <Input label="Last name"  value="" onChange={() => {}} placeholder="Lee" />
          </div>
          <Input label="Mobile" value="" onChange={() => {}} placeholder="04xx xxx xxx" />
          <Input label="Email"  value="" onChange={() => {}} type="email" placeholder="jamie@themathologists.com.au" />
          <TMSelect label="Role" value="Junior tutor" onChange={() => {}} options={['Junior tutor', 'Senior tutor', 'Marker', 'Reception']} />
          <TMSelect label="Campus" value="Parramatta" onChange={() => {}} options={['Parramatta', 'Bella Vista', 'Both']} />
          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
            <Button variant="secondary" onClick={() => setAddOpen(false)}>Cancel</Button>
            <Button variant="primary"   onClick={() => setAddOpen(false)}>Add staff</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Object.assign(window, { StaffSection });