/* =========================================================
   Calendar + memory history + detail sheet
   ========================================================= */
const { Icon: CI, CoupleMark, PhotoSlides } = window;
const DOW = ['일','월','화','수','목','금','토'];

function ymd(d){ return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }
function memDate(m){ return m.date || ymd(new Date(m.savedAt)); }
function fmtKDate(s){
  if (!s) return '';
  const dt = new Date(s + 'T00:00:00');
  return `${dt.getFullYear()}. ${dt.getMonth()+1}. ${dt.getDate()} (${DOW[dt.getDay()]})`;
}

/* ---------- DETAIL SHEET (날씨 + 추억) ---------- */
function MemoryDetail({ data, plannedDate, onClose, onDelete }){
  if (!data) return null;
  const mem = data.mem;
  const date = data.date || (mem && memDate(mem));
  const isPlanned = !!date && date === plannedDate;

  const [wx, setWx] = React.useState(null);
  React.useEffect(() => {
    let c = false; setWx(null);
    if (!date) return;
    const place = (mem && mem.destQuery) || '영통역';
    window.fetchWeather(place, date).then(w => { if (!c) setWx(w); });
    return () => { c = true; };
  }, [date, mem]);

  const pickNames = mem ? (mem.picks || []).map(id => {
    const r = window.RESTAURANTS.find(x => x.id === id);
    return r ? r.name : null;
  }).filter(Boolean) : [];

  const isPlan = mem ? (mem.kind === 'plan') : isPlanned;

  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()}>
        <div className="sheet-grip"></div>
        <div className="sheet-head">
          <h3>{mem ? (isPlan ? '다가올 데이트 💚' : '우리 추억 💕') : (isPlanned ? '다가올 약속 💚' : '이 날 어때?')}</h3>
          <button className="x" onClick={onClose}><CI name="x" /></button>
        </div>
        <div className="sheet-body">
          <span className="detail-when"><CI name="calendar" />{fmtKDate(date)}{mem && mem.time ? ' · ' + mem.time : ''}</span>
          {mem && <span className={'kind-tag ' + (isPlan ? 'plan' : 'mem')}>{isPlan ? '다가올 약속' : '지난 추억'}</span>}

          {wx && (
            <div className="day-wx">
              <span className="dw-emoji">{wx.emoji}</span>
              <div>
                <div className="dw-temp">{wx.tmax}° <small>/ {wx.tmin}°</small></div>
                <div className="dw-lbl">그날 날씨 · {wx.label}</div>
              </div>
            </div>
          )}

          {!mem && (
            <div className="empty" style={{ padding:'24px 10px 4px' }}>
              <div className="ic" style={{ background:'transparent' }}><CoupleMark size={48} /></div>
              <h4>{isPlanned ? '다가올 약속이에요 💚' : '이 날의 추억은 아직 없어'}</h4>
              <p>{isPlanned ? '플랜을 저장하면 추억으로 남길 수 있어' : '데이트하고 ‘추억으로 저장’ 해봐 💕'}</p>
            </div>
          )}

          {mem && (
          <React.Fragment>
          <div style={{ marginTop:16 }}>
            <div className="review-line">
              <span className="rk">함께</span>
              <span className="rv">{mem.people.j.name}이 · {mem.people.s.name}이</span>
            </div>
            <div className="review-line">
              <span className="rk">장소</span>
              <span className="rv">{mem.destQuery}</span>
            </div>
            {pickNames.length > 0 && (
              <div className="review-line">
                <span className="rk">정한 곳</span>
                <span className="rv">{pickNames.join(', ')}</span>
              </div>
            )}
            <div className="review-line">
              <span className="rk">{mem.tripMode === 'together' ? '한 차로' : '경로'}</span>
              <span className="rv" style={{ fontWeight:600 }}>
                {mem.tripMode === 'together'
                  ? <span>우리 둘이: {(mem.trip && mem.trip.start) || '–'} → {(mem.trip && mem.trip.dest) || mem.destQuery}</span>
                  : <span>{mem.people.j.name}: {mem.people.j.start || '–'} → {mem.people.j.dest || '–'}<br/>{mem.people.s.name}: {mem.people.s.start || '–'} → {mem.people.s.dest || '–'}</span>}
              </span>
            </div>
          </div>

          {mem.photos && mem.photos.length > 0 && (
            <PhotoSlides photos={mem.photos} />
          )}

          {mem.memo && <div className="detail-memo">{mem.memo}</div>}

          <button className="btn btn-ghost btn-full" style={{ marginTop:18, color:'var(--danger)', borderColor:'#e7c5bf' }}
            onClick={() => onDelete(mem.id)}>
            <CI name="trash" />{isPlan ? '이 플랜 삭제' : '이 추억 삭제'}
          </button>
          </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- CALENDAR SCREEN ---------- */
function CalendarScreen({ history, plannedDate, onOpen }){
  const today = new Date();
  const init = plannedDate ? new Date(plannedDate + 'T00:00:00') : today;
  const [cur, setCur] = React.useState({ y: init.getFullYear(), m: init.getMonth() });

  const byDate = {};
  history.forEach(m => { const d = memDate(m); (byDate[d] = byDate[d] || []).push(m); });

  const first = new Date(cur.y, cur.m, 1);
  const startPad = first.getDay();
  const days = new Date(cur.y, cur.m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startPad; i++) cells.push(null);
  for (let d = 1; d <= days; d++) cells.push(d);

  const move = (delta) => {
    let m = cur.m + delta, y = cur.y;
    if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }
    setCur({ y, m });
  };

  const sorted = [...history].sort((a, b) => (memDate(b)).localeCompare(memDate(a)) || b.savedAt - a.savedAt);
  const monthList = sorted.filter(m => {
    const d = new Date(memDate(m) + 'T00:00:00');
    return d.getFullYear() === cur.y && d.getMonth() === cur.m;
  });

  return (
    <div className="cal-wrap fadein">
      <div className="step-head">
        <div className="eyebrow">우리 추억</div>
        <h2>우리 데이트 달력 💚</h2>
        <p>함께 쌓은 추억과 다가올 약속을 한눈에.</p>
      </div>

      <div className="card">
        <div className="cal-head">
          <h3>{cur.y}년 {cur.m + 1}월</h3>
          <div className="nav">
            <button onClick={() => move(-1)}><CI name="chevL" /></button>
            <button onClick={() => move(1)}><CI name="chevR" /></button>
          </div>
        </div>
        <div className="cal-grid">
          {DOW.map(d => <div className="cal-dow" key={d}>{d}</div>)}
          {cells.map((d, i) => {
            if (d === null) return <div className="cal-cell pad" key={i}></div>;
            const ds = cur.y + '-' + String(cur.m+1).padStart(2,'0') + '-' + String(d).padStart(2,'0');
            const isToday = ds === ymd(today);
            const isPlanned = ds === plannedDate;
            const mems = byDate[ds];
            const hasPlan = mems && mems.some(m => m.kind === 'plan');
            const hasMem = mems && mems.some(m => m.kind !== 'plan');
            const cls = ['cal-cell'];
            if (isToday) cls.push('today');
            if (hasMem) cls.push('has');
            if (hasPlan || isPlanned) cls.push('planned');
            return (
              <button className={cls.join(' ')} key={i}
                onClick={() => onOpen({ date: ds, mem: mems ? mems[0] : null })}>
                {d}
                {mems && <span className="dots">{mems.slice(0,3).map((_, k) => <i key={k}></i>)}</span>}
              </button>
            );
          })}
        </div>
        <div className="cal-legend">
          <span><span className="sw" style={{ background:'var(--green-700)' }}></span>다가올 약속(플랜)</span>
          <span><span className="sw" style={{ background:'var(--green-50)', boxShadow:'inset 0 0 0 1px var(--green-100)' }}></span>지난 추억</span>
        </div>
      </div>

      {sorted.length === 0 ? (
        <div className="empty">
          <div className="ic" style={{ background:'transparent' }}><CoupleMark size={56} /></div>
          <h4>아직 저장한 게 없네 🥺</h4>
          <p>결과 화면에서 <b>플랜 저장</b>으로 다가올 약속을,<br/><b>추억 저장</b>으로 다녀온 날을 남겨봐 💕</p>
        </div>
      ) : (
        <React.Fragment>
          <div className="month-head">{cur.y}년 {cur.m + 1}월 · {monthList.length}개</div>
          {monthList.length === 0 ? (
            <div className="empty" style={{ padding:'30px 20px' }}>
              <div className="ic" style={{ background:'transparent' }}><CI name="calendar" /></div>
              <h4>이 달엔 기록이 없어</h4>
              <p>‹ › 로 다른 달을 보거나<br/>새 플랜을 지어봐 🌿</p>
            </div>
          ) : (
          <div className="mem-list">
          {monthList.map(m => {
            const cover = m.photos && m.photos[0];
            const pickNames = (m.picks || []).map(id => { const r = window.RESTAURANTS.find(x => x.id === id); return r ? r.name : null; }).filter(Boolean);
            return (
              <button className="mem-card" key={m.id} onClick={() => onOpen({ date: memDate(m), mem: m })}>
                <div className="thumb">{cover ? <img src={window.photoSrc(cover)} alt="" /> : <CI name={m.kind === 'plan' ? 'calendar' : 'image'} />}</div>
                <div className="mc-body">
                  <div className="mc-when">{fmtKDate(memDate(m))}{m.time ? ' · ' + m.time : ''}<span className={'kind-tag sm ' + (m.kind === 'plan' ? 'plan' : 'mem')}>{m.kind === 'plan' ? '플랜' : '추억'}</span></div>
                  <div className="mc-title">{m.destQuery} 만남</div>
                  <div className="mc-sub">{pickNames.length ? pickNames.join(', ') : (m.memo || `${m.people.j.name}이 · ${m.people.s.name}이`)}</div>
                </div>
                <span className="chev"><CI name="chevR" /></span>
              </button>
            );
          })}
          </div>
          )}
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { MemoryDetail, CalendarScreen });