// email.jsx — EMAIL module: compose (rich editor) / sent / templates / settings + widget.
const MAIL_APP = APPS.find(a => a.id === 'mail');

function RichEditor({ html, onInput, placeholder }) {
  const ref = React.useRef();
  React.useEffect(() => { if (ref.current && ref.current.innerHTML !== html) ref.current.innerHTML = html || ''; }, [html]);
  const cmd = (c, v) => { document.execCommand(c, false, v); ref.current.focus(); onInput(ref.current.innerHTML); };
  const Btn = ({ c, v, icon, title }) => <button type="button" className="iconbtn" title={title} onMouseDown={e => { e.preventDefault(); cmd(c, v); }}><i className={'bi ' + icon}></i></button>;
  return (
    <div className="editor-wrap">
      <div className="editor-toolbar">
        <Btn c="bold" icon="bi-type-bold" title="Bold" /><Btn c="italic" icon="bi-type-italic" title="Italic" /><Btn c="underline" icon="bi-type-underline" title="Underline" />
        <span className="sep"></span>
        <button type="button" className="iconbtn" title="Color" onMouseDown={e => e.preventDefault()} style={{ position:'relative' }}>
          <i className="bi bi-palette" style={{ color:'var(--primary)' }}></i>
          <input type="color" defaultValue="#1466E0" onChange={e => cmd('foreColor', e.target.value)} style={{ position:'absolute', inset:0, opacity:0, cursor:'pointer' }} />
        </button>
        <Btn c="insertUnorderedList" icon="bi-list-ul" title="Bullets" /><Btn c="insertOrderedList" icon="bi-list-ol" title="Numbered" />
        <span className="sep"></span>
        <button type="button" className="iconbtn" title="Link" onMouseDown={e => { e.preventDefault(); const u = prompt('URL:', 'https://'); if (u) cmd('createLink', u); }}><i className="bi bi-link-45deg"></i></button>
        <button type="button" className="iconbtn" title="Image" onMouseDown={e => { e.preventDefault(); cmd('insertHTML', '<div style="background:repeating-linear-gradient(135deg,#eee,#eee 8px,#f6f6f6 8px,#f6f6f6 16px);border:1px solid #ddd;border-radius:4px;height:90px;display:flex;align-items:center;justify-content:center;color:#999;font-family:monospace;font-size:11px;margin:6px 0">image-placeholder.png</div>'); }}><i className="bi bi-image"></i></button>
      </div>
      <div ref={ref} className="editor" contentEditable data-ph={placeholder} suppressContentEditableWarning
        onInput={e => onInput(e.currentTarget.innerHTML)} />
    </div>
  );
}

function MailCompose() {
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [to, setTo] = React.useState(p.pendingData.mail?.to || []);
  const [cc, setCc] = React.useState([]);
  const [subject, setSubject] = React.useState(p.pendingData.mail?.subject || '');
  const [body, setBody] = React.useState('');
  const [attach, setAttach] = React.useState([]);
  const suggestions = CONTACTS.map(c => c.email);
  const validEmail = s => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);
  React.useEffect(() => { if (p.pendingData.mail) p.clearPending(); }, []);

  const applyTemplate = (tpl) => { setSubject(tpl.subject); setBody(tpl.html + '<br>' + p.mailSettings.signature); };
  const send = () => {
    if (!to.length) { toast(lang === 'vi' ? 'Chưa có người nhận' : 'No recipient', 'error'); return; }
    if (!to.every(validEmail)) { toast(lang === 'vi' ? 'Email người nhận không hợp lệ' : 'Invalid recipient email', 'error'); return; }
    p.addSentEmail({ id:'e' + Date.now(), to, subject:subject || '(no subject)', date:new Date().toISOString().slice(0, 16).replace('T', ' '), status:'sent', html:body || '<p>(empty)</p>' });
    toast(t('mail.sent.ok'), 'success');
    setTo([]); setCc([]); setSubject(''); setBody(''); setAttach([]);
    p.navigate({ name:'module', module:'mail', sub:'sent' });
  };

  return (
    <div className="page pagefade" style={{ maxWidth:880 }}>
      <div className="page-head"><div><h1>{t('mail.compose')}</h1><div className="sub">{lang === 'vi' ? 'Soạn và gửi email ra ngoài (mock).' : 'Compose & send external email (mock).'}</div></div></div>
      <div className="card"><div className="card-body col g16">
        <Field label={t('mail.from')}><input className="input" value={p.me.email} disabled style={{ background:'var(--bg-sunken)' }} /></Field>
        <Field label={t('mail.to')}><ChipInput value={to} onChange={setTo} suggestions={suggestions} listId="to-sug" placeholder={lang === 'vi' ? 'Nhập email, Enter để thêm' : 'Type email, Enter to add'} /></Field>
        <Field label={t('mail.cc')}><ChipInput value={cc} onChange={setCc} suggestions={suggestions} listId="cc-sug" placeholder="Cc…" /></Field>
        <div className="flex g12 wrap items-end">
          <div className="grow" style={{ minWidth:220 }}><Field label={t('mail.subject')}><input className="input" value={subject} onChange={e => setSubject(e.target.value)} placeholder={lang === 'vi' ? 'Tiêu đề email' : 'Subject'} /></Field></div>
          <Popover align="right" width={230} button={({ toggle }) => <button className="btn" onClick={toggle}><i className="bi bi-file-earmark-richtext"></i>{t('mail.template')}</button>}>
            {({ close }) => (<>
              <div className="menu-label">{t('mail.templates')}</div>
              {p.templates.map(tpl => <button key={tpl.id} className="menu-item" onClick={() => { applyTemplate(tpl); close(); }}><i className="bi bi-envelope-paper"></i>{tpl.name[lang] || tpl.name.vi}</button>)}
            </>)}
          </Popover>
        </div>
        <Field label={lang === 'vi' ? 'Nội dung' : 'Body'}><RichEditor html={body} onInput={setBody} placeholder={lang === 'vi' ? 'Nhập nội dung email…' : 'Write your email…'} /></Field>
        <div className="flex g8 items-center wrap">
          {attach.map((a, i) => <span key={i} className="badge badge-neutral"><i className="bi bi-paperclip"></i>{a}<button onClick={() => setAttach(s => s.filter((_, j) => j !== i))} style={{ border:'none', background:'none', marginLeft:2 }}><i className="bi bi-x"></i></button></span>)}
          <button className="btn btn-subtle btn-sm" onClick={() => setAttach(s => [...s, 'tai-lieu-' + (s.length + 1) + '.pdf'])}><i className="bi bi-paperclip"></i>{t('mail.attach')}</button>
        </div>
        <div className="flex justify-between items-center">
          <span className="subtle" style={{ fontSize:'var(--fs-sm)' }}><i className="bi bi-shield-lock"></i> {lang === 'vi' ? 'Gửi qua kết nối Gmail (mock)' : 'Sent via Gmail connection (mock)'}</span>
          <button className="btn btn-primary btn-lg" onClick={send}><i className="bi bi-send"></i>{t('c.send')}</button>
        </div>
      </div></div>
    </div>
  );
}

function MailSent() {
  const p = usePortal();
  const { t, lang } = useLang();
  const [open, setOpen] = React.useState(null);
  const list = p.sentEmails;
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('mail.sent')}</h1><div className="sub">{list.length} {lang === 'vi' ? 'email đã gửi' : 'emails sent'}</div></div><button className="btn btn-primary" onClick={() => p.navigate({ name:'module', module:'mail', sub:'compose' })}><i className="bi bi-pencil-square"></i>{t('mail.compose')}</button></div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('mail.to')}</th><th>{t('mail.subject')}</th><th>{t('c.status')}</th><th>{lang === 'vi' ? 'Thời gian' : 'Sent'}</th></tr></thead>
          <tbody>
            {list.map(e => (
              <tr key={e.id} className="mail-row" onClick={() => setOpen(e)}>
                <td><span className="flex g8 items-center"><Avatar name={e.to[0]} size={22} color="var(--gray-400)" /><span className="mono" style={{ fontSize:'var(--fs-base)' }}>{e.to[0]}{e.to.length > 1 && <span className="badge badge-neutral" style={{ marginLeft:4 }}>+{e.to.length - 1}</span>}</span></span></td>
                <td><span className="subj">{e.subject}</span></td>
                <td><span className="badge badge-success"><i className="dot"></i>{lang === 'vi' ? 'Đã gửi' : 'Sent'}</span></td>
                <td className="muted mono" style={{ fontSize:'var(--fs-base)' }}>{e.date}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div></div>
      {open && (
        <Modal title={open.subject} width={620} onClose={() => setOpen(null)} footer={<button className="btn" onClick={() => setOpen(null)}>{t('c.close')}</button>}>
          <div className="col g8" style={{ marginBottom:12 }}>
            <div className="det-row"><span className="dk">{t('mail.from')}</span><span className="dv mono">{p.me.email}</span></div>
            <div className="det-row"><span className="dk">{t('mail.to')}</span><span className="dv mono">{open.to.join(', ')}</span></div>
            <div className="det-row"><span className="dk">{lang === 'vi' ? 'Thời gian' : 'Sent'}</span><span className="dv mono">{open.date}</span></div>
          </div>
          <div className="mail-html" dangerouslySetInnerHTML={{ __html:open.html }} />
        </Modal>
      )}
    </div>
  );
}

function MailTemplates() {
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const canEdit = p.role === 'manager' || p.role === 'admin';
  const tpls = p.templates;
  const [edit, setEdit] = React.useState(null);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('mail.templates')}</h1><div className="sub">{lang === 'vi' ? '4 mẫu email dùng nhanh.' : '4 reusable email templates.'} {!canEdit && <span className="badge badge-neutral">{lang === 'vi' ? 'Chỉ Quản lý/Admin được sửa' : 'Manager/Admin can edit'}</span>}</div></div></div>
      <div className="app-grid" style={{ gridTemplateColumns:'1fr 1fr' }}>
        {tpls.map(tpl => (
          <div key={tpl.id} className="card">
            <div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}><i className="bi bi-envelope-paper" style={{ color:'var(--primary)', marginRight:6 }}></i>{tpl.name[lang] || tpl.name.vi}</h3>
              {canEdit && <button className="btn btn-ghost btn-sm" onClick={() => setEdit(tpl)}><i className="bi bi-pencil"></i>{t('c.edit')}</button>}</div>
            <div className="card-body">
              <div className="subtle mono" style={{ fontSize:'var(--fs-sm)', marginBottom:8 }}>{tpl.subject}</div>
              <div className="mail-html" style={{ maxHeight:120, overflow:'hidden', fontSize:'var(--fs-base)' }} dangerouslySetInnerHTML={{ __html:tpl.html }} />
            </div>
          </div>
        ))}
      </div>
      {edit && (
        <Modal title={t('c.edit') + ' — ' + (edit.name[lang] || edit.name.vi)} width={620} onClose={() => setEdit(null)}
          footer={<><button className="btn" onClick={() => setEdit(null)}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={() => { p.updateTemplate(edit); setEdit(null); toast(lang === 'vi' ? 'Đã lưu mẫu' : 'Template saved'); }}>{t('c.save')}</button></>}>
          <div className="col g16">
            <Field label={t('mail.subject')}><input className="input" value={edit.subject} onChange={e => setEdit({ ...edit, subject:e.target.value })} /></Field>
            <Field label={lang === 'vi' ? 'Nội dung HTML' : 'HTML body'}><textarea className="textarea mono" rows={7} value={edit.html} onChange={e => setEdit({ ...edit, html:e.target.value })} style={{ fontSize:'var(--fs-base)' }} /></Field>
          </div>
        </Modal>
      )}
    </div>
  );
}

function MailSettings() {
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const isAdmin = p.role === 'admin';
  const [sig, setSig] = React.useState(p.mailSettings.signature);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Kết nối & chữ ký mặc định.' : 'Connection & default signature.'}</div></div></div>
      {!isAdmin && <div className="card" style={{ marginBottom:14 }}><div className="card-body flex g8 items-center"><i className="bi bi-info-circle" style={{ color:'var(--info)' }}></i>{lang === 'vi' ? 'Chỉ Admin có thể chỉnh kết nối hệ thống.' : 'Only Admin can change the system connection.'}</div></div>}
      <div className="card" style={{ maxWidth:620 }}>
        <div className="card-head"><h3>{lang === 'vi' ? 'Kết nối Gmail' : 'Gmail connection'}</h3><span className="badge badge-success"><i className="dot"></i>{lang === 'vi' ? 'Đã kết nối' : 'Connected'}</span></div>
        <div className="card-body col g16">
          <div className="det-row"><span className="dk">{lang === 'vi' ? 'Tài khoản gửi' : 'Sending account'}</span><span className="dv mono">{p.mailSettings.account}</span></div>
          <Field label={lang === 'vi' ? 'Chữ ký HTML mặc định' : 'Default HTML signature'}>
            <textarea className="textarea mono" rows={4} value={sig} onChange={e => setSig(e.target.value)} disabled={!isAdmin} style={{ fontSize:'var(--fs-base)', background:isAdmin ? 'var(--bg)' : 'var(--bg-sunken)' }} />
          </Field>
          <div className="mail-html" dangerouslySetInnerHTML={{ __html:sig }} />
          {isAdmin && <div className="flex justify-end"><button className="btn btn-primary" onClick={() => { p.saveMailSettings({ signature:sig }); toast(lang === 'vi' ? 'Đã lưu cài đặt' : 'Settings saved'); }}>{t('c.save')}</button></div>}
        </div>
      </div>
    </div>
  );
}

function MailModule() {
  const p = usePortal();
  const { t } = useLang();
  const sub = p.route.sub || 'compose';
  const items = [
    { id:'compose', icon:'bi-pencil-square', label:t('mail.compose') },
    { id:'sent', icon:'bi-send', label:t('mail.sent'), count:p.sentEmails.length },
    { id:'templates', icon:'bi-file-earmark-richtext', label:t('mail.templates') },
    { id:'settings', icon:'bi-gear', label:t('c.settings') },
  ];
  const go = (id) => p.navigate({ name:'module', module:'mail', sub:id });
  return (<>
    <ModuleSidebar app={MAIL_APP} items={items} active={sub} onNavigate={go} />
    <main className="main">
      {sub === 'compose' && <MailCompose />}
      {sub === 'sent' && <MailSent />}
      {sub === 'templates' && <MailTemplates />}
      {sub === 'settings' && <MailSettings />}
    </main>
  </>);
}

/* Dashboard widget */
function EmailWidget() {
  const p = usePortal();
  const { t, lang } = useLang();
  return (
    <div className="card">
      <div className="card-head"><h3><i className="bi bi-envelope" style={{ color:'var(--primary)', marginRight:6 }}></i>{t('mail.sent')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.openApp(MAIL_APP)}>{t('c.viewAll')}</button></div>
      <div className="card-body" style={{ paddingTop:6 }}>
        <div className="flex g16" style={{ marginBottom:8 }}>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{p.sentEmails.length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'đã gửi' : 'sent'}</div></div>
        </div>
        {p.sentEmails.slice(0, 3).map(e => (
          <div key={e.id} className="list-row"><i className="bi bi-envelope-check" style={{ color:'var(--success)' }}></i><span className="grow truncate">{e.subject}</span><span className="subtle mono" style={{ fontSize:'var(--fs-sm)' }}>{e.date.slice(5, 10)}</span></div>
        ))}
        <button className="btn btn-subtle btn-sm" style={{ width:'100%', marginTop:8 }} onClick={() => p.quick('mail')}><i className="bi bi-pencil-square"></i>{t('mail.compose')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { MailModule, EmailWidget });