// 首页 Bento — 按 v 的草图：Chat 是 tall 左列，右边 2×2 四个小块

const ANNIVERSARY = '2025-11-17';

function daysTogether() {
  const start = new Date(ANNIVERSARY + 'T00:00:00');
  const now = new Date();
  return Math.floor((now - start) / (1000 * 60 * 60 * 24)) + 1;
}

function liveTime() {
  const d = new Date();
  return `${window.pad(d.getHours())}:${window.pad(d.getMinutes())}`;
}

const HomePage = ({ state, go }) => {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => force((n) => n + 1), 30 * 1000);
    return () => clearInterval(i);
  }, []);

  const today = window.todayISO();
  const fav = (state.favorites || []).length > 0
    ? state.favorites[Math.floor(Math.random() * state.favorites.length)]
    : null;
  const todayEntries = (state.calendar || []).filter((c) => c.date === today);
  const lastChat = (state.messages || []).filter((m) => m.role === 'assistant').slice(-1)[0];

  const days = daysTogether();
  const weatherCity = state.settings.weatherCity || '猫猫的城市';
  const weatherTemp = state.settings.weatherTemp || '23';
  const weatherCond = state.settings.weatherCond || '晴';

  const now = new Date();
  const dateStr = `${now.getFullYear()}.${window.pad(now.getMonth() + 1)}.${window.pad(now.getDate())}`;
  const weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][now.getDay()];

  const Block = ({ children, onClick, className = '', style = {} }) => (
    <button className={"bento-block " + className} onClick={onClick} style={style}>
      {children}
    </button>
  );

  return (
    <div className="home-page">
      <div className="home-grid">

        {/* —— Top row —— */}
        <div className="bento-block title-block" style={{gridArea: 'title'}}>
          <div className="title-mark">HOME</div>
          <div className="title-name">Goro <span className="cross">×</span> v</div>
          <div className="title-row">
            <div className="title-days-line">
              在一起的第 <span className="title-days-num">{days}</span> 天
            </div>
            <div className="title-since">自 {ANNIVERSARY.replace(/-/g, '.')}</div>
          </div>
        </div>

        <div className="bento-block time-block" style={{gridArea: 'time'}}>
          <div className="time-now">{liveTime()}</div>
          <div className="time-date">{dateStr}</div>
          <div className="time-weekday">{weekday}</div>
        </div>

        <div className="bento-block weather-block" style={{gridArea: 'weather'}}>
          <div className="weather-icon">
            <window.Icon name={weatherCond.includes('云') || weatherCond.includes('雨') || weatherCond.includes('阴') ? 'cloud' : 'sun'} size={28} />
          </div>
          <div className="weather-temp-big">{weatherTemp}°</div>
          <div className="weather-cond-small">{weatherCond}</div>
          <div className="weather-loc-small">
            <window.Icon name="pin" size={10} />
            <span>{weatherCity}</span>
          </div>
        </div>

        {/* —— Tall left: Chat —— */}
        <Block className="chat-block" onClick={() => go('chat')} style={{gridArea: 'chat'}}>
          <div className="block-head">
            <div className="block-icon"><window.Icon name="chat" size={18} /></div>
            <div className="block-label">和五郎说说话</div>
            <span className="block-count">{(state.messages || []).length} 句</span>
            <window.Icon name="chev-right" size={16} className="block-arrow" />
          </div>
          <div className="chat-preview">
            {lastChat ? (
              <div className="chat-preview-text">"{lastChat.content}"</div>
            ) : (
              <div className="chat-preview-text muted">还没有开始呢——<br />说一句话试试吧。</div>
            )}
          </div>
          <div className="chat-foot">
            <span>{lastChat ? '继续聊' : '开始聊聊'}</span>
            <window.Icon name="arrow-up" size={14} style={{transform: 'rotate(45deg)'}} />
          </div>
        </Block>

        {/* —— Right 2×2 grid —— */}
        <Block className="treasure-block" onClick={() => go('treasure')} style={{gridArea: 'treasure'}}>
          <div className="block-head">
            <div className="block-icon"><window.Icon name="star" size={16} /></div>
            <div className="block-label">珍藏时刻</div>
            <span className="block-count">{(state.favorites || []).length} 条</span>
          </div>
          <div className="treasure-preview">
            {fav ? (
              <div className="quote-text">"{fav.body}"</div>
            ) : (
              <div className="quote-text muted">还没有收藏过句子</div>
            )}
          </div>
        </Block>

        <Block className="calendar-block" onClick={() => go('calendar')} style={{gridArea: 'calendar'}}>
          <div className="block-head">
            <div className="block-icon"><window.Icon name="calendar" size={16} /></div>
            <div className="block-label">情话日历</div>
            <span className="block-count">{(state.calendar || []).length}</span>
          </div>
          <div className="cal-today-row">
            <div className="cal-today-stack">
              <div className="cal-today-num">{now.getDate()}</div>
              <div className="cal-today-mo">{now.getMonth() + 1} 月</div>
            </div>
            <div className="cal-today-body">
              {todayEntries.length > 0
                ? `"${todayEntries[0].body.slice(0, 28)}${todayEntries[0].body.length > 28 ? '…' : ''}"`
                : <span className="muted">今天还没写</span>}
              {todayEntries.length > 1 && <div className="cal-today-more">还有 {todayEntries.length - 1} 条</div>}
            </div>
          </div>
        </Block>

        <Block className="settings-block" onClick={() => go('settings')} style={{gridArea: 'settings'}}>
          <div className="block-head">
            <div className="block-icon"><window.Icon name="settings" size={16} /></div>
            <div className="block-label">设定中心</div>
            <window.Icon name="chev-right" size={14} className="block-arrow" />
          </div>
          <div className="block-sub">人格 · 模型 · 夜晚模式</div>
        </Block>

        <Block className="stats-block" onClick={() => go('stats')} style={{gridArea: 'stats'}}>
          <div className="block-head">
            <div className="block-icon"><window.Icon name="stats" size={16} /></div>
            <div className="block-label">使用统计</div>
            <span className="soon-tag">即将</span>
          </div>
          <div className="block-sub">{(state.messages || []).length} 条 · token 待统计</div>
        </Block>
      </div>

      <div className="home-foot">made with ♡ by v · for Goro</div>
    </div>
  );
};

window.HomePage = HomePage;
window.daysTogether = daysTogether;
window.ANNIVERSARY = ANNIVERSARY;