import { useState, useEffect, useRef, useCallback } from 'react';
import { useToast } from '../contexts/ToastContext.jsx';
import { api } from '../utils/api.js';
import Avatar from '../components/Avatar.jsx';
import UserFooter from '../components/UserFooter.jsx';
import PasswordInput from '../components/PasswordInput.jsx';

const SIDEBAR_W = 320;

function isValidEmail(e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); }
function isValidPhone(p) {
  if (!p || !p.trim()) return true;
  const digits = p.replace(/[\s\-\(\)\+\.x#]/g, '');
  return /^\d{7,15}$/.test(digits);
}

// Format: email,firstname,lastname,password,role,usergroup  (exactly 5 commas / 6 fields)
function parseCSV(text, ignoreFirstRow, allUserGroups) {
  const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
  const rows = [], invalid = [];
  const groupMap = new Map((allUserGroups || []).map(g => [g.name.toLowerCase(), g]));
  const validRoles = ['member', 'manager', 'admin'];

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];
    // Skip first row if checkbox set OR if it looks like a header (first field = 'email')
    if (i === 0 && (ignoreFirstRow || /^e-?mail$/i.test(line.split(',')[0].trim()))) continue;

    const parts = line.split(',');
    if (parts.length !== 6) { invalid.push({ line, reason: `Must have exactly 5 commas (has ${parts.length - 1})` }); continue; }
    const [email, firstName, lastName, password, roleRaw, usergroupRaw] = parts.map(p => p.trim());

    if (!email || !isValidEmail(email)) { invalid.push({ line, reason: `Invalid email: "${email || '(blank)'}"` }); continue; }
    if (!firstName) { invalid.push({ line, reason: 'First name required' }); continue; }
    if (!lastName)  { invalid.push({ line, reason: 'Last name required' }); continue; }

    const role = validRoles.includes(roleRaw.toLowerCase()) ? roleRaw.toLowerCase() : 'member';
    const matchedGroup = usergroupRaw ? groupMap.get(usergroupRaw.toLowerCase()) : null;

    rows.push({
      email: email.toLowerCase(),
      firstName,
      lastName,
      password,
      role,
      userGroupId: matchedGroup?.id || null,
      userGroupName: usergroupRaw || null,
    });
  }
  return { rows, invalid };
}

// ── User Row (accordion list item) ───────────────────────────────────────────
function UserRow({ u, onUpdated, onEdit }) {
  const toast = useToast();
  const [open, setOpen] = useState(false);

  const handleSuspend = async () => {
    if (!confirm(`Suspend ${u.name}?`)) return;
    try { await api.suspendUser(u.id); toast('User suspended', 'success'); onUpdated(); }
    catch (e) { toast(e.message, 'error'); }
  };
  const handleActivate = async () => {
    try { await api.activateUser(u.id); toast('User activated', 'success'); onUpdated(); }
    catch (e) { toast(e.message, 'error'); }
  };
  const handleDelete = async () => {
    if (u.role === 'admin') return toast('Demote to member before deleting an admin', 'error');
    if (!confirm(`Delete ${u.name}?\n\nThis will:\n• Anonymise their account and free their email for re-use\n• Remove all their messages from conversations\n• Freeze any direct messages they were part of\n• Remove all their group memberships\n\nThis cannot be undone.`)) return;
    try { await api.deleteUser(u.id); toast('User deleted', 'success'); onUpdated(); }
    catch (e) { toast(e.message, 'error'); }
  };

  return (
    <div style={{ borderBottom: '1px solid var(--border)' }}>
      <button onClick={() => setOpen(o => !o)}
        style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
          background:'none', border:'none', cursor:'pointer', textAlign:'left', color:'var(--text-primary)' }}>
        <Avatar user={u} size="sm" />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
            <span style={{ fontWeight:600, fontSize:14 }}>{u.display_name || u.name}</span>
            {u.display_name && <span style={{ fontSize:12, color:'var(--text-tertiary)' }}>({u.name})</span>}
            <span className={`role-badge role-${u.role}`}>{u.role}</span>
            {u.status !== 'active' && <span className="role-badge status-suspended">{u.status}</span>}
            {!!u.is_default_admin && <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>Default Admin</span>}
          </div>
          <div style={{ fontSize:12, color:'var(--text-secondary)', marginTop:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
        </div>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
          style={{ flexShrink:0, transition:'transform 0.2s', transform:open?'rotate(180deg)':'none', color:'var(--text-tertiary)' }}>
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>

      {open && !u.is_default_admin && (
        <div style={{ padding:'6px 12px 12px', display:'flex', alignItems:'center', gap:8 }}>
          <button className="btn btn-primary btn-sm" onClick={() => { setOpen(false); onEdit(u); }}>Edit User</button>
          <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
            {u.status === 'active' ? (
              <button className="btn btn-sm" style={{ background:'var(--warning)', color:'white' }} onClick={handleSuspend}>Suspend</button>
            ) : u.status === 'suspended' ? (
              <button className="btn btn-sm" style={{ background:'var(--success)', color:'white' }} onClick={handleActivate}>Activate</button>
            ) : null}
            <button className="btn btn-danger btn-sm" onClick={handleDelete}>Delete</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ── User Form (create / edit) ─────────────────────────────────────────────────
function UserForm({ user, userPass, allUserGroups, onDone, onCancel, isMobile, onIF, onIB }) {
  const toast = useToast();
  const isEdit = !!user;

  const [firstName, setFirstName] = useState(user?.first_name || '');
  const [lastName,  setLastName]  = useState(user?.last_name  || '');
  const [email,     setEmail]     = useState(user?.email      || '');
  const [phone,     setPhone]     = useState(user?.phone      || '');
  const [role,      setRole]      = useState(user?.role       || 'member');
  const [isMinor,   setIsMinor]   = useState(!!user?.is_minor);
  const [password,  setPassword]  = useState('');
  const [pwEnabled, setPwEnabled] = useState(!isEdit);
  const [saving,    setSaving]    = useState(false);
  const [selectedGroupIds, setSelectedGroupIds] = useState(new Set());
  const [origGroupIds,     setOrigGroupIds]     = useState(new Set());

  useEffect(() => {
    if (!isEdit || !user?.id || !allUserGroups?.length) return;
    api.getUserGroupsForUser(user.id)
      .then(({ groupIds }) => {
        const ids = new Set((groupIds || []).map(Number));
        setSelectedGroupIds(ids);
        setOrigGroupIds(ids);
      })
      .catch(() => {});
  }, [isEdit, user?.id]);

  const fmtLastLogin = (ts) => {
    if (!ts) return 'Never';
    const d = new Date(ts); const today = new Date(); today.setHours(0,0,0,0);
    const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1);
    const dd = new Date(d); dd.setHours(0,0,0,0);
    if (dd >= today) return 'Today';
    if (dd >= yesterday) return 'Yesterday';
    return dd.toISOString().slice(0, 10);
  };

  const handleSubmit = async () => {
    if (!isEdit && (!email.trim() || !isValidEmail(email.trim())))
      return toast('Valid email address required', 'error');
    if (!firstName.trim()) return toast('First name is required', 'error');
    if (!lastName.trim())  return toast('Last name is required',  'error');
    if (!isValidPhone(phone)) return toast('Invalid phone number', 'error');
    if (!['member', 'admin', 'manager'].includes(role)) return toast('Role is required', 'error');
    if (!isEdit && (!password || password.length < 6))
      return toast('Password must be at least 6 characters', 'error');
    if (isEdit && pwEnabled && (!password || password.length < 6))
      return toast('New password must be at least 6 characters', 'error');

    setSaving(true);
    try {
      if (isEdit) {
        await api.updateUser(user.id, {
          firstName: firstName.trim(),
          lastName:  lastName.trim(),
          phone:     phone.trim(),
          isMinor,
          role,
          ...(pwEnabled && password ? { password } : {}),
        });
        // Sync group memberships: add newly selected, remove deselected
        for (const gId of selectedGroupIds) {
          if (!origGroupIds.has(gId)) await api.addUserToGroup(gId, user.id).catch(() => {});
        }
        for (const gId of origGroupIds) {
          if (!selectedGroupIds.has(gId)) await api.removeUserFromGroup(gId, user.id).catch(() => {});
        }
        toast('User updated', 'success');
      } else {
        const { user: newUser } = await api.createUser({
          firstName: firstName.trim(),
          lastName:  lastName.trim(),
          email:     email.trim(),
          phone:     phone.trim(),
          isMinor,
          role,
          password,
        });
        // Add to selected groups
        for (const gId of selectedGroupIds) {
          await api.addUserToGroup(gId, newUser.id).catch(() => {});
        }
        toast('User created', 'success');
      }
      onDone();
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setSaving(false);
    }
  };

  const colGrid = isMobile ? '1fr' : '1fr 1fr';
  const lbl = (text, required, note) => (
    <label className="text-sm font-medium" style={{ color:'var(--text-secondary)', display:'block', marginBottom:4 }}>
      {text}
      {required && <span style={{ color:'var(--error)', marginLeft:2 }}>*</span>}
      {note && <span style={{ fontSize:11, color:'var(--text-tertiary)', fontWeight:400, marginLeft:6 }}>{note}</span>}
    </label>
  );

  return (
    <div style={{ maxWidth: isMobile ? '100%' : 580 }}>

      {/* Back + title */}
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
        <button onClick={onCancel} className="btn btn-secondary btn-sm"
          style={{ display:'flex', alignItems:'center', gap:4, flexShrink:0 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <polyline points="15 18 9 12 15 6"/>
          </svg>
          Back
        </button>
        <span style={{ fontSize:16, fontWeight:700, color:'var(--text-primary)' }}>
          {isEdit ? 'Edit User' : 'Create User'}
        </span>
      </div>

      {/* Row 1: Login (email) — full width */}
      <div style={{ marginBottom:12 }}>
        {lbl('Login (email)', !isEdit)}
        <input className="input" type="email" placeholder="user@example.com"
          value={email} onChange={e => setEmail(e.target.value)}
          disabled={isEdit}
          style={{ width:'100%', ...(isEdit ? { opacity:0.6, cursor:'not-allowed' } : {}) }}
          autoComplete="new-password" onFocus={onIF} onBlur={onIB} />
      </div>

      {/* Row 2: First Name + Last Name */}
      <div style={{ display:'grid', gridTemplateColumns:colGrid, gap:12, marginBottom:12 }}>
        <div>
          {lbl('First Name', true)}
          <input className="input" placeholder="Jane"
            value={firstName} onChange={e => setFirstName(e.target.value)}
            autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
        </div>
        <div>
          {lbl('Last Name', true)}
          <input className="input" placeholder="Smith"
            value={lastName} onChange={e => setLastName(e.target.value)}
            autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
        </div>
      </div>

      {/* Row 3: Phone + Role */}
      <div style={{ display:'grid', gridTemplateColumns:colGrid, gap:12, marginBottom:12 }}>
        <div>
          {lbl('Phone', false, '(optional)')}
          <input className="input" type="tel" placeholder="+1 555 000 0000"
            value={phone} onChange={e => setPhone(e.target.value)}
            autoComplete="new-password" onFocus={onIF} onBlur={onIB} />
        </div>
        <div>
          {lbl('App Role', true)}
          <select className="input" value={role} onChange={e => setRole(e.target.value)}>
            <option value="member">Member</option>
            <option value="manager">Manager</option>
            <option value="admin">Admin</option>
          </select>
        </div>
      </div>

      {/* Row 4: Is minor */}
      <div style={{ marginBottom:12 }}>
        <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:14, color:'var(--text-primary)', userSelect:'none' }}>
          <input type="checkbox" checked={isMinor} onChange={e => setIsMinor(e.target.checked)}
            style={{ accentColor:'var(--primary)', width:15, height:15 }} />
          User is a minor
        </label>
      </div>

      {/* Row 4b: User Groups */}
      {allUserGroups?.length > 0 && (
        <div style={{ marginBottom:12 }}>
          {lbl('User Groups', false, '(optional)')}
          <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', maxHeight:160, overflowY:'auto', marginTop:6 }}>
            {allUserGroups.map(g => (
              <label key={g.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'7px 10px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
                <input type="checkbox"
                  checked={selectedGroupIds.has(g.id)}
                  onChange={() => setSelectedGroupIds(prev => { const n = new Set(prev); n.has(g.id) ? n.delete(g.id) : n.add(g.id); return n; })}
                  style={{ accentColor:'var(--primary)', width:15, height:15 }} />
                <span style={{ fontSize:13 }}>{g.name}</span>
              </label>
            ))}
          </div>
        </div>
      )}

      {/* Row 5: Password */}
      <div style={{ marginBottom:16 }}>
        {lbl('Password',
          (!isEdit) || (isEdit && pwEnabled),
          isEdit && !pwEnabled ? '(not changing — click Reset Password to set a new one)' :
          !isEdit ? `(blank = ${userPass})` : null
        )}
        <div style={{ opacity: pwEnabled ? 1 : 0.55 }}>
          <PasswordInput
            value={password} onChange={e => setPassword(e.target.value)}
            placeholder={isEdit && !pwEnabled ? '••••••••' : 'Min 6 characters'}
            disabled={!pwEnabled}
            autoComplete="new-password"
            onFocus={onIF} onBlur={onIB}
          />
        </div>
      </div>

      {/* Row 6: Buttons */}
      <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:10 }}>
        <button className="btn btn-primary" onClick={handleSubmit} disabled={saving}>
          {saving ? 'Saving…' : isEdit ? 'Save Changes' : 'Create User'}
        </button>
        {isEdit && !pwEnabled && (
          <button className="btn btn-sm" style={{ background:'var(--error)', color:'white' }}
            onClick={() => setPwEnabled(true)}>
            Reset Password
          </button>
        )}
        {isEdit && pwEnabled && (
          <button className="btn btn-secondary btn-sm"
            onClick={() => { setPwEnabled(false); setPassword(''); }}>
            Cancel Reset
          </button>
        )}
        <button className="btn btn-secondary" onClick={onCancel} style={{ marginLeft:'auto' }}>
          Cancel
        </button>
      </div>

      {/* Row 7 (edit only): Last login + must change password */}
      {isEdit && (
        <div style={{ display:'flex', alignItems:'center', gap:14, flexWrap:'wrap', fontSize:12, color:'var(--text-tertiary)', paddingTop:4, borderTop:'1px solid var(--border)' }}>
          <span>Last Login: <strong style={{ color:'var(--text-secondary)' }}>{fmtLastLogin(user.last_online)}</strong></span>
          {!!user.must_change_password && (
            <span style={{ color:'var(--warning)', fontWeight:600 }}>⚠ Must change password</span>
          )}
        </div>
      )}
    </div>
  );
}

// ── Bulk Import Form ──────────────────────────────────────────────────────────
function BulkImportForm({ userPass, allUserGroups, onCreated }) {
  const toast = useToast();
  const fileRef = useRef(null);
  const [csvFile,        setCsvFile]        = useState(null);
  const [rawText,        setRawText]        = useState('');
  const [csvRows,        setCsvRows]        = useState([]);
  const [csvInvalid,     setCsvInvalid]     = useState([]);
  const [bulkResult,     setBulkResult]     = useState(null);
  const [loading,        setLoading]        = useState(false);
  const [ignoreFirst,    setIgnoreFirst]    = useState(false);
  const [detailsOpen,    setDetailsOpen]    = useState(false);

  // Re-parse whenever raw text or options change
  useEffect(() => {
    if (!rawText) return;
    const { rows, invalid } = parseCSV(rawText, ignoreFirst, allUserGroups);
    setCsvRows(rows); setCsvInvalid(invalid);
  }, [rawText, ignoreFirst, allUserGroups]);

  const handleFile = e => {
    const file = e.target.files?.[0]; if (!file) return;
    setCsvFile(file); setBulkResult(null);
    const reader = new FileReader();
    reader.onload = ev => setRawText(ev.target.result);
    reader.readAsText(file);
  };

  const handleImport = async () => {
    if (!csvRows.length) return;
    setLoading(true);
    try {
      const result = await api.bulkUsers(csvRows);
      setBulkResult(result); setCsvRows([]); setCsvFile(null); setCsvInvalid([]); setRawText('');
      if (fileRef.current) fileRef.current.value = '';
      onCreated();
    } catch(e) { toast(e.message, 'error'); }
    finally { setLoading(false); }
  };

  const codeStyle = { fontSize:12, color:'var(--text-secondary)', display:'block', background:'var(--surface)', padding:'6px 8px', borderRadius:4, border:'1px solid var(--border)', whiteSpace:'pre', fontFamily:'monospace', marginBottom:4 };

  return (
    <div style={{ maxWidth:580, display:'flex', flexDirection:'column', gap:16 }}>

      {/* Format info box */}
      <div style={{ background:'var(--background)', border:'1px dashed var(--border)', borderRadius:'var(--radius)', padding:'12px 14px' }}>
        <p style={{ fontSize:13, fontWeight:600, marginBottom:8 }}>CSV Format</p>
        <code style={codeStyle}>{'FULL:    email,firstname,lastname,password,role,usergroup'}</code>
        <code style={codeStyle}>{'MINIMUM: email,firstname,lastname,,,'}</code>
        <p style={{ fontSize:12, color:'var(--text-tertiary)', margin:'8px 0 6px' }}>Examples:</p>
        <code style={codeStyle}>{'example@rosterchirp.com,Barney,Rubble,,member,parents'}</code>
        <code style={codeStyle}>{'example@rosterchirp.com,Barney,Rubble,Ori0n2026!,member,players'}</code>
        <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:8 }}>
          Blank password defaults to <strong>{userPass}</strong>. Blank role defaults to member. We recommend using a spreadsheet editor and saving as CSV.
        </p>

        {/* CSV Details accordion */}
        <button onClick={() => setDetailsOpen(o => !o)}
          style={{ display:'flex', alignItems:'center', gap:6, marginTop:10, background:'none', border:'none', cursor:'pointer', fontSize:13, fontWeight:600, color:'var(--primary)', padding:0 }}>
          CSV Details
          <span style={{ fontSize:10, opacity:0.7 }}>{detailsOpen ? '▲' : '▼'}</span>
        </button>
        {detailsOpen && (
          <div style={{ marginTop:8, paddingTop:8, borderTop:'1px solid var(--border)', fontSize:12, color:'var(--text-secondary)', display:'flex', flexDirection:'column', gap:10 }}>
            <div>
              <p style={{ fontWeight:600, marginBottom:4 }}>CSV Requirements</p>
              <ul style={{ paddingLeft:16, margin:0, lineHeight:1.8 }}>
                <li>Exactly 5 commas per row (rows with more or less will be skipped)</li>
                <li><code>email</code>, <code>firstname</code>, <code>lastname</code> are required</li>
                <li>A user can only be added to one group during bulk import</li>
                <li>Optional fields left blank will use system defaults</li>
              </ul>
            </div>
            {allUserGroups?.length > 0 && (
              <div>
                <p style={{ fontWeight:600, marginBottom:4 }}>User Groups available</p>
                <div style={{ display:'flex', flexDirection:'column', gap:1 }}>
                  {allUserGroups.map(g => <span key={g.id} style={{ fontFamily:'monospace', fontSize:11 }}>{g.name}</span>)}
                </div>
              </div>
            )}
            <div>
              <p style={{ fontWeight:600, marginBottom:4 }}>Roles available</p>
              <ul style={{ paddingLeft:16, margin:0, lineHeight:1.8 }}>
                <li><code>member</code> — non-privileged user <span style={{ color:'var(--text-tertiary)' }}>(default)</span></li>
                <li><code>manager</code> — privileged: manage schedules/users/groups</li>
                <li><code>admin</code> — privileged: manager + settings + branding</li>
              </ul>
            </div>
            <p style={{ color:'var(--text-tertiary)', marginTop:2 }}>
              Optional field defaults: password = <strong>{userPass}</strong>, role = member, usergroup = (none), minor = (none)
            </p>
          </div>
        )}
      </div>

      {/* File picker row */}
      <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
        <label className="btn btn-secondary" style={{ cursor:'pointer', margin:0 }}>
          Select CSV File
          <input ref={fileRef} type="file" accept=".csv,.txt" style={{ display:'none' }} onChange={handleFile} />
        </label>
        {csvFile && (
          <span style={{ fontSize:13, color:'var(--text-secondary)' }}>
            {csvFile.name}
            {csvRows.length > 0 && <span style={{ color:'var(--text-tertiary)', marginLeft:6 }}>({csvRows.length} valid row{csvRows.length!==1?'s':''})</span>}
          </span>
        )}
      </div>

      {/* Ignore first row checkbox */}
      <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:13, color:'var(--text-primary)', userSelect:'none' }}>
        <input type="checkbox" checked={ignoreFirst} onChange={e => setIgnoreFirst(e.target.checked)}
          style={{ accentColor:'var(--primary)', width:15, height:15 }} />
        Ignore first row (header)
      </label>

      {/* Import button */}
      {csvRows.length > 0 && (
        <div>
          <button className="btn btn-primary" onClick={handleImport} disabled={loading}>
            {loading ? 'Creating…' : `Create ${csvRows.length} User${csvRows.length!==1?'s':''}`}
          </button>
        </div>
      )}

      {/* Skipped rows */}
      {csvInvalid.length > 0 && (
        <div style={{ background:'rgba(229,57,53,0.07)', border:'1px solid #e53935', borderRadius:'var(--radius)', padding:10 }}>
          <p style={{ fontSize:13, fontWeight:600, color:'#e53935', marginBottom:6 }}>{csvInvalid.length} row{csvInvalid.length!==1?'s':''} skipped</p>
          <div style={{ maxHeight:120, overflowY:'auto' }}>
            {csvInvalid.map((e,i) => (
              <div key={i} style={{ fontSize:12, padding:'2px 0', color:'var(--text-secondary)' }}>
                <code style={{ fontSize:11 }}>{e.line}</code>
                <span style={{ color:'#e53935', marginLeft:8 }}>— {e.reason}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Result */}
      {bulkResult && (
        <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', padding:12 }}>
          <p style={{ fontSize:13, fontWeight:600, color:'var(--success)', marginBottom: bulkResult.skipped.length ? 8 : 0 }}>
            ✓ {bulkResult.created.length} user{bulkResult.created.length!==1?'s':''} created
          </p>
          {bulkResult.skipped.length > 0 && (
            <>
              <p style={{ fontSize:13, fontWeight:600, color:'var(--text-secondary)', marginBottom:6 }}>{bulkResult.skipped.length} skipped:</p>
              <div style={{ maxHeight:112, overflowY:'auto', border:'1px solid var(--border)', borderRadius:'var(--radius)' }}>
                {bulkResult.skipped.map((s,i) => (
                  <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'5px 10px', borderBottom: i<bulkResult.skipped.length-1?'1px solid var(--border)':'none', fontSize:13, gap:12 }}>
                    <span>{s.email}</span>
                    <span style={{ color:'var(--text-tertiary)', flexShrink:0 }}>{s.reason}</span>
                  </div>
                ))}
              </div>
            </>
          )}
          <button className="btn btn-secondary btn-sm" style={{ marginTop:10 }} onClick={() => setBulkResult(null)}>Dismiss</button>
        </div>
      )}
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────
export default function UserManagerPage({ isMobile = false, onProfile, onHelp, onAbout }) {
  const [users,        setUsers]        = useState([]);
  const [loading,      setLoading]      = useState(true);
  const [loadError,    setLoadError]    = useState('');
  const [search,       setSearch]       = useState('');
  const [view,         setView]         = useState('list'); // 'list' | 'create' | 'edit' | 'bulk'
  const [editUser,     setEditUser]     = useState(null);
  const [userPass,     setUserPass]     = useState('user@1234');
  const [allUserGroups, setAllUserGroups] = useState([]);
  const [inputFocused, setInputFocused] = useState(false);
  const onIF = () => setInputFocused(true);
  const onIB = () => setInputFocused(false);

  const load = useCallback(async () => {
    setLoadError(''); setLoading(true);
    try { const { users } = await api.getUsers(); setUsers(users || []); }
    catch(e) { setLoadError(e.message || 'Failed to load users'); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => {
    load();
    api.getSettings().then(({ settings }) => { if (settings.user_pass) setUserPass(settings.user_pass); }).catch(() => {});
    api.getUserGroups().then(({ groups }) => setAllUserGroups([...(groups||[])].sort((a,b) => a.name.localeCompare(b.name)))).catch(() => {});
  }, [load]);

  const filtered = users
    .filter(u =>
      !search || u.name?.toLowerCase().includes(search.toLowerCase()) ||
      u.display_name?.toLowerCase().includes(search.toLowerCase()) ||
      u.email?.toLowerCase().includes(search.toLowerCase())
    )
    .sort((a, b) => a.name.localeCompare(b.name));

  const goList   = ()  => { setView('list');   setEditUser(null); };
  const goCreate = ()  => { setView('create'); setEditUser(null); };
  const goEdit   = (u) => { setView('edit');   setEditUser(u); };
  const goBulk   = ()  => { setView('bulk');   setEditUser(null); };

  const navItem = (label, active, onClick) => (
    <button onClick={onClick}
      style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px',
        borderRadius:'var(--radius)', border:'none',
        background: active ? 'var(--primary-light)' : 'transparent',
        color: active ? 'var(--primary)' : 'var(--text-primary)',
        cursor:'pointer', fontWeight: active ? 600 : 400, fontSize:14, marginBottom:2 }}>
      {label}
    </button>
  );

  const isFormView = view === 'create' || view === 'edit';

  return (
    <div style={{ display:'flex', flex:1, overflow:'hidden', minHeight:0 }}>

      {/* ── Desktop sidebar ── */}
      {!isMobile && (
        <div style={{ width:SIDEBAR_W, flexShrink:0, borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', background:'var(--surface)', overflow:'hidden' }}>
          <div style={{ padding:'16px 16px 0' }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
              <span style={{ fontSize:16, fontWeight:700, color:'var(--text-primary)' }}>User Manager</span>
            </div>
            <div className="section-label" style={{ marginBottom:6 }}>View</div>
            {navItem(`All Users${!loading ? ` (${users.length})` : ''}`, view === 'list' || view === 'edit', goList)}
            {navItem('+ Create User', view === 'create', goCreate)}
            {navItem('Bulk Import CSV', view === 'bulk', goBulk)}
          </div>
          <div style={{ flex:1 }} />
          <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
        </div>
      )}

      {/* ── Right panel ── */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minWidth:0, background:'var(--background)' }}>

        {/* Mobile tab bar */}
        {isMobile && (
          <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 12px', display:'flex', gap:6, height:48, alignItems:'center', flexShrink:0 }}>
            <span style={{ fontWeight:700, fontSize:14, marginRight:4, color:'var(--text-primary)' }}>Users</span>
            <button className={`btn btn-sm ${!isFormView && view !== 'bulk' ? 'btn-primary' : 'btn-secondary'}`} onClick={goList}>All</button>
            <button className={`btn btn-sm ${isFormView ? 'btn-primary' : 'btn-secondary'}`} onClick={goCreate}>+ Create</button>
            <button className={`btn btn-sm ${view === 'bulk' ? 'btn-primary' : 'btn-secondary'}`} onClick={goBulk}>Bulk</button>
          </div>
        )}

        {/* Content */}
        <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minHeight:0, background:'var(--background)' }}>

          {/* LIST VIEW */}
          {view === 'list' && (
            <>
              <div style={{ padding:'16px 16px 8px', flexShrink:0 }}>
                <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
                  onFocus={onIF} onBlur={onIB}
                  autoComplete="new-password" autoCorrect="off" spellCheck={false}
                  style={{ width:'100%', maxWidth: isMobile ? '100%' : 400 }} />
              </div>
              <div style={{ flex:1, overflowY:'auto', padding:'0 16px', paddingBottom: isMobile ? 'calc(82px + env(safe-area-inset-bottom, 0px))' : 16, overscrollBehavior:'contain' }}>
                <div style={{ background:'var(--surface)', borderRadius:'var(--radius)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
                  {loading ? (
                    <div style={{ padding:48, textAlign:'center' }}><div className="spinner" /></div>
                  ) : loadError ? (
                    <div style={{ padding:32, textAlign:'center', color:'var(--error)' }}>
                      <div style={{ marginBottom:12 }}>⚠ {loadError}</div>
                      <button className="btn btn-secondary btn-sm" onClick={load}>Retry</button>
                    </div>
                  ) : filtered.length === 0 ? (
                    <div style={{ padding:32, textAlign:'center', color:'var(--text-tertiary)', fontSize:14 }}>
                      {search ? 'No users match your search.' : 'No users yet.'}
                    </div>
                  ) : (
                    filtered.map(u => <UserRow key={u.id} u={u} onUpdated={load} onEdit={goEdit} />)
                  )}
                </div>
              </div>
            </>
          )}

          {/* CREATE / EDIT FORM */}
          {isFormView && (
            <div style={{ flex:1, overflowY:'auto', padding:16, paddingBottom: isMobile ? 'calc(82px + env(safe-area-inset-bottom, 0px))' : 16, overscrollBehavior:'contain' }}>
              <UserForm
                user={view === 'edit' ? editUser : null}
                userPass={userPass}
                allUserGroups={allUserGroups}
                onDone={() => { load(); goList(); }}
                onCancel={goList}
                isMobile={isMobile}
                onIF={onIF}
                onIB={onIB}
              />
            </div>
          )}

          {/* BULK IMPORT */}
          {view === 'bulk' && (
            <div style={{ flex:1, overflowY:'auto', padding:16, paddingBottom: isMobile ? 'calc(82px + env(safe-area-inset-bottom, 0px))' : 16, overscrollBehavior:'contain' }}>
              <BulkImportForm userPass={userPass} allUserGroups={allUserGroups} onCreated={load} />
            </div>
          )}
        </div>

        {/* Mobile footer — fixed, hidden when keyboard is up */}
        {isMobile && !inputFocused && (
          <div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:20, background:'var(--surface)', borderTop:'1px solid var(--border)' }}>
            <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
          </div>
        )}
      </div>
    </div>
  );
}