// ============================
// LELUSA — Team Admin Page
// src/pages/team-page.jsx
// ============================

const TEAM_DEPARTMENTS = [
  { id: 'direccion', i18nKey: 'admin_team_dept_direccion' },
  { id: 'decoracion', i18nKey: 'admin_team_dept_decoracion' },
  { id: 'postres', i18nKey: 'admin_team_dept_postres' },
  { id: 'finanzas', i18nKey: 'admin_team_dept_finanzas' },
  { id: 'operaciones', i18nKey: 'admin_team_dept_operaciones' },
];

const TEAM_ROLES = [
  { id: 'owner', i18nKey: 'admin_team_role_owner' },
  { id: 'manager', i18nKey: 'admin_team_role_manager' },
  { id: 'staff', i18nKey: 'admin_team_role_staff' },
];

function TeamMemberModal({ open, member, onClose, onSave }) {
  const { t } = window.ReactI18next.useTranslation();
  const [form, setForm] = React.useState({
    name: '',
    username: '',
    password: '',
    role: 'staff',
    department: 'decoracion',
    phone: '',
    email: '',
    active: true,
    permissions: [],
  });
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    if (!open) return;
    setError('');
    setForm({
      name: member?.name || '',
      username: member?.username || '',
      password: '',
      role: member?.role || 'staff',
      department: member?.department || 'decoracion',
      phone: member?.phone || '',
      email: member?.email || '',
      active: member?.active !== false,
      permissions: Array.isArray(member?.permissions)
        ? member.permissions
        : (window.LelusaAccess?.getDefaultPermissions?.(member?.role || 'staff', member?.department || 'decoracion') || []),
    });
  }, [open, member?.id]);

  const set = (key, value) => setForm(current => ({ ...current, [key]: value }));
  const setRole = (role) => setForm(current => ({
    ...current,
    role,
    permissions: window.LelusaAccess?.getDefaultPermissions?.(role, current.department) || current.permissions,
  }));
  const setDepartment = (department) => setForm(current => ({
    ...current,
    department,
    permissions: window.LelusaAccess?.getDefaultPermissions?.(current.role, department) || current.permissions,
  }));
  const togglePermission = (permission) => setForm(current => {
    const currentPermissions = new Set(current.permissions || []);
    currentPermissions.has(permission) ? currentPermissions.delete(permission) : currentPermissions.add(permission);
    return { ...current, permissions: Array.from(currentPermissions) };
  });
  const valid = form.name.trim() && form.username.trim() && (member?.id || form.password.length >= 8);

  const submit = async () => {
    try {
      setError('');
      await onSave(form);
    } catch (err) {
      setError(err.message || t('admin_team_save_error'));
    }
  };

  return (
    <AdminModal open={open} onClose={onClose} title={member?.id ? t('admin_team_modal_edit_title') : t('admin_team_modal_new_title')} subtitle={t('admin_team_modal_subtitle')}>
      <AdminFormSection>
        <AdminField label={t('admin_team_field_name')}>
          <input value={form.name} onChange={e => set('name', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_team_field_username')}>
          <input value={form.username} onChange={e => set('username', e.target.value)} style={ADMIN_INPUT_STYLE} disabled={Boolean(member?.id)} />
        </AdminField>
        {!member?.id && (
          <AdminField label={t('admin_team_field_temp_password')}>
            <input type="password" value={form.password} onChange={e => set('password', e.target.value)} style={ADMIN_INPUT_STYLE} placeholder={t('admin_team_field_temp_password_ph')} />
          </AdminField>
        )}
        <AdminField label={t('admin_team_field_role')}>
          <select value={form.role} onChange={e => setRole(e.target.value)} style={ADMIN_INPUT_STYLE}>
            {TEAM_ROLES.map(item => <option key={item.id} value={item.id}>{t(item.i18nKey)}</option>)}
          </select>
        </AdminField>
        <AdminField label={t('admin_team_field_department')}>
          <select value={form.department} onChange={e => setDepartment(e.target.value)} style={ADMIN_INPUT_STYLE}>
            {TEAM_DEPARTMENTS.map(item => <option key={item.id} value={item.id}>{t(item.i18nKey)}</option>)}
          </select>
        </AdminField>
        <AdminField label={t('admin_team_field_permissions')} full hint={t('admin_team_field_permissions_hint')}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(145px, 1fr))', gap: 8 }}>
            {Object.entries(window.LelusaAccess?.labels || {}).map(([permission, label]) => {
              const checked = form.role === 'owner' || (form.permissions || []).includes(permission);
              return (
                <label key={permission} style={{ display: 'flex', alignItems: 'center', gap: 8, minHeight: 38, padding: '8px 10px', borderRadius: 12, border: `1px solid ${checked ? 'var(--primary)' : 'var(--border)'}`, background: checked ? 'var(--primary-light)' : 'var(--bg-soft)', color: checked ? 'var(--primary-dark)' : 'var(--muted)', fontSize: 12, fontWeight: 800, cursor: form.role === 'owner' ? 'not-allowed' : 'pointer' }}>
                  <input type="checkbox" checked={checked} disabled={form.role === 'owner'} onChange={() => togglePermission(permission)} />
                  {label}
                </label>
              );
            })}
          </div>
        </AdminField>
        <AdminField label={t('admin_team_field_phone')}>
          <input value={form.phone} onChange={e => set('phone', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_team_field_email')}>
          <input value={form.email} onChange={e => set('email', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_team_field_status')}>
          <select value={form.active ? 'active' : 'inactive'} onChange={e => set('active', e.target.value === 'active')} style={ADMIN_INPUT_STYLE}>
            <option value="active">{t('admin_team_status_active')}</option>
            <option value="inactive">{t('admin_team_status_inactive')}</option>
          </select>
        </AdminField>
      </AdminFormSection>
      {error && <div style={{ marginTop: 14, padding: 12, borderRadius: 12, background: '#FFE0E0', color: '#B83232', fontSize: 13 }}>{error}</div>}
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 18 }}>
        <Btn variant="ghost" onClick={onClose}>{t('admin_team_cancel')}</Btn>
        <Btn disabled={!valid} onClick={submit}>{t('admin_team_save')}</Btn>
      </div>
    </AdminModal>
  );
}

function TeamPage() {
  const { t } = window.ReactI18next.useTranslation();
  const { teamMembers, events } = window.LelusaStore.useBusinessData();
  const isMobile = window.LelusaGestures.useIsMobile();
  const [filter, setFilter] = React.useState('all');
  const [editing, setEditing] = React.useState(null);
  const [authUsers, setAuthUsers] = React.useState(() => window.LelusaAdminAuth?.readUsers?.() || []);
  const labels = Object.fromEntries(TEAM_DEPARTMENTS.map(item => [item.id, t(item.i18nKey)]));
  const roleLabels = Object.fromEntries(TEAM_ROLES.map(item => [item.id, t(item.i18nKey)]));

  React.useEffect(() => {
    window.LelusaAdminAuth?.refreshUsers?.().then(users => setAuthUsers(users || [])).catch(() => {});
    const refresh = () => setAuthUsers(window.LelusaAdminAuth?.readUsers?.() || []);
    window.addEventListener('lelusa-admin-users-change', refresh);
    return () => window.removeEventListener('lelusa-admin-users-change', refresh);
  }, []);

  const merged = React.useMemo(() => {
    const byId = new Map();
    (authUsers || []).forEach(user => byId.set(user.id, { ...user }));
    (teamMembers || []).forEach(member => byId.set(member.id, { ...(byId.get(member.id) || {}), ...member }));
    return Array.from(byId.values());
  }, [authUsers, teamMembers]);

  const filtered = merged.filter(member => filter === 'all' || member.department === filter);
  const activeEvents = (events || []).filter(event => event.status !== 'cancelado' && event.status !== 'completado');

  const save = async (form) => {
    let member = editing?.id ? editing : null;
    if (editing?.id) {
      member = await window.LelusaAdminAuth.updateUser(editing.id, form);
    } else {
      member = await window.LelusaAdminAuth.createUser(form);
    }
    window.LelusaStore.upsertTeamMember({ ...member, ...form, id: member.id });
    setEditing(null);
  };

  return (
    <AdminLayout title={t('admin_team_page_title')} subtitle={t('admin_team_page_subtitle', { count: merged.length })}>
      <div className="lel-stat-grid" style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(auto-fill, minmax(190px, 1fr))', gap: isMobile ? 10 : 14, marginBottom: 18 }}>
        <StatCard icon="clients" label={t('admin_team_stat_active_users')} value={merged.filter(item => item.active !== false).length} sub={t('admin_team_stat_active_users_sub')} color="var(--primary)" />
        <StatCard icon="sparkles" label={t('admin_team_stat_desserts')} value={merged.filter(item => item.department === 'postres').length} sub={t('admin_team_stat_desserts_sub')} color="#C8881A" />
        <StatCard icon="calendar" label={t('admin_team_stat_assigned_events')} value={activeEvents.filter(event => (event.assignedUserIds || []).length).length} sub={t('admin_team_stat_assigned_events_sub')} color="#2A8A50" />
      </div>

      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden' }}>
        <div style={{ padding: isMobile ? 14 : 18, borderBottom: '1px solid var(--border)', display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <select value={filter} onChange={e => setFilter(e.target.value)} style={{ ...ADMIN_INPUT_STYLE, width: isMobile ? '100%' : 220 }}>
            <option value="all">{t('admin_team_filter_all_departments')}</option>
            {TEAM_DEPARTMENTS.map(item => <option key={item.id} value={item.id}>{t(item.i18nKey)}</option>)}
          </select>
          <Btn onClick={() => setEditing({})}><Icon name="plus" size={15} color="#fff" /> {t('admin_team_new_user')}</Btn>
        </div>

        {filtered.length === 0 ? (
          <div style={{ padding: 46, textAlign: 'center', color: 'var(--muted)' }}>{t('admin_team_empty')}</div>
        ) : isMobile ? (
          <div className="lel-admin-list">
            {filtered.map(member => (
              <AdminListRow key={member.id} icon="user" title={member.name} subtitle={`${labels[member.department] || member.department} · ${member.username}`} value={member.active === false ? 'off' : 'on'} badge={roleLabels[member.role] || member.role} badgeColor={member.active === false ? '#C83A3A' : '#2A8A50'} onClick={() => setEditing(member)} />
            ))}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14, padding: 18 }}>
            {filtered.map(member => {
              const assigned = activeEvents.filter(event => (event.assignedUserIds || []).includes(member.id));
              return (
                <button key={member.id} onClick={() => setEditing(member)} style={{ textAlign: 'left', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 16, padding: 16, cursor: 'pointer' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                    <Icon name="user" size={20} color="var(--primary)" />
                    <Badge color={member.active === false ? 'warm' : 'sage'}>{member.active === false ? t('admin_team_status_inactive') : t('admin_team_status_active')}</Badge>
                  </div>
                  <h3 style={{ margin: '14px 0 4px', fontSize: 15, fontFamily: "'DM Sans', sans-serif" }}>{member.name}</h3>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{member.username} · {labels[member.department] || member.department}</div>
                  <div style={{ marginTop: 14, fontSize: 12, color: 'var(--muted)' }}>{t('admin_team_card_assigned_events', { count: assigned.length })}</div>
                </button>
              );
            })}
          </div>
        )}
      </div>

      <TeamMemberModal open={editing !== null} member={editing?.id ? editing : null} onClose={() => setEditing(null)} onSave={save} />
    </AdminLayout>
  );
}

window.TeamPage = TeamPage;