// Prayer log · main "기록" tab
// Lists past entries, FAB → compose, simple compose form.

const { useState: plState } = React;

const PRAYER_TYPES = [
  { v: 'prayer',  emoji: '🙏', label: '기도',  color: '#A6CDE9' },
  { v: 'verse',   emoji: '📖', label: '말씀',  color: '#C8E5A4' },
  { v: 'thanks',  emoji: '🌸', label: '감사',  color: '#F4B0A0' },
];

const SAMPLE_LOGS = [
  { id: 'l1', type: 'thanks', date: '오늘',  title: '아침에 깨워주신 은혜',  body: '오늘 새벽기도에 늦지 않게 깨워주셔서 감사합니다. 가족 모두 건강한 한 주를 보내고 있어요.' },
  { id: 'l2', type: 'prayer', date: '오늘',  title: '직장 동료를 위한 중보',  body: '같은 부서 김 과장님의 건강 회복을 위해 기도드립니다.' },
  { id: 'l3', type: 'verse',  date: '어제',  title: '시편 23편',  body: '"여호와는 나의 목자시니 내게 부족함이 없으리로다." — 마음의 부족함이 사라지는 평안.' },
  { id: 'l4', type: 'prayer', date: '어제',  title: '교회 청년부 모임',  body: '이번 주 청년부 새벽기도 모임이 은혜롭게 진행되도록.' },
  { id: 'l5', type: 'thanks', date: '3일 전', title: '딸 시험 끝',          body: '한 학기 마지막 시험이 잘 마무리되었습니다. 함께 견뎌낸 시간이 감사해요.' },
  { id: 'l6', type: 'verse',  date: '4일 전', title: '마태복음 11:28',       body: '"수고하고 무거운 짐 진 자들아 다 내게로 오라" — 오늘 가장 위로가 된 한 구절.' },
];

function getType(v) { return PRAYER_TYPES.find(t => t.v === v); }

// =================== Prayer log detail ===================
function PrayerLogDetailScreen({ log, onBack }) {
  const [menuOpen, setMenuOpen] = plState(false);
  const [toast, setToast] = plState('');
  function pldFlashToast(msg) {
    setMenuOpen(false);
    setToast(msg);
    setTimeout(() => setToast(''), 1800);
  }
  if (!log) return null;
  const t = getType(log.type);
  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
        <div className="appbar-title">{t.emoji} {t.label}</div>
        <button className="iconbtn" aria-label="More" onClick={() => setMenuOpen(true)}><Icon name="dots" /></button>
      </div>

      <div className="content cm-content" style={{ paddingBottom: 96 }}>
        <div className="pld-head">
          <span className="pld-type" style={{ '--c': t.color }}>{t.emoji} {t.label}</span>
          <span className="pld-date">{log.date}</span>
        </div>
        <div className="pld-title">{log.title}</div>
        <div className="pld-body">{log.body}</div>

        <div className="pld-divider" />

        <div className="pld-meta-row">
          <span className="pld-meta-label">기록 시각</span>
          <span className="pld-meta-value">{log.date} · 오전 6:24</span>
        </div>
        <div className="pld-meta-row">
          <span className="pld-meta-label">획득 경험치</span>
          <span className="pld-meta-value">+10 XP</span>
        </div>
      </div>

      <div className="pld-actions">
        <button className="pld-action edit"><Icon name="pencil" size={16} stroke={2.2} /> 수정</button>
        <button className="pld-action share">🤍 응원함에 담기</button>
      </div>

      {menuOpen && (
        <div className="action-scrim" onClick={() => setMenuOpen(false)}>
          <div className="action-sheet" onClick={e => e.stopPropagation()}>
            <div className="as-grabber" />
            <button className="as-item" onClick={() => pldFlashToast('내용을 복사했어요')}>
              <Icon name="copy" size={19} stroke={2} /><span>내용 복사</span>
            </button>
            <button className="as-item" onClick={() => pldFlashToast('기록을 고정했어요')}>
              <Icon name="pin" size={19} stroke={2} /><span>상단에 고정</span>
            </button>
            <button className="as-item danger" onClick={() => pldFlashToast('기록을 삭제했어요')}>
              <Icon name="trash" size={19} stroke={2} /><span>기록 삭제</span>
            </button>
            <button className="as-cancel" onClick={() => setMenuOpen(false)}>취소</button>
          </div>
        </div>
      )}
      {toast && <div className="cm-toast">{toast}</div>}
    </>
  );
}

// =================== Prayer log list ===================
function PrayerLogListScreen({ onCompose, onTab, onOpenLog, empty = false }) {
  const [filter, setFilter] = plState('all');
  const [searching, setSearching] = plState(false);
  const [query, setQuery] = plState('');
  const [menuOpen, setMenuOpen] = plState(false);
  const [toast, setToast] = plState('');
  const [sortDesc, setSortDesc] = plState(true);
  const q = query.trim();

  function plFlashToast(msg) {
    setMenuOpen(false);
    setToast(msg);
    setTimeout(() => setToast(''), 1800);
  }

  const logMenu = menuOpen ? (
    <div className="action-scrim" onClick={() => setMenuOpen(false)}>
      <div className="action-sheet" onClick={e => e.stopPropagation()}>
        <div className="as-grabber" />
        <button className="as-item" onClick={() => { setSortDesc(v => !v); plFlashToast(sortDesc ? '오래된 순으로 정렬했어요' : '최신순으로 정렬했어요'); }}>
          <Icon name="sort" size={19} stroke={2} /><span>{sortDesc ? '오래된 순으로 보기' : '최신순으로 보기'}</span>
        </button>
        <button className="as-item" onClick={() => plFlashToast('기록을 내보냈어요')}>
          <Icon name="download" size={19} stroke={2} /><span>기록 내보내기</span>
        </button>
        <button className="as-item" onClick={() => plFlashToast('기록을 백업했어요')}>
          <Icon name="cloud" size={19} stroke={2} /><span>지금 백업하기</span>
        </button>
        <button className="as-cancel" onClick={() => setMenuOpen(false)}>취소</button>
      </div>
    </div>
  ) : null;
  const logToast = toast ? <div className="cm-toast">{toast}</div> : null;
  const byType = filter === 'all' ? SAMPLE_LOGS : SAMPLE_LOGS.filter(l => l.type === filter);
  const searched = q ? byType.filter(l => (l.title + ' ' + l.body).includes(q)) : byType;
  const filtered = sortDesc ? searched : [...searched].reverse();

  // Group by date
  const grouped = filtered.reduce((acc, l) => {
    (acc[l.date] = acc[l.date] || []).push(l);
    return acc;
  }, {});

  if (empty) {
    return (
      <>
        <div className="appbar">
          <div style={{ width: 36 }} />
          <div className="appbar-title">기도 기록</div>
          <button className="iconbtn" aria-label="More" onClick={() => setMenuOpen(true)}><Icon name="dots" /></button>
        </div>
        <div className="content cm-content">
          <div className="pl-stats">
            <div className="pl-stat"><div className="pls-num">🔥 0</div><div className="pls-label">연속 기록</div></div>
            <div className="pl-stat"><div className="pls-num">0</div><div className="pls-label">전체 기록</div></div>
            <div className="pl-stat"><div className="pls-num">0</div><div className="pls-label">오늘 XP</div></div>
          </div>
          <div className="empty-state">
            <div className="es-art" aria-hidden="true">🌱</div>
            <div className="es-title">아직 기록이 없어요</div>
            <div className="es-desc">오늘의 첫 기도·감사·말씀을 남겨보세요.<br/>기록할 때마다 캐릭터가 함께 자라요.</div>
            <div className="es-quick">
              {PRAYER_TYPES.map(t => (
                <button key={t.v} className="es-quick-chip" style={{ '--c': t.color }} onClick={onCompose}>
                  <span>{t.emoji}</span><span>{t.label}</span>
                </button>
              ))}
            </div>
            <button className="es-cta" onClick={onCompose}>
              <Icon name="pencil" size={18} stroke={2.2} /> 첫 기록 남기기
              <span className="es-cta-xp">+10 XP</span>
            </button>
          </div>
        </div>
        <BottomTabs active="log" themeKey="sky" onTab={onTab} />
        {logMenu}
        {logToast}
      </>
    );
  }

  return (
    <>
      {searching ? (
        <div className="appbar search-appbar">
          <div className="search-field">
            <Icon name="search" size={17} />
            <input
              className="search-input"
              autoFocus
              placeholder="기록 검색… (제목·내용)"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
            {query && (
              <button className="search-clear" aria-label="Clear" onClick={() => setQuery('')}><Icon name="x" size={15} /></button>
            )}
          </div>
          <button className="search-cancel" onClick={() => { setSearching(false); setQuery(''); }}>취소</button>
        </div>
      ) : (
        <div className="appbar">
          <button className="iconbtn" aria-label="Search" onClick={() => setSearching(true)}><Icon name="search" /></button>
          <div className="appbar-title">기도 기록</div>
          <button className="iconbtn" aria-label="More" onClick={() => setMenuOpen(true)}><Icon name="dots" /></button>
        </div>
      )}

      <div className="content cm-content">
        {!searching && (
          <div className="pl-stats">
            <div className="pl-stat">
              <div className="pls-num">🔥 7</div>
              <div className="pls-label">연속 기록</div>
            </div>
            <div className="pl-stat">
              <div className="pls-num">{SAMPLE_LOGS.length}</div>
              <div className="pls-label">전체 기록</div>
            </div>
            <div className="pl-stat">
              <div className="pls-num">+25</div>
              <div className="pls-label">오늘 XP</div>
            </div>
          </div>
        )}

        {/* Filter chips */}
        <div className="filter-row">
          <button className={`filter-chip ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>전체</button>
          {PRAYER_TYPES.map(t => (
            <button
              key={t.v}
              className={`filter-chip ${filter === t.v ? 'active' : ''}`}
              onClick={() => setFilter(t.v)}
            >
              {t.emoji} {t.label}
            </button>
          ))}
        </div>

        {searching && q && (
          <div className="search-meta">“{q}” 검색 결과 {filtered.length}건</div>
        )}

        {/* Grouped log list */}
        {filtered.length > 0 ? (
          <div className="pl-groups">
            {Object.entries(grouped).map(([date, logs]) => (
              <div key={date} className="pl-group">
                <div className="pl-date">{date}</div>
                <div className="pl-list">
                  {logs.map(l => {
                    const t = getType(l.type);
                    return (
                      <button key={l.id} className="pl-card" style={{ '--c': t.color }} onClick={() => onOpenLog && onOpenLog(l)}>
                        <div className="plc-side" />
                        <div className="plc-body">
                          <div className="plc-head">
                            <span className="plc-type">{t.emoji} {t.label}</span>
                            <span className="plc-title">{l.title}</span>
                          </div>
                          <div className="plc-text">{l.body}</div>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="search-noresult">
            <div className="snr-art">🔍</div>
            <div className="snr-title">“{q}”에 대한 결과가 없어요</div>
            <div className="snr-desc">다른 단어로 다시 찾아보세요.</div>
          </div>
        )}
      </div>

      <button className="fab" onClick={onCompose} aria-label="기록하기">
        <Icon name="pencil" size={22} stroke={2.2} />
        <span>기록하기</span>
      </button>

      <BottomTabs active="log" themeKey="sky" onTab={onTab} />
      {logMenu}
      {logToast}
    </>
  );
}

// =================== Prayer log compose ===================
function PrayerLogComposeScreen({ onBack, onSubmit }) {
  const [type, setType] = plState('prayer');
  const [title, setTitle] = plState('');
  const [body, setBody] = plState('');
  const [confirmExit, setConfirmExit] = plState(false);

  const canSubmit = body.trim().length >= 3;
  const dirty = title.trim().length > 0 || body.trim().length > 0;

  function tryBack() {
    if (dirty) setConfirmExit(true);
    else onBack && onBack();
  }

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Close" onClick={tryBack}><Icon name="x" /></button>
        <div className="appbar-title">새 기록</div>
        <div style={{ width: 36 }} />
      </div>

      <div className="content cm-content" style={{ paddingBottom: 24 }}>
        <div className="compose-section-label">기록 종류</div>
        <div className="pl-type-picker">
          {PRAYER_TYPES.map(t => (
            <button
              key={t.v}
              className={`plt-card ${type === t.v ? 'active' : ''}`}
              onClick={() => setType(t.v)}
            >
              <div className="plt-emoji">{t.emoji}</div>
              <div className="plt-label">{t.label}</div>
            </button>
          ))}
        </div>

        <div className="compose-section-label">
          <span>제목 <span className="csl-opt">(선택)</span></span>
          <span className={`csl-count ${title.length >= 40 ? 'max' : ''}`}>{title.length}/40자</span>
        </div>
        <input
          type="text"
          className="pl-title-input"
          placeholder="짧은 제목을 적어보세요 (40자 이하)"
          value={title}
          onChange={e => setTitle(e.target.value)}
          maxLength={40}
        />

        <div className="compose-section-label">
          <span>내용</span>
          <span className={`csl-count ${body.length >= 500 ? 'max' : ''}`}>{body.length}/500자</span>
        </div>
        <textarea
          className="compose-body"
          placeholder={
            type === 'prayer' ? '오늘 어떤 기도를 드리고 싶으신가요? (500자 이하)'
              : type === 'verse' ? '오늘 받은 말씀이나 묵상한 구절을 적어보세요. (500자 이하)'
              : '어떤 감사를 나누고 싶으신가요? (500자 이하)'
          }
          value={body}
          onChange={e => setBody(e.target.value)}
          rows={10}
          maxLength={500}
        />

        <button
          className={`pl-save-btn ${canSubmit ? '' : 'disabled'}`}
          onClick={() => canSubmit && onSubmit({ type, title, body })}
        >
          저장
        </button>

        <div className="pl-xp-hint">
          <span>📈</span>
          <span>저장하면 <strong>+10 XP</strong> 획득</span>
        </div>
      </div>

      {confirmExit && (
        <div className="confirm-scrim" onClick={() => setConfirmExit(false)}>
          <div className="confirm-sheet" onClick={e => e.stopPropagation()}>
            <div className="cs-title">작성 중인 기록이 있어요</div>
            <div className="cs-desc">지금 나가면 작성한 내용이 저장되지 않아요. 그래도 나가시겠어요?</div>
            <div className="cs-actions">
              <button className="cs-btn ghost" onClick={() => setConfirmExit(false)}>계속 작성</button>
              <button className="cs-btn danger" onClick={() => { setConfirmExit(false); onBack && onBack(); }}>나가기</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

window.PrayerLogListScreen = PrayerLogListScreen;
window.PrayerLogComposeScreen = PrayerLogComposeScreen;
window.PrayerLogDetailScreen = PrayerLogDetailScreen;
window.SAMPLE_LOGS = SAMPLE_LOGS;