// Today screen — current question + real answer composer
// Now fully functional:
//  - Textarea + submit that POSTs to /api/couple/answer
//  - Edit-before-reveal (resubmitting overwrites your previous answer)
//  - Skip button (both-must-agree logic; backend tracks skip_requested_by)
//  - Partner-answered hint when backend reports partner_answered=true

window.TodayScreen = function TodayScreen({ state, setScreen, data, reload }) {
  const { useState } = React;
  const D = data;
  const t = D.today;

  const WD = ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'];
  const M = ['января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'];
  const now = new Date();
  const todayLabel = `${WD[now.getDay()]}, ${now.getDate()} ${M[now.getMonth()]} · ${D.pair.question_time}`;

  const cat = t ? t.cat_meta : null;
  const isAnswered = state === 'answered' || state === 'reveal-ready';
  const isRevealReady = state === 'reveal-ready';
  const hasQuestion = !!t;

  const [answerText, setAnswerText] = useState(t && t.you_answer ? t.you_answer : '');
  const [editing, setEditing] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [skipMsg, setSkipMsg] = useState(null);

  const showComposer = hasQuestion && (!isAnswered || editing);
  const canSubmit = answerText.trim().length >= 3 && answerText.trim().length <= 2000 && !submitting;

  async function handleSubmit() {
    if (!canSubmit || !t) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await window.API.submitAnswer(t.question_id, answerText.trim());
      setEditing(false);
      if (res.revealed) {
        // Jump straight to reveal
        await reload();
        setScreen('reveal');
      } else {
        await reload();
      }
    } catch (e) {
      setError(e.message || 'Не удалось отправить ответ');
    } finally {
      setSubmitting(false);
    }
  }

  async function handleSkip() {
    if (!t) return;
    if (!confirm('Пропустить этот вопрос? Если партнёр согласится — вопрос исчезнет, серия сбросится.')) return;
    setSubmitting(true);
    setError(null);
    setSkipMsg(null);
    try {
      const res = await window.API.skipQuestion(t.question_id);
      if (res.skipped) {
        setSkipMsg('Вопрос пропущен обоими.');
      } else if (res.waiting_partner) {
        setSkipMsg('Запрос на пропуск отправлен. Ждём партнёра.');
      }
      await reload();
    } catch (e) {
      setError(e.message || 'Не удалось запросить пропуск');
    } finally {
      setSubmitting(false);
    }
  }

  const botUrl = 'https://t.me/' + D.botUsername;

  // Humanize "waiting" state when there's no current question
  let waitingNote = null;
  if (!hasQuestion && D.waiting_meta) {
    const wm = D.waiting_meta;
    if (wm.reason === 'before_question_time') {
      waitingNote = `Следующий вопрос придёт сегодня в ${wm.next_question_time}`;
    } else if (wm.reason === 'already_sent_today') {
      waitingNote = `Сегодняшний вопрос уже был — ждите завтра в ${wm.next_question_time}`;
    } else if (wm.reason === 'paused') {
      waitingNote = 'Пара на паузе. Включить можно в настройках.';
    } else if (wm.reason === 'pair_not_active') {
      waitingNote = 'Пара ещё не активирована.';
    } else {
      waitingNote = `Следующий вопрос в ${wm.next_question_time}`;
    }
  }

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Сегодня</h1>
          <div className="page-head__sub">{todayLabel}</div>
        </div>
        <div className="page-head__actions">
          <button className="btn-ghost" onClick={() => setScreen('archive')}>
            <window.Icon name="archive" size={16}/> Все вопросы
          </button>
        </div>
      </div>

      <div className="today-grid">
        <div>
          {hasQuestion ? (
            <article className="qcard">
              <div className="qcard__inner">
                <div className="qcard__head">
                  <div className="qcard__num">Вопрос #<b>{t.number}</b></div>
                  <span className="qcard__cat" style={{background: `oklch(0.55 0.18 ${cat.hue} / 0.16)`, borderColor: `oklch(0.55 0.18 ${cat.hue} / 0.3)`, color: cat.color}}>
                    <span>{cat.emoji}</span> {cat.ru}
                  </span>
                </div>
                <h2 className="qcard__text">«{t.text}»</h2>
                {t.follow_up && <div className="qcard__followup">💡 {t.follow_up}</div>}

                {t.partner_answered && !isAnswered && (
                  <div style={{marginTop: 14, padding: '10px 14px', borderRadius: 12, background: 'oklch(0.55 0.2 var(--hue-primary) / 0.1)', fontSize: 13, color: 'var(--text-2)'}}>
                    💌 <b>{D.partner.name}</b> уже ответил(а). Ваш ответ откроет оба.
                  </div>
                )}
              </div>
            </article>
          ) : (
            <article className="qcard">
              <div className="qcard__inner" style={{textAlign: 'center', padding: '48px 28px'}}>
                <div style={{fontSize: 48, marginBottom: 14}}>🌙</div>
                <h2 className="qcard__text" style={{fontSize: 'clamp(20px, 2.6vw, 28px)'}}>
                  {waitingNote || `Следующий вопрос придёт в\u00a0${D.pair.question_time}`}
                </h2>
                <div style={{color: 'var(--text-3)', marginTop: 12, fontSize: 14}}>
                  А пока можно пересмотреть архив или почитать статистику.
                </div>
              </div>
            </article>
          )}

          {/* ── Composer: real textarea ── */}
          {showComposer && (
            <div className="surface" style={{marginTop: 16, padding: 20}}>
              <div style={{fontSize: 13, color: 'var(--text-3)', marginBottom: 10, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8}}>
                <span>Ваш ответ — видит только {D.partner.name} после того, как ответит тоже</span>
                <span style={{fontFamily: 'var(--font-mono)', color: answerText.length > 2000 ? 'var(--warm)' : 'var(--text-4)'}}>
                  {answerText.length} / 2000
                </span>
              </div>
              <textarea
                value={answerText}
                onChange={e => setAnswerText(e.target.value)}
                placeholder="Напишите что-нибудь настоящее…"
                rows={5}
                disabled={submitting}
                style={{
                  width: '100%', padding: '14px 16px', borderRadius: 14,
                  border: '1px solid var(--ink-3)', background: 'var(--ink-1)',
                  color: 'var(--text-1)', fontFamily: 'inherit', fontSize: 15,
                  lineHeight: 1.5, resize: 'vertical', minHeight: 110, outline: 'none'
                }}
              />
              {error && (
                <div style={{marginTop: 10, padding: '8px 12px', borderRadius: 10, background: 'oklch(0.6 0.2 25 / 0.12)', color: 'oklch(0.75 0.2 25)', fontSize: 13}}>
                  {error}
                </div>
              )}
              {skipMsg && (
                <div style={{marginTop: 10, padding: '8px 12px', borderRadius: 10, background: 'var(--ink-2)', fontSize: 13, color: 'var(--text-2)'}}>
                  {skipMsg}
                </div>
              )}
              <div style={{display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap'}}>
                <button className="btn-primary" onClick={handleSubmit} disabled={!canSubmit}>
                  <window.Icon name="check" size={14}/>
                  {submitting ? 'Отправляется…' : (editing ? 'Сохранить' : 'Ответить')}
                </button>
                {editing && (
                  <button className="btn-ghost" onClick={() => { setEditing(false); setAnswerText(t.you_answer || ''); }} disabled={submitting}>
                    Отмена
                  </button>
                )}
                {!isAnswered && !t.user1_answer && !t.user2_answer && (
                  <button className="btn-ghost" onClick={handleSkip} disabled={submitting}
                    title={t.skip_requested_by_me ? 'Вы уже запросили пропуск' : 'Предложить пропустить'}>
                    <window.Icon name="close" size={13}/>
                    {t.skip_requested_by_me ? 'Ждём партнёра…' : (t.skip_requested ? 'Подтвердить пропуск' : 'Пропустить')}
                  </button>
                )}
              </div>
              {answerText.trim().length > 0 && answerText.trim().length < 3 && (
                <div style={{fontSize: 12, color: 'var(--text-4)', marginTop: 8}}>Минимум 3 символа</div>
              )}
            </div>
          )}

          {hasQuestion && isAnswered && t.you_answer && !editing && (
            <div className="answer-saved" style={{marginTop: 16}}>
              <div className="answer-saved__icon"><window.Icon name="check" size={18}/></div>
              <div className="answer-saved__body">
                <div className="answer-saved__title">Ответ сохранён 💕</div>
                <div style={{fontSize: 13, color: 'var(--text-3)'}}>
                  {isRevealReady ? 'Оба ответили — можно открыть.' : 'Изменить можно до раскрытия ответов.'}
                </div>
                <div className="answer-saved__text">{t.you_answer}</div>
                {!isRevealReady && (
                  <>
                    <div className="answer-saved__waiting">
                      <span className="dot"></span>
                      Ждём ответ от <b style={{color: 'var(--text-2)'}}>&nbsp;{D.partner.name}</b>…
                    </div>
                    <div style={{marginTop: 10}}>
                      <button className="btn-ghost" onClick={() => setEditing(true)} style={{padding: '6px 12px', minHeight: 32, fontSize: 12}}>
                        <window.Icon name="edit" size={12}/> Изменить ответ
                      </button>
                    </div>
                  </>
                )}
                {isRevealReady && (
                  <div style={{marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap'}}>
                    <button className="btn-primary" onClick={() => setScreen('reveal')}>
                      <window.Icon name="reveal" size={15}/> Открыть ответы
                    </button>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        <aside className="side-stack">
          <div className="streak-card">
            <div className="streak-ring" style={{'--p': D.pair.best_streak > 0 ? Math.min(100, D.pair.current_streak * 100 / D.pair.best_streak) : 0}}>
              <div className="streak-ring__inner">
                {D.pair.current_streak}
                <small>дней</small>
              </div>
            </div>
            <div className="streak-card__body">
              <div className="streak-card__title">Текущая серия</div>
              <div className="streak-card__big">
                <span className="em">🔥</span>{' '}
                {D.pair.current_streak === 0
                  ? <>Давайте начнём</>
                  : D.pair.best_streak > D.pair.current_streak
                    ? <>До рекорда: <b>{D.pair.best_streak - D.pair.current_streak}</b></>
                    : <>Это ваш новый рекорд!</>}
              </div>
              <div style={{fontSize: 12, color: 'var(--text-3)', marginTop: 6}}>Серия сгорает, если пропустить день</div>
            </div>
          </div>

          <div className="stat-card">
            <div className="stat-card__head"><div className="stat-card__title">Ваша пара</div><span className="chip chip--brand">{D.pair.state === 'paused' ? 'пауза' : 'активна'}</span></div>
            <div className="stat-row"><span className="stat-row__label">💑 Партнёр</span><span className="stat-row__value">{D.partner.name}</span></div>
            <div className="stat-row"><span className="stat-row__label">📅 Дней вместе</span><span className="stat-row__value">{D.pair.days_together}</span></div>
            <div className="stat-row"><span className="stat-row__label">❓ Вопросов</span><span className="stat-row__value">{D.pair.total_questions}</span></div>
            <div className="stat-row"><span className="stat-row__label">✅ Оба ответили</span><span className="stat-row__value">{D.pair.both_answered}</span></div>
            <div className="stat-row"><span className="stat-row__label">📈 Процент</span><span className="stat-row__value stat-row__value--brand">{D.pair.answer_rate}%</span></div>
            <div className="stat-row"><span className="stat-row__label">🏆 Лучшая серия</span><span className="stat-row__value stat-row__value--warm">{D.pair.best_streak} дней</span></div>
          </div>

          <button className="btn-ghost" style={{justifyContent: 'flex-start', padding: '14px 16px', borderRadius: 14}} onClick={() => setScreen('archive')}>
            <window.Icon name="archive" size={16}/>
            <div style={{textAlign: 'left'}}>
              <div style={{fontSize: 13, fontWeight: 600}}>Архив вопросов</div>
              <div style={{fontSize: 11, color: 'var(--text-3)'}}>{D.history.length} записей</div>
            </div>
            <window.Icon name="arrow" size={14}/>
          </button>
        </aside>
      </div>
    </div>
  );
};