// Screen: Notizen — In-App-Änderungswünsche.
// Hier hält die kuratierende Person fest, was an der App geändert werden soll.
// Lokal gespeichert (übersteht Reload); sobald ein Server-Client geladen ist
// (Phase 4), geht jede Notiz zusätzlich an den Server zum Einsammeln.

const NLH_TONE_NOTIZEN = {
  warm: {
    titel: 'Notizen',
    sub: 'Was sollte ich besser machen? Schreib auf, was dir auffällt — es wird gesammelt und umgesetzt.',
    leer_h: 'Noch keine Notizen.',
    leer_s: 'Verbesserungsideen, Fehler, Wünsche — schreib einfach auf, was dir in den Sinn kommt.',
    eingabe_ph: 'Was fällt dir auf?',
    speichern: 'Notiz sichern',
  },
  knapp: {
    titel: 'Notizen',
    sub: 'Verbesserungen und Feedback. Wird gesammelt und umgesetzt.',
    leer_h: 'Keine Notizen.',
    leer_s: 'Schreib auf, was geändert werden soll.',
    eingabe_ph: 'Deine Idee …',
    speichern: 'Sichern',
  },
};

function useNotizenTone(tone) {
  return NLH_TONE_NOTIZEN[tone === 'knapp' ? 'knapp' : 'warm'];
}

function ScreenNotizen({ tone = 'warm' }) {
  const t = useNotizenTone(tone);
  const nav = useNav();
  if (typeof useStoreTick === 'function') useStoreTick();
  const store = window.NLH_Store;
  const notizen = store && store.getNotizen ? store.getNotizen() : [];
  const [text, setText] = React.useState('');

  function sichern() {
    const w = text.trim();
    if (!w || !store || !store.addNotiz) return;
    store.addNotiz(w);
    setText('');
  }

  return (
    <PhoneShell label="Notizen">
      <ZGlobalCSS />
      <div style={{ flex: 1, overflow: 'auto', padding: '8px 0 16px' }}>
        <NavBar />
        <div style={{ padding: '4px 20px 0' }}>
          <h1 style={{ fontSize: 28, lineHeight: 1.1 }}>{t.titel}</h1>
          <p style={{ color: 'var(--text-leise)', fontSize: 13, marginTop: 6,
                      lineHeight: 1.5, textWrap: 'pretty' }}>
            {t.sub}
          </p>

          {/* Eingabe */}
          <div className="card" style={{ marginTop: 20, padding: '4px 6px',
                                         border: '1px solid var(--salbei-blass)',
                                         background: 'var(--creme-card)' }}>
            <textarea value={text} onChange={e => setText(e.target.value)}
                      placeholder={t.eingabe_ph} rows={2}
                      style={{ width: '100%', boxSizing: 'border-box', resize: 'vertical',
                               background: 'transparent', border: 0, outline: 0,
                               padding: '10px', fontFamily: 'var(--font-haupt)',
                               fontSize: 15, color: 'var(--text-primaer)', lineHeight: 1.45 }} />
          </div>
          <button className="btn-primary" onClick={sichern} disabled={!text.trim()}
                  style={{ width: '100%', marginTop: 10, display: 'inline-flex',
                           alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <Icon name="plus" size={14} color="currentColor" /> {t.speichern}
          </button>

          {/* Liste oder Leerzustand */}
          {notizen.length === 0 ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
                          textAlign: 'center', gap: 14, padding: '36px 24px 8px' }}>
              <ZMedaillon icon="edit" />
              <h2 style={{ fontSize: 18 }}>{t.leer_h}</h2>
              <p style={{ fontSize: 13.5, color: 'var(--text-sekundaer)',
                          lineHeight: 1.55, textWrap: 'pretty' }}>{t.leer_s}</p>
            </div>
          ) : (
            <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {notizen.map(n => (
                <div key={n.id} className="card" style={{ display: 'flex', gap: 12,
                                                          alignItems: 'flex-start' }}>
                  <div style={{ width: 32, height: 32, borderRadius: 9, flex: 'none',
                                background: 'var(--creme-tief)', display: 'flex',
                                alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="edit" size={15} color="var(--text-sekundaer)" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <p style={{ fontSize: 14, color: 'var(--text-primaer)',
                                lineHeight: 1.5, textWrap: 'pretty' }}>{n.text}</p>
                    <p className="mono" style={{ fontSize: 11, color: 'var(--text-leise)',
                                                 marginTop: 4 }}>
                      {new Date(n.ts).toLocaleDateString('de-DE',
                        { day: '2-digit', month: '2-digit', year: '2-digit' })}
                    </p>
                  </div>
                  <button onClick={() => store.removeNotiz(n.id)} aria-label="Löschen"
                          style={{ all: 'unset', cursor: 'pointer', flex: 'none',
                                   width: 30, height: 30, borderRadius: 8, display: 'flex',
                                   alignItems: 'center', justifyContent: 'center',
                                   background: 'var(--creme-tief)' }}>
                    <Icon name="x" size={14} color="var(--text-leise)" />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      <BottomNav active="mehr" />
    </PhoneShell>
  );
}

Object.assign(window, { ScreenNotizen });