const API_BASE_EMAIL = window.__LARAVEL_API_URL || 'https://api.techyfuel.com/api';
// Email screen — reads/sends through a mailbox via IMAP/SMTP (api/email-list.js,
// api/email-message.js, api/email-send.js, api/email-accounts.js). No OAuth --
// this is for plain cPanel/Hostinger-style mailboxes. By default it uses the
// one shared TechyFuel inbox (Vercel env vars) but each team member can also
// connect their own separate mailbox from here; those credentials are
// encrypted server-side and never touch the client, keyed to whoever is
// signed in (verified from their own Supabase session token on every call).
(() => {
const { Badge } = window.TechyFuelOSDesignSystem_be0222;

async function authHeader() {
  try {
    const { data } = await window.db.auth.getSession();
    const token = data?.session?.access_token;
    return token ? { Authorization: `Bearer ${token}` } : {};
  } catch { return {}; }
}

function fmtWhen(ds) {
  if (!ds) return '';
  const d = new Date(ds);
  const now = new Date();
  const sameDay = d.toDateString() === now.toDateString();
  return sameDay ? d.toLocaleTimeString('en', { hour: 'numeric', minute: '2-digit' }) : d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
}

// Normalize an address that the API may send as an object ({name,address}),
// a plain string, or null (bounce / system mail) — so we never show a raw blank.
function addrText(a) {
  if (!a) return '';
  if (typeof a === 'string') return a;
  return a.name || a.address || '';
}

function MessageRow({ msg, active, onClick, mailbox }) {
  const [hover, setHover] = React.useState(false);
  const isSent = mailbox === 'sent';
  const who = isSent
    ? (addrText(msg.to && msg.to[0]) || 'Unknown recipient')
    : (addrText(msg.from) || 'Unknown sender');
  const seen = !msg.unseen; // backend sends `unseen`, not `seen`
  return (
    <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px', cursor: 'pointer',
        userSelect: 'none', WebkitUserSelect: 'none', WebkitTapHighlightColor: 'transparent',
        borderLeft: `3px solid ${active ? 'var(--blue-600)' : 'transparent'}`,
        background: active ? 'var(--blue-50)' : hover ? 'var(--slate-50)' : 'transparent',
        borderBottom: '1px solid var(--border-subtle)' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', marginTop: 6, flexShrink: 0, background: (seen || isSent) ? 'transparent' : 'var(--blue-500)' }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ fontSize: 'var(--text-sm)', fontWeight: seen ? 'var(--fw-medium)' : 'var(--fw-bold)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {isSent ? `To: ${who}` : who}
          </span>
          <span style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', flexShrink: 0 }}>{fmtWhen(msg.date)}</span>
        </div>
        <div style={{ fontSize: 'var(--text-sm)', color: seen ? 'var(--text-muted)' : 'var(--text-body)', fontWeight: seen ? 'var(--fw-medium)' : 'var(--fw-semibold)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 2 }}>
          {msg.subject}
        </div>
      </div>
    </div>
  );
}

function ComposeModal({ open, onClose, onSent, accountId, initial, title }) {
  const [form, setForm] = React.useState({ to: '', subject: '', body: '' });
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  React.useEffect(() => {
    if (open) { setForm(initial || { to: '', subject: '', body: '' }); setError(''); }
  }, [open]);

  async function handleSend() {
    if (!form.to.trim() || !form.subject.trim() || !form.body.trim()) { setError('To, subject and message are all required.'); return; }
    setSending(true);
    setError('');
    try {
      const headers = { 'Content-Type': 'application/json', ...(await authHeader()) };
      const res = await fetch(API_BASE_EMAIL+'/email-send', { method: 'POST', headers, body: JSON.stringify({ ...form, accountId }) });
      const data = await res.json();
      if (!data.ok) { setError(data.error || 'Could not send the email.'); return; }
      setForm({ to: '', subject: '', body: '' });
      onClose();
      if (onSent) onSent();
    } catch (err) {
      setError(err.message || 'Could not send the email.');
    } finally { setSending(false); }
  }

  return (
    <Modal open={open} onClose={onClose} title={title || 'Compose email'} onSubmit={handleSend} loading={sending} submitLabel="Send">
      {error && (
        <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
          {error}
        </div>
      )}
      <FormRow label="To" required>
        <input style={FF.input} type="email" placeholder="client@example.com" value={form.to} onChange={e => set('to', e.target.value)} autoFocus />
      </FormRow>
      <FormRow label="Subject" required>
        <input style={FF.input} placeholder="Subject…" value={form.subject} onChange={e => set('subject', e.target.value)} />
      </FormRow>
      <FormRow label="Message" required>
        <textarea style={{ ...FF.input, height: 180, padding: '10px', resize: 'vertical', fontFamily: 'var(--font-sans)' }} placeholder="Write your message…" value={form.body} onChange={e => set('body', e.target.value)} />
      </FormRow>
    </Modal>
  );
}

function AddAccountModal({ open, onClose, onAdded }) {
  const EMPTY = { label: '', email: '', imapHost: '', imapPort: '993', smtpHost: '', smtpPort: '465', fromName: '', password: '' };
  const [form, setForm] = React.useState(EMPTY);
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState('');
  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  async function handleSave() {
    if (!form.label.trim() || !form.email.trim() || !form.imapHost.trim() || !form.smtpHost.trim() || !form.password.trim()) {
      setError('Label, email, IMAP host, SMTP host and password are all required.');
      return;
    }
    setSaving(true);
    setError('');
    try {
      const headers = { 'Content-Type': 'application/json', ...(await authHeader()) };
      // Backend validates snake_case keys (imap_host, smtp_host, …). Map the
      // camelCase form fields across so validation doesn't reject a filled form.
      const payload = {
        label: form.label,
        email: form.email,
        imap_host: form.imapHost,
        imap_port: form.imapPort ? Number(form.imapPort) : null,
        smtp_host: form.smtpHost,
        smtp_port: form.smtpPort ? Number(form.smtpPort) : null,
        from_name: form.fromName || null,
        password: form.password,
      };
      const res = await fetch(API_BASE_EMAIL+'/email-accounts', { method: 'POST', headers, body: JSON.stringify(payload) });
      const data = await res.json();
      if (!res.ok && !data.data) { setError(data.error || (data.errors ? Object.values(data.errors)[0][0] : 'Could not connect this account.')); return; }
      setForm(EMPTY);
      onClose();
      if (onAdded) onAdded(data.account || data.data);
    } catch (err) {
      setError(err.message || 'Could not connect this account.');
    } finally { setSaving(false); }
  }

  return (
    <Modal open={open} onClose={onClose} title="Connect your own email" onSubmit={handleSave} loading={saving} submitLabel="Connect">
      {error && (
        <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
          {error}
        </div>
      )}
      <FormRow label="Label" required>
        <input style={FF.input} placeholder="e.g. My Gmail, Personal inbox…" value={form.label} onChange={e => set('label', e.target.value)} autoFocus />
      </FormRow>
      <FormRow label="Email address" required>
        <input style={FF.input} type="email" placeholder="you@example.com" value={form.email} onChange={e => set('email', e.target.value)} />
      </FormRow>
      <div style={FF.row2}>
        <FormRow label="IMAP host" required>
          <input style={FF.input} placeholder="imap.example.com" value={form.imapHost} onChange={e => set('imapHost', e.target.value)} />
        </FormRow>
        <FormRow label="IMAP port">
          <input style={FF.input} type="number" value={form.imapPort} onChange={e => set('imapPort', e.target.value)} />
        </FormRow>
      </div>
      <div style={FF.row2}>
        <FormRow label="SMTP host" required>
          <input style={FF.input} placeholder="smtp.example.com" value={form.smtpHost} onChange={e => set('smtpHost', e.target.value)} />
        </FormRow>
        <FormRow label="SMTP port">
          <input style={FF.input} type="number" value={form.smtpPort} onChange={e => set('smtpPort', e.target.value)} />
        </FormRow>
      </div>
      <FormRow label="Password" required>
        <input style={FF.input} type="password" placeholder="Mailbox password" value={form.password} onChange={e => set('password', e.target.value)} />
      </FormRow>
      <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
        Stored encrypted — only you can use this connection, and nobody else on your team can see it or the password.
      </div>
    </Modal>
  );
}

function AccountSwitcher({ accounts, activeAccountId, onSwitch, onAddClick, onRemove }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    function onClickOutside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', onClickOutside);
    return () => document.removeEventListener('mousedown', onClickOutside);
  }, [open]);

  const active = activeAccountId ? accounts.find(a => a.id === activeAccountId) : null;
  const activeLabel = active ? active.label : 'TechyFuel (shared inbox)';

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={() => setOpen(o => !o)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer', maxWidth: 220 }}>
        <Icon name="mail" size={15} style={{ flexShrink: 0 }} />
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{activeLabel}</span>
        <Icon name="chevron-down" size={14} style={{ color: 'var(--text-subtle)', flexShrink: 0 }} />
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 200, background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', minWidth: 260, overflow: 'hidden' }}>
          <div onClick={() => { onSwitch(null); setOpen(false); }}
            style={{ padding: '10px 14px', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: !activeAccountId ? 'var(--fw-bold)' : 'var(--fw-medium)', color: !activeAccountId ? 'var(--blue-700)' : 'var(--text-body)', background: !activeAccountId ? 'var(--blue-50)' : 'transparent' }}
            onMouseEnter={e => { if (activeAccountId) e.currentTarget.style.background = 'var(--slate-50)'; }}
            onMouseLeave={e => { if (activeAccountId) e.currentTarget.style.background = 'transparent'; }}>
            TechyFuel (shared inbox)
          </div>
          {accounts.map(a => (
            <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', cursor: 'pointer', background: activeAccountId === a.id ? 'var(--blue-50)' : 'transparent', borderTop: '1px solid var(--border-subtle)' }}
              onMouseEnter={e => { if (activeAccountId !== a.id) e.currentTarget.style.background = 'var(--slate-50)'; }}
              onMouseLeave={e => { if (activeAccountId !== a.id) e.currentTarget.style.background = 'transparent'; }}>
              <div onClick={() => { onSwitch(a.id); setOpen(false); }} style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 'var(--text-sm)', fontWeight: activeAccountId === a.id ? 'var(--fw-bold)' : 'var(--fw-medium)', color: activeAccountId === a.id ? 'var(--blue-700)' : 'var(--text-body)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.label}</div>
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.email}</div>
              </div>
              <button onClick={() => onRemove(a)} title="Disconnect" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-subtle)', padding: 4, display: 'flex', flexShrink: 0 }}>
                <Icon name="x" size={14} />
              </button>
            </div>
          ))}
          <div onClick={() => { onAddClick(); setOpen(false); }}
            style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--blue-600)', borderTop: '1px solid var(--border-subtle)' }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--blue-50)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
            <Icon name="plus" size={14} /> Connect your own email
          </div>
        </div>
      )}
    </div>
  );
}

function Email() {
  useLucide();
  const [messages, setMessages] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [selectedUid, setSelectedUid] = React.useState(null);
  const [selectedMsg, setSelectedMsg] = React.useState(null);
  const [msgLoading, setMsgLoading] = React.useState(false);
  const [composeOpen, setComposeOpen] = React.useState(false);
  const [addAccountOpen, setAddAccountOpen] = React.useState(false);
  const [composeInitial, setComposeInitial] = React.useState(null);
  const [composeTitle, setComposeTitle] = React.useState('');
  const [mailbox, setMailbox] = React.useState('inbox'); // 'inbox' | 'sent' | 'announcements'
  const [announcements, setAnnouncements] = React.useState([]);
  const [annSelected, setAnnSelected] = React.useState(null);
  React.useEffect(() => {
    if (!window.API || !window.API.getAnnouncements) return;
    (async () => { try { const { data } = await window.API.getAnnouncements(); if (Array.isArray(data)) setAnnouncements(data); } catch {} })();
  }, []);
  const [accounts, setAccounts] = React.useState([]);
  const [activeAccountId, setActiveAccountId] = React.useState(null); // null = shared default mailbox
  // Mobile: the 340px list + reading pane can't sit side-by-side; show the list,
  // and the reading pane full-width once a message is opened (with Back).
  const [isMobile, setIsMobile] = React.useState(() => (typeof window !== 'undefined' ? window.innerWidth <= 768 : false));
  React.useEffect(() => {
    const onR = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);

  async function loadAccounts() {
    try {
      const headers = await authHeader();
      const res = await fetch(API_BASE_EMAIL+'/email-accounts', { headers });
      const data = await res.json();
      setAccounts(data.accounts || data.data || []);
    } catch {}
  }

  React.useEffect(() => { loadAccounts(); }, []);

  async function loadList(box) {
    const which = box || mailbox;
    if (which === 'announcements') { setLoading(false); return; } // not an IMAP mailbox
    setLoading(true);
    setError('');
    setSelectedUid(null);
    setSelectedMsg(null);
    try {
      const headers = await authHeader();
      const params = new URLSearchParams({ mailbox: which });
      if (activeAccountId) params.set('accountId', activeAccountId);
      const res = await fetch(API_BASE_EMAIL+`/email-list?${params}`, { headers });
      const data = await res.json();
      if (!data.ok) { setError(data.error || 'Could not load your mailbox.'); setMessages([]); return; }
      setMessages(data.messages || []);
    } catch (err) {
      setError(err.message || 'Could not load your mailbox.');
    } finally { setLoading(false); }
  }

  React.useEffect(() => { loadList(mailbox); }, [mailbox, activeAccountId]);

  async function openMessage(seq) {
    setSelectedUid(seq);
    setSelectedMsg(null);
    setMsgLoading(true);
    try {
      const headers = await authHeader();
      // Backend opens messages by IMAP sequence number (`seq`), not `uid`.
      const params = new URLSearchParams({ seq, mailbox });
      if (activeAccountId) params.set('accountId', activeAccountId);
      const res = await fetch(API_BASE_EMAIL+`/email-message?${params}`, { headers });
      const data = await res.json();
      if (data.ok) {
        setSelectedMsg(data.message);
        setMessages(prev => prev.map(m => m.seq === seq ? { ...m, unseen: false } : m));
      }
    } catch {} finally { setMsgLoading(false); }
  }

  function openReply(msg) {
    // `from`/`to` come as strings like "Name <email@x.com>" or plain email.
    const emailOf = (s) => { const m = /<([^>]+)>/.exec(String(s || '')); return m ? m[1] : (String(s || '').trim()); };
    const toStr = Array.isArray(msg.to) ? addrText(msg.to[0]) : msg.to;
    const senderAddr = mailbox === 'sent' ? emailOf(toStr) : emailOf(msg.from);
    const senderName = mailbox === 'sent' ? addrText(toStr) : addrText(msg.from);
    const quotedBody = (msg.text && msg.text.trim()) || (msg.html ? msg.html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim() : '');
    const when = msg.date ? new Date(msg.date).toLocaleString() : '';
    setComposeInitial({
      to: senderAddr || '',
      subject: /^re:/i.test(msg.subject || '') ? msg.subject : `Re: ${msg.subject || ''}`,
      body: `\n\nOn ${when}, ${senderName || 'they'} wrote:\n${quotedBody.split('\n').map(l => '> ' + l).join('\n')}`,
    });
    setComposeTitle('Reply');
    setComposeOpen(true);
  }

  function openForward(msg) {
    const senderLabel = addrText(msg.from) || 'Unknown';
    const toLabel = Array.isArray(msg.to) ? msg.to.map(addrText).join(', ') : addrText(msg.to);
    const body = (msg.text && msg.text.trim()) || (msg.html ? msg.html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim() : '');
    const when = msg.date ? new Date(msg.date).toLocaleString() : '';
    setComposeInitial({
      to: '',
      subject: /^fwd:/i.test(msg.subject || '') ? msg.subject : `Fwd: ${msg.subject || ''}`,
      body: `\n\n---------- Forwarded message ----------\nFrom: ${senderLabel}\nDate: ${when}\nSubject: ${msg.subject || ''}\nTo: ${toLabel}\n\n${body}`,
    });
    setComposeTitle('Forward');
    setComposeOpen(true);
  }

  async function removeAccount(acct) {
    if (!window.confirm(`Disconnect "${acct.label}"? You'll need to reconnect it to use it again.`)) return;
    try {
      const headers = await authHeader();
      await fetch(API_BASE_EMAIL+`/email-accounts?id=${acct.id}`, { method: 'DELETE', headers });
      setAccounts(prev => prev.filter(a => a.id !== acct.id));
      if (activeAccountId === acct.id) setActiveAccountId(null);
    } catch {}
  }

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px 16px', flexShrink: 0, gap: 12, flexWrap: 'wrap' }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Email</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{mailbox === 'announcements' ? `${announcements.length} announcements` : `${messages.length} messages in ${mailbox === 'sent' ? 'sent' : 'inbox'}`}</p>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <AccountSwitcher accounts={accounts} activeAccountId={activeAccountId} onSwitch={setActiveAccountId} onAddClick={() => setAddAccountOpen(true)} onRemove={removeAccount} />
          <button onClick={() => loadList()} disabled={loading} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: loading ? 'wait' : 'pointer' }}>
            <Icon name="refresh-cw" size={15} /> Refresh
          </button>
          <button onClick={() => { setComposeInitial(null); setComposeTitle('Compose email'); setComposeOpen(true); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-brand)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
            <Icon name="pencil" size={15} /> Compose
          </button>
        </div>
      </div>

      {error && (
        <div style={{ margin: '0 24px 16px', padding: '12px 16px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
          {error}
        </div>
      )}

      <div style={{ flex: 1, minHeight: 0, display: 'flex', margin: '0 24px 24px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', background: 'var(--slate-0)', overflow: 'hidden' }}>
        <div style={{ width: isMobile ? '100%' : 340, flexShrink: 0, display: (isMobile && selectedMsg) ? 'none' : 'flex', borderRight: '1px solid var(--border-subtle)', flexDirection: 'column' }}>
          <div style={{ display: 'flex', gap: 4, padding: 10, borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 }}>
            {[['inbox', 'inbox', 'Inbox'], ['sent', 'send', 'Sent'], ['announcements', 'megaphone', 'Notices']].map(([id, icon, label]) => (
              <button key={id} onClick={() => { setMailbox(id); setSelectedUid(null); setSelectedMsg(null); setAnnSelected(null); }}
                style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, height: 32, borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer',
                  background: mailbox === id ? 'var(--blue-50)' : 'transparent', color: mailbox === id ? 'var(--blue-700)' : 'var(--text-muted)',
                  fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)' }}>
                <Icon name={icon} size={14} /> {label}
              </button>
            ))}
          </div>
          <div style={{ flex: 1, overflowY: 'auto' }}>
          {mailbox === 'announcements' ? (
            announcements.length === 0 ? (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
                <Icon name="megaphone" size={28} style={{ color: 'var(--slate-300)', display: 'block', margin: '0 auto 10px' }} />
                No announcements yet.
              </div>
            ) : (
              announcements.map(a => (
                <button key={a.id} onClick={() => setAnnSelected(a)}
                  style={{ display: 'block', width: '100%', textAlign: 'left', padding: '12px 14px', border: 'none', borderBottom: '1px solid var(--border-subtle)', cursor: 'pointer', background: annSelected && annSelected.id === a.id ? 'var(--blue-50)' : 'transparent', fontFamily: 'var(--font-sans)' }}>
                  <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</div>
                  <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.author_name || 'Admin'}{a.body ? ' · ' + a.body : ''}</div>
                </button>
              ))
            )
          ) : loading ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>
          ) : messages.length === 0 && !error ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
              <Icon name="inbox" size={28} style={{ color: 'var(--slate-300)', display: 'block', margin: '0 auto 10px' }} />
              No messages yet.
            </div>
          ) : (
            messages.map(m => <MessageRow key={m.seq} msg={m} mailbox={mailbox} active={m.seq === selectedUid} onClick={() => openMessage(m.seq)} />)
          )}
          </div>
        </div>
        <div style={{ flex: 1, minWidth: 0, display: (isMobile && !selectedUid && !(mailbox === 'announcements' && annSelected)) ? 'none' : 'block', overflowY: 'auto', padding: (selectedUid || (mailbox === 'announcements' && annSelected)) ? '24px 28px' : 0 }}>
          {mailbox === 'announcements' ? (
            !annSelected ? (
              <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}>
                <Icon name="megaphone" size={32} style={{ color: 'var(--slate-300)', marginBottom: 10 }} />
                <div style={{ fontSize: 'var(--text-sm)' }}>Select an announcement to read it</div>
              </div>
            ) : (
              <>
                {isMobile && (
                  <button onClick={() => setAnnSelected(null)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 32, marginBottom: 12, padding: '0 12px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer' }}>
                    <Icon name="arrow-left" size={15} /> Back
                  </button>
                )}
                <div style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', marginBottom: 6 }}>{annSelected.title}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-subtle)', marginBottom: 14 }}>By {annSelected.author_name || 'Admin'}</div>
                {annSelected.body && <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{annSelected.body}</div>}
                {annSelected.image_url && (
                  <a href={annSelected.image_url} target="_blank" rel="noreferrer" style={{ display: 'block', marginTop: 14 }}>
                    <img src={annSelected.image_url} alt="Flyer" style={{ maxWidth: '100%', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }} />
                  </a>
                )}
              </>
            )
          ) : !selectedUid ? (
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}>
              <Icon name="mail" size={32} style={{ color: 'var(--slate-300)', marginBottom: 10 }} />
              <div style={{ fontSize: 'var(--text-sm)' }}>Select a message to read it</div>
            </div>
          ) : msgLoading ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>
          ) : selectedMsg ? (
            <>
              {isMobile && (
                <button onClick={() => { setSelectedUid(null); setSelectedMsg(null); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 32, marginBottom: 12, padding: '0 12px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer' }}>
                  <Icon name="arrow-left" size={15} /> Back
                </button>
              )}
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 10, flexWrap: 'wrap' }}>
                <div style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{selectedMsg.subject}</div>
                <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                  {mailbox !== 'sent' && (
                    <button onClick={() => openReply(selectedMsg)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 32, padding: '0 12px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer' }}>
                      <Icon name="reply" size={14} /> Reply
                    </button>
                  )}
                  <button onClick={() => openForward(selectedMsg)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 32, padding: '0 12px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer' }}>
                    <Icon name="forward" size={14} /> Forward
                  </button>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 16, borderBottom: '1px solid var(--border-subtle)', marginBottom: 16 }}>
                <Badge tone="neutral" size="sm">{mailbox === 'sent' ? `To: ${(Array.isArray(selectedMsg.to) ? selectedMsg.to.map(addrText).join(', ') : addrText(selectedMsg.to)) || 'Unknown'}` : (addrText(selectedMsg.from) || 'Unknown sender')}</Badge>
                <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-subtle)' }}>{selectedMsg.date ? new Date(selectedMsg.date).toLocaleString() : ''}</span>
              </div>
              {selectedMsg.html ? (
                <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: selectedMsg.html }} />
              ) : (
                <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{selectedMsg.text}</div>
              )}
            </>
          ) : (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Could not load this message.</div>
          )}
        </div>
      </div>

      <ComposeModal open={composeOpen} onClose={() => setComposeOpen(false)} onSent={loadList} accountId={activeAccountId} initial={composeInitial} title={composeTitle} />
      <AddAccountModal open={addAccountOpen} onClose={() => setAddAccountOpen(false)} onAdded={acct => { setAccounts(prev => [...prev, acct]); setActiveAccountId(acct.id); }} />
    </div>
  );
}

Object.assign(window, { Email });
})();