// Page Annonces / Mises à jour
function Announcements({ setPage, state, actions, currentUserName = '' }) {
  const [Toast, showToast] = useToast();
  const userName = currentUserName.trim();
  const [draft, setDraft] = useState(() => ({ name: userName, text: '' }));
  const likedIds = new Set(state.likedAnnouncementIds || []);
  const activeAnnouncements = (state.announcements || []).filter((u) => !u.retiredAt);
  const pinned = activeAnnouncements.find((u) => u.pinned);
  const updates = activeAnnouncements.filter((u) => !u.pinned);
  const reminderPrefs = state.reminderPrefs || {};
  const toggleLike = (id) => actions.toggleAnnouncementLike(id, userName);
  const submitAnnouncement = () => {
    if (!draft.name.trim() || !draft.text.trim()) {
      showToast('Ajoutez votre nom et un message');
      return;
    }
    actions.addAnnouncement(draft);
    setDraft({ name: userName, text: '' });
    showToast('Annonce publiée');
  };
  useEffect(() => {
    setDraft((current) => current.name.trim() ? current : { ...current, name: userName });
  }, [userName]);
  const updateReminder = (key, value) => {
    actions.saveReminderPrefs({ [key]: value }, userName);
    showToast('Préférences enregistrées');
  };

  return (
    <div>
      <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
        <Photo kind="lights" src="assets/generated/announcements-hero.png" bg style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(14,46,34,0.4) 0%, rgba(14,46,34,0.6) 100%)',
          display: 'grid', placeItems: 'center', textAlign: 'center', color: 'white', padding: 24
        }}>
          <div>
            <h1 className="serif" style={{ fontSize: 44, margin: 0, color: 'white' }}>Annonces familiales</h1>
            <div style={{ fontSize: 15, opacity: 0.92, marginTop: 4 }}>Nouveautés, rappels et souvenirs au même endroit.</div>
          </div>
        </div>
      </div>

      <div className="container" style={{ paddingBottom: 36 }}>
        {pinned && (
          <div className="card" style={{ marginTop: 24, position: 'relative' }}>
            <div style={{ position: 'absolute', top: -10, left: 18, background: 'var(--coral)', color: 'white', padding: '4px 10px', borderRadius: 4, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <Icon.Pin /> ÉPINGLÉ
            </div>
            <div style={{ position: 'absolute', top: 18, right: 18, color: 'var(--gold)' }}>
              <Icon.Star fill="currentColor" s={20} />
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <Avatar name={pinned.name} tone="warm" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 2 }}>Des organisateurs</div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{pinned.name} · <span style={{ fontWeight: 400, color: 'var(--ink-2)', fontSize: 13 }}>{pinned.date}</span></div>
                <p style={{ margin: '8px 0 0', fontSize: 14, lineHeight: 1.55 }}>{pinned.text}</p>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, fontSize: 13, color: 'var(--ink-2)' }}>
                  <div style={{ display: 'flex', gap: 16 }}>
                    <button onClick={() => toggleLike(pinned.id)} style={{ background: 'none', border: 0, color: likedIds.has(pinned.id) ? 'var(--coral)' : 'var(--ink-2)', display: 'inline-flex', gap: 6, alignItems: 'center', padding: 0 }}>
                      <Icon.Heart fill={likedIds.has(pinned.id) ? 'currentColor' : 'none'} s={16} /> {pinned.likes}
                    </button>
                    <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
                      <Icon.Bubble s={16} /> {pinned.replies}
                    </span>
                  </div>
                  <button style={{ background: 'none', border: 0, color: 'var(--green-700)', fontWeight: 600 }} onClick={() => showToast('Réponse notée localement')}>Répondre</button>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="card" style={{ marginTop: 18 }}>
          <div className="serif" style={{ fontSize: 20, color: 'var(--green-900)', marginBottom: 10 }}>Publier une annonce</div>
          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr auto', gap: 10, alignItems: 'center' }}>
            <input className="input" placeholder="Votre nom" value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
            <input className="input" placeholder="Annonce, souvenir ou rappel familial" value={draft.text} onChange={(e) => setDraft({ ...draft, text: e.target.value })} />
            <button className="btn btn-coral" onClick={submitAnnouncement}>Publier</button>
          </div>
        </div>

        {updates.length > 0 && (
          <>
            <h3 className="serif" style={{ fontSize: 22, color: 'var(--green-900)', margin: '28px 0 14px' }}>Dernières nouvelles</h3>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {updates.map((u, i) =>
              <div key={u.id} className="card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
                <Avatar name={u.name} small tone={i % 3 === 0 ? 'green' : i % 2 === 0 ? 'dusk' : 'warm'} />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{u.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>{u.date}</div>
                </div>
              </div>
              <div style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--ink)' }}>{u.text}</div>
              {u.cta && <button onClick={() => u.cta.includes('aider') ? setPage('volunteers') : showToast(`Ouverture : ${u.cta}`)} style={{ background: 'none', border: 0, padding: '8px 0 0', color: 'var(--green-700)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{u.cta} <span style={{ display: 'inline-block', verticalAlign: -1 }}><Icon.ArrowRight s={12} /></span></button>}
              {u.kind && <Photo src={REAL_EVENT_DETAIL_PHOTOS[i % REAL_EVENT_DETAIL_PHOTOS.length]} kind={u.kind} label={u.label} style={{ marginTop: 10, height: 100, borderRadius: 6 }} />}
              <div style={{ display: 'flex', gap: 14, marginTop: 10, fontSize: 12, color: 'var(--ink-2)' }}>
                <button onClick={() => toggleLike(u.id)} style={{ background: 'none', border: 0, color: likedIds.has(u.id) ? 'var(--coral)' : 'var(--ink-2)', display: 'inline-flex', gap: 5, alignItems: 'center', padding: 0 }}>
                  <Icon.Heart fill={likedIds.has(u.id) ? 'currentColor' : 'none'} s={14} /> {u.likes}
                </button>
                <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>
                  <Icon.Bubble s={14} /> {u.replies}
                </span>
              </div>
            </div>
              )}
            </div>
          </>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginTop: 18 }}>
          <div className="card">
            <div className="serif" style={{ fontSize: 18, color: 'var(--green-900)' }}>Partager un souvenir</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 12 }}>Photos, vidéos ou histoires des BBQ passés !</div>
            <UploadDrop
              onDrop={() => { actions.addMemory({ title: 'Souvenir partagé depuis les annonces', kind: 'lights', label: 'Souvenir famille' }, userName); showToast('Souvenir ajouté — merci !'); }}
              onFiles={(items) => { items.forEach((item) => actions.addMemory(item, userName)); showToast(`${items.length} fichier${items.length === 1 ? '' : 's'} ajouté${items.length === 1 ? '' : 's'}`); }}
            />
          </div>
          <div className="card">
            <div className="serif" style={{ fontSize: 18, color: 'var(--green-900)', marginBottom: 4 }}>Paramètres de rappel</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 14 }}>Recevez des rappels pour ne rien manquer.</div>
            <div style={{ display: 'grid', gap: 10 }}>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.deadline} onChange={(e) => updateReminder('deadline', e.target.checked)} /> Date limite d'inscription ({BBQ_EVENT.reminderDates.deadline})</label>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.event} onChange={(e) => updateReminder('event', e.target.checked)} /> Rappel de l'événement ({BBQ_EVENT.reminderDates.event})</label>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.dayBefore} onChange={(e) => updateReminder('dayBefore', e.target.checked)} /> La veille ({BBQ_EVENT.reminderDates.dayBefore})</label>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.dayOf} onChange={(e) => updateReminder('dayOf', e.target.checked)} /> Le jour J ({BBQ_EVENT.reminderDates.dayOf})</label>
            </div>
            <div className="h-divider" style={{ margin: '14px 0' }} />
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 8 }}>Envoyer les rappels par</div>
            <div style={{ display: 'flex', gap: 16 }}>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.email} onChange={(e) => updateReminder('email', e.target.checked)} /> E-mail</label>
              <label className="checkbox"><input type="checkbox" checked={!!reminderPrefs.whatsapp} onChange={(e) => updateReminder('whatsapp', e.target.checked)} /> WhatsApp</label>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 18, padding: 18,
          background: 'var(--coral)', color: 'white', borderRadius: 12,
          display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 24, alignItems: 'center'
        }}>
          <div className="serif" style={{ fontSize: 22 }}>Des questions ? Nous sommes là !</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, background: 'rgba(255,255,255,0.2)', borderRadius: '50%', display: 'grid', placeItems: 'center' }}><Icon.Phone /></div>
            <div>
              <div style={{ fontWeight: 600 }}>{BBQ_EVENT.organizer.name}</div>
              <div style={{ fontSize: 13, opacity: 0.9 }}>{BBQ_EVENT.organizer.phone}</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, background: 'rgba(255,255,255,0.2)', borderRadius: '50%', display: 'grid', placeItems: 'center' }}><Icon.Mail /></div>
            <div>
              <div style={{ fontWeight: 600 }}>{BBQ_EVENT.organizer.email}</div>
              <div style={{ fontSize: 13, opacity: 0.9 }}>{BBQ_EVENT.organizer.chatLabel}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="footer-strip"><span style={{ color: 'var(--gold)', marginRight: 6 }}>♥</span> Plus forts ensemble. À très vite au BBQ !</div>
      {Toast}
    </div>);

}

function Avatar({ name, tone = 'warm', small }) {
  const initials = name.split(' ').map((s) => s[0]).join('').slice(0, 2);
  const sz = small ? 36 : 44;
  const colors = {
    warm: ['#E0744F', '#fff'],
    green: ['#2A6B53', '#fff'],
    dusk: ['#9B7B5F', '#fff']
  };
  const [bg, fg] = colors[tone] || colors.warm;
  return (
    <div style={{ width: sz, height: sz, flex: 'none', borderRadius: '50%', background: bg, color: fg, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: small ? 12 : 14 }}>
      {initials}
    </div>);

}

const BBQ_UPLOAD_MAX_BYTES = 3 * 1024 * 1024;

function readUploadImage(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => {
      const originalDataUrl = reader.result;
      const base = {
        title: file.name,
        label: file.name,
        kind: 'warm',
      };

      if (file.size <= BBQ_UPLOAD_MAX_BYTES) {
        resolve({ ...base, dataUrl: originalDataUrl });
        return;
      }

      const image = new Image();
      image.onload = () => {
        const maxSide = 1800;
        const scale = Math.min(1, maxSide / Math.max(image.width, image.height));
        const canvas = document.createElement('canvas');
        canvas.width = Math.max(1, Math.round(image.width * scale));
        canvas.height = Math.max(1, Math.round(image.height * scale));
        const context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, canvas.width, canvas.height);

        let quality = 0.82;
        let dataUrl = canvas.toDataURL('image/jpeg', quality);
        while (dataUrl.length > 4 * 1024 * 1024 && quality > 0.56) {
          quality -= 0.08;
          dataUrl = canvas.toDataURL('image/jpeg', quality);
        }
        resolve({ ...base, dataUrl, label: `${file.name} · compressée` });
      };
      image.onerror = () => resolve({ ...base, dataUrl: originalDataUrl });
      image.src = originalDataUrl;
    };
    reader.onerror = () => resolve({ title: file.name, label: file.name, kind: 'warm' });
    reader.readAsDataURL(file);
  });
}

function UploadDrop({ onDrop, onFiles }) {
  const [drag, setDrag] = useState(false);
  const inputRef = useRef(null);
  const readFiles = (fileList) => {
    const files = Array.from(fileList || []).filter((file) => file.type.startsWith('image/'));
    if (!files.length) {
      onDrop && onDrop();
      return;
    }
    Promise.all(files.map(readUploadImage)).then((items) => onFiles ? onFiles(items) : onDrop && onDrop());
  };

  return (
    <div
      onDragOver={(e) => {e.preventDefault();setDrag(true);}}
      onDragLeave={() => setDrag(false)}
      onDrop={(e) => {e.preventDefault();setDrag(false);readFiles(e.dataTransfer.files);}}
      onClick={() => inputRef.current && inputRef.current.click()}
      style={{
        border: `2px dashed ${drag ? 'var(--coral)' : 'var(--line-2)'}`,
        background: drag ? 'rgba(224,116,79,0.06)' : 'var(--cream)',
        borderRadius: 10,
        padding: '30px 16px',
        textAlign: 'center',
        cursor: 'pointer',
        transition: 'all 0.15s'
      }}>
      
      <div style={{ width: 44, height: 44, margin: '0 auto 10px', borderRadius: '50%', background: 'white', color: 'var(--green-700)', display: 'grid', placeItems: 'center' }}>
        <Icon.Upload />
      </div>
      <div style={{ fontWeight: 600, color: 'var(--ink)' }}>Glissez-déposez vos photos ici</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>ou cliquez pour téléverser</div>
      <div className="mono" style={{ fontSize: 11, color: '#a99c80', marginTop: 6 }}>JPG, PNG, WebP · compression auto</div>
      <input
        ref={inputRef}
        type="file"
        accept="image/png,image/jpeg,image/webp"
        multiple
        style={{ display: 'none' }}
        onChange={(e) => { readFiles(e.target.files); e.target.value = ''; }}
      />
      <button
        className="btn btn-white"
        style={{ marginTop: 12 }}
        onClick={(e) => { e.stopPropagation(); onDrop && onDrop(); }}>
        Ajouter un exemple
      </button>
    </div>);

}

window.Announcements = Announcements;
window.UploadDrop = UploadDrop;
window.Avatar = Avatar;