// ============================
// LELUSA — Send Notification (manual)
// src/pages/send-notification.jsx
// ============================

function SendNotificationPage() {
  const { teamMembers } = window.LelusaStore.useBusinessData();
  const users = window.LelusaAdminAuth?.readUsers?.() || [];
  const departments = window.DEPARTMENT_LABELS || {};
  const [mode, setMode] = React.useState('all'); // all | department | role | user
  const [target, setTarget] = React.useState('');
  const [title, setTitle] = React.useState('');
  const [body, setBody] = React.useState('');
  const [priority, setPriority] = React.useState('normal');
  const [sent, setSent] = React.useState(false);

  const recipients = React.useMemo(() => {
    const A = window.LelusaAudience;
    if (!A) return [];
    if (mode === 'all') return A.everyone();
    if (mode === 'department') return A.byDepartment(target);
    if (mode === 'role') return A.byRole(target);
    if (mode === 'user') return target ? [target] : [];
    return [];
  }, [mode, target, teamMembers]);

  const send = () => {
    window.LelusaNotifications.create(
      { type: 'manual', title: title.trim(), body: body.trim(), page: 'admin-dashboard', priority, entity: {} },
      { recipientUserIds: mode === 'all' ? [] : recipients }
    );
    setSent(true);
    setTitle(''); setBody('');
  };

  const valid = title.trim() && body.trim() && (mode === 'all' || recipients.length);

  return (
    <AdminLayout title="Enviar notificación" subtitle="Notifica a una persona, departamento, rol o a todo el equipo">
      <div style={{ maxWidth: 640, display: 'grid', gap: 14 }}>
        <AdminField label="Destinatarios">
          <select value={mode} onChange={e => { setMode(e.target.value); setTarget(''); setSent(false); }} style={ADMIN_INPUT_STYLE}>
            <option value="all">Todo el equipo</option>
            <option value="department">Por departamento</option>
            <option value="role">Por rol</option>
            <option value="user">Una persona</option>
          </select>
        </AdminField>

        {mode === 'department' && (
          <AdminField label="Departamento">
            <select value={target} onChange={e => setTarget(e.target.value)} style={ADMIN_INPUT_STYLE}>
              <option value="">Selecciona…</option>
              {Object.entries(departments).map(([id, label]) => <option key={id} value={id}>{label}</option>)}
            </select>
          </AdminField>
        )}
        {mode === 'role' && (
          <AdminField label="Rol">
            <select value={target} onChange={e => setTarget(e.target.value)} style={ADMIN_INPUT_STYLE}>
              <option value="">Selecciona…</option>
              <option value="owner">Propietaria/Admin</option>
              <option value="manager">Coordinador</option>
              <option value="staff">Empleado</option>
            </select>
          </AdminField>
        )}
        {mode === 'user' && (
          <AdminField label="Persona">
            <select value={target} onChange={e => setTarget(e.target.value)} style={ADMIN_INPUT_STYLE}>
              <option value="">Selecciona…</option>
              {users.filter(u => u.active !== false).map(u => <option key={u.id} value={u.id}>{u.name} · {u.username}</option>)}
            </select>
          </AdminField>
        )}

        <AdminField label="Título"><input value={title} onChange={e => { setTitle(e.target.value); setSent(false); }} style={ADMIN_INPUT_STYLE} /></AdminField>
        <AdminField label="Mensaje"><textarea value={body} onChange={e => { setBody(e.target.value); setSent(false); }} rows={3} style={{ ...ADMIN_INPUT_STYLE, resize: 'vertical' }} /></AdminField>
        <AdminField label="Prioridad">
          <select value={priority} onChange={e => setPriority(e.target.value)} style={ADMIN_INPUT_STYLE}>
            <option value="normal">Normal</option>
            <option value="alta">Alta</option>
          </select>
        </AdminField>

        <div style={{ fontSize: 13, color: 'var(--muted)' }}>
          {mode === 'all' ? 'Llegará a todo el equipo.' : `Llegará a ${recipients.length} persona(s).`}
        </div>
        {sent && <div style={{ padding: 12, borderRadius: 12, background: 'var(--primary-light)', color: 'var(--primary-dark)', fontSize: 13 }}>Notificación enviada.</div>}
        <div><Btn disabled={!valid} onClick={send}>Enviar</Btn></div>
      </div>
    </AdminLayout>
  );
}

window.SendNotificationPage = SendNotificationPage;