// Announcements — team broadcast board. Owner/admin/manager post notices
// (holidays, flyers, text); every member sees them + gets a notification.
// Members are read-only.
(() => {
const { Card, Avatar } = window.TechyFuelOSDesignSystem_be0222;

function fmtWhen(d) {
  if (!d) return '';
  // API returns "YYYY-MM-DD HH:MM:SS" in UTC (no zone) — normalise before parse.
  const dt = new Date(String(d).replace(' ', 'T') + (String(d).endsWith('Z') ? '' : 'Z'));
  if (isNaN(dt)) return '';
  return dt.toLocaleString('en-GB', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}

function Announcements() {
  useLucide();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [form, setForm] = React.useState({ title: '', body: '', image_url: '' });
  const [imgUploading, setImgUploading] = React.useState(false);

  const canPost = ['owner', 'admin', 'manager'].includes(window.TFMyRole);

  const load = React.useCallback(() => {
    if (!window.API || !window.API.getAnnouncements) { setLoading(false); return; }
    setLoading(true);
    window.API.getAnnouncements().then(r => { if (r.data) setRows(r.data); }).catch(() => {}).finally(() => setLoading(false));
  }, []);
  React.useEffect(() => {
    load();
    // Opening this screen clears the announcements badge.
    try { window.TFClearAnnouncementsBadge && window.TFClearAnnouncementsBadge(); } catch {}
  }, [load]);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  async function uploadImage(file) {
    if (!file || !window.API || !window.API.uploadFile) return;
    if (!file.type.startsWith('image')) { alert('Please pick an image (JPG/PNG).'); return; }
    setImgUploading(true);
    try {
      const rec = await window.API.uploadFile('files', `announcement/${Date.now()}`, file);
      const url = rec && (rec.url || rec.file_url);
      if (url) set('image_url', url); else alert('Upload failed. Please try again.');
    } catch (e) { alert('Could not upload the flyer. Please try again.'); }
    setImgUploading(false);
  }

  function openAdd() { setForm({ title: '', body: '', image_url: '' }); setModalOpen(true); }

  async function save() {
    if (!form.title.trim() || !window.API) return;
    setSaving(true);
    try {
      const { data } = await window.API.createAnnouncement(form);
      if (data) setRows(prev => [data, ...prev]);
      setModalOpen(false);
    } catch (e) { alert('Could not post the announcement. Please try again.'); }
    setSaving(false);
  }

  async function remove(a) {
    if (!window.confirm('Delete this announcement?')) return;
    setRows(prev => prev.filter(r => r.id !== a.id));
    try { await window.API.deleteAnnouncement(a.id); } catch {}
  }

  return (
    <div style={{ padding: 24, maxWidth: 780, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Announcements</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>Company-wide notices — holidays, updates & flyers for the whole team.</p>
        </div>
        {canPost && (
          <button onClick={openAdd} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
            <Icon name="megaphone" size={16} /> New announcement
          </button>
        )}
      </div>

      {loading && <div style={{ padding: 28, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>}

      {!loading && rows.length === 0 && (
        <Card padding="lg">
          <div style={{ textAlign: 'center', padding: '30px 12px', color: 'var(--text-muted)' }}>
            <div style={{ marginBottom: 8 }}><Icon name="megaphone" size={30} /></div>
            <div style={{ fontSize: 'var(--text-sm)' }}>{canPost ? 'No announcements yet. Post your first one for the team.' : 'No announcements yet.'}</div>
          </div>
        </Card>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {!loading && rows.map(a => (
          <Card key={a.id} padding="lg">
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <Avatar name={a.author_name || 'Admin'} size="sm" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{a.title}</div>
                  {canPost && (
                    <button onClick={() => remove(a)} title="Delete" style={{ width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--red-200)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: 'var(--red-600)', flexShrink: 0 }}><Icon name="trash-2" size={13} /></button>
                  )}
                </div>
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', marginTop: 1 }}>{a.author_name || 'Admin'} · {fmtWhen(a.created_at)}</div>
                {a.body && <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', marginTop: 8, whiteSpace: 'pre-wrap', lineHeight: 1.55 }}>{a.body}</div>}
                {a.image_url && (
                  <a href={a.image_url} target="_blank" rel="noreferrer" style={{ display: 'block', marginTop: 10 }}>
                    <img src={a.image_url} alt="Flyer" style={{ maxWidth: '100%', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }} />
                  </a>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="New announcement" onSubmit={save} loading={saving} submitLabel="Post announcement">
        <FormRow label="Title" required><input style={FF.input} value={form.title} onChange={e => set('title', e.target.value)} placeholder="e.g. Eid holiday — office closed" /></FormRow>
        <FormRow label="Message"><textarea style={{ ...FF.input, minHeight: 90, resize: 'vertical' }} value={form.body} onChange={e => set('body', e.target.value)} placeholder="Write the announcement…" /></FormRow>
        <FormRow label="Flyer / image (optional)">
          <div>
            {form.image_url ? (
              <div style={{ position: 'relative', display: 'inline-block' }}>
                <img src={form.image_url} alt="Flyer" style={{ maxWidth: 260, maxHeight: 160, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }} />
                <button type="button" onClick={() => set('image_url', '')} title="Remove" style={{ position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%', background: 'rgba(0,0,0,0.6)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" size={13} /></button>
              </div>
            ) : (
              <label style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 14px', background: 'var(--slate-0)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-md)', cursor: imgUploading ? 'wait' : 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                <Icon name={imgUploading ? 'loader' : 'image'} size={15} />{imgUploading ? 'Uploading…' : 'Upload flyer'}
                <input type="file" accept="image/*" style={{ display: 'none' }} disabled={imgUploading} onChange={e => { const f = (e.target.files || [])[0]; if (f) uploadImage(f); e.target.value = ''; }} />
              </label>
            )}
          </div>
        </FormRow>
      </Modal>
    </div>
  );
}
Object.assign(window, { Announcements });
})();