// ============================================================
// SocialPulse — Calendar Page (API-connected)
// Click any day cell to see daily brand activity.
// Right-side panel surfaces upcoming marketing events.
// ============================================================

function CalendarPage({ onNavigate }) {
  const now = new Date();
  const [year, setYear] = useState(now.getFullYear());
  const [month, setMonth] = useState(now.getMonth()+1);
  const [openDay, setOpenDay] = useState(null); // { dateStr, summary, events }

  const data = useApi(() => spCalendar.get(year, month), [year, month]);

  const monthName = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][month-1];
  const daysInMonth = new Date(year, month, 0).getDate();
  const firstDow = (new Date(year, month-1, 1).getDay() + 6) % 7;

  const nav = (dir) => {
    let m = month+dir, y = year;
    if (m<1) { m=12; y--; } else if (m>12) { m=1; y++; }
    setMonth(m); setYear(y);
  };
  const goToday = () => { setYear(now.getFullYear()); setMonth(now.getMonth()+1); };

  const dailySummary = (data.data?.dailySummary) || {};
  const events = (data.data?.events) || [];
  const types = (data.data?.types) || {};
  const eventByDay = {};
  events.forEach(e => {
    const day = parseInt(e.fullDate.slice(8,10));
    if (!eventByDay[day]) eventByDay[day] = [];
    eventByDay[day].push(e);
  });

  const postCounts = Object.values(dailySummary).map(s => s.count || 0);
  const maxPosts = Math.max(1, ...postCounts);

  const cells = [];
  for (let i=0; i<firstDow; i++) cells.push(null);
  for (let d=1; d<=daysInMonth; d++) cells.push(d);

  const isToday = (d) => year===now.getFullYear() && month===now.getMonth()+1 && d===now.getDate();

  // Upcoming events: today onward, sorted by date.
  const upcoming = useMemo(() => {
    const todayStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;
    return [...events]
      .filter(e => e.fullDate >= todayStr)
      .sort((a,b) => a.fullDate.localeCompare(b.fullDate))
      .slice(0, 8);
  }, [events]);

  const openCell = (d) => {
    const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
    const summary = dailySummary[dateStr];
    const evts = eventByDay[d] || [];
    if (!summary && !evts.length) return; // nothing to show
    setOpenDay({ dateStr, summary: summary || { count:0, totalEngagement:0, brands:[] }, events: evts });
  };

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:20,flexWrap:'wrap'}}>
        <h2 style={{fontSize:22,fontWeight:800,letterSpacing:'-.02em'}}>Calendar</h2>
        <div style={{marginLeft:'auto',display:'flex',gap:6,alignItems:'center'}}>
          <button className="btn btn-ghost btn-sm" onClick={goToday}>今天</button>
          <button onClick={()=>nav(-1)} style={{padding:'5px 10px',borderRadius:'var(--r-xs)',border:'1px solid var(--line)',background:'transparent',color:'var(--text2)',cursor:'pointer',fontFamily:'var(--font-mono)'}}>‹</button>
          <span style={{fontFamily:'var(--font-mono)',fontSize:14,fontWeight:600,minWidth:140,textAlign:'center'}}>{year} · {monthName}</span>
          <button onClick={()=>nav(1)} style={{padding:'5px 10px',borderRadius:'var(--r-xs)',border:'1px solid var(--line)',background:'transparent',color:'var(--text2)',cursor:'pointer',fontFamily:'var(--font-mono)'}}>›</button>
        </div>
      </div>

      {data.loading ? <LoadingState/> :
       data.error ? <ErrorState error={data.error} onRetry={data.reload}/> :
      <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) 280px',gap:16,alignItems:'flex-start'}}>
        <div style={{background:'var(--panel)',border:'1px solid var(--line)',borderRadius:'var(--r-xl)',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',borderBottom:'1px solid var(--line)'}}>
            {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d => (
              <div key={d} style={{textAlign:'center',padding:'10px 0',fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.1em'}}>{d}</div>
            ))}
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:2,padding:8}}>
            {cells.map((day,i) => {
              if (day===null) return <div key={`e${i}`} style={{minHeight:78}}/>;
              const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
              const summary = dailySummary[dateStr];
              const evts = eventByDay[day] || [];
              const posts = summary?.count || 0;
              const heat = posts / maxPosts;
              const today = isToday(day);
              const clickable = posts > 0 || evts.length > 0;

              return (
                <div key={day}
                  onClick={() => clickable && openCell(day)}
                  style={{
                    minHeight:78,padding:6,borderRadius:'var(--r-md)',
                    border: today?'1.5px solid var(--indigo)':'1px solid var(--line)',
                    background: heat>.7?'rgba(198,255,61,.12)':heat>.4?'rgba(198,255,61,.06)':'transparent',
                    position:'relative',cursor:clickable?'pointer':'default',
                    transition:'transform .1s, background .15s',
                  }}
                  onMouseOver={e=>{ if(clickable) e.currentTarget.style.background = heat>.4?'rgba(198,255,61,.18)':'var(--panel2)'; }}
                  onMouseOut={e=>{ e.currentTarget.style.background = heat>.7?'rgba(198,255,61,.12)':heat>.4?'rgba(198,255,61,.06)':'transparent'; }}>
                  <div style={{fontSize:12,fontWeight:today?700:500,color:today?'var(--indigo2)':'var(--text)',marginBottom:4}}>{day}</div>
                  {evts.slice(0,2).map((ev,j) => (
                    <div key={j} title={ev.name} style={{fontSize:9,padding:'2px 5px',borderRadius:3,background:typeColor(types,ev.type),color:'#fff',fontWeight:600,marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
                      {ev.icon || ''} {ev.name}
                    </div>
                  ))}
                  {evts.length > 2 && <div style={{fontSize:9,color:'var(--text3)',marginTop:2}}>+{evts.length-2} 更多</div>}
                  {posts>0 && <div style={{position:'absolute',bottom:4,right:6,fontFamily:'var(--font-mono)',fontSize:9,fontWeight:700,color:'var(--lime)',opacity:.85}}>{posts}p</div>}
                </div>
              );
            })}
          </div>
        </div>

        {/* Right-side panel: upcoming marketing events */}
        <div style={{background:'var(--panel)',border:'1px solid var(--line)',borderRadius:'var(--r-xl)',padding:'16px 18px'}}>
          <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.12em',marginBottom:12}}>即將到來</div>
          {upcoming.length === 0 ? (
            <div style={{fontSize:13,color:'var(--text3)',padding:'20px 0',textAlign:'center'}}>本月後續無行銷節點</div>
          ) : (
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {upcoming.map((ev,i) => (
                <div key={i} style={{display:'flex',gap:10,alignItems:'flex-start',paddingBottom:10,borderBottom:i===upcoming.length-1?'none':'1px solid var(--line)'}}>
                  <div style={{
                    width:38,textAlign:'center',padding:'4px 0',borderRadius:'var(--r-sm)',
                    background:typeColor(types,ev.type),color:'#fff',flexShrink:0,
                  }}>
                    <div style={{fontFamily:'var(--font-mono)',fontSize:9,fontWeight:700,opacity:.85}}>{ev.fullDate.slice(5,7)}/</div>
                    <div style={{fontSize:14,fontWeight:800,lineHeight:1}}>{ev.fullDate.slice(8,10)}</div>
                  </div>
                  <div style={{minWidth:0,flex:1}}>
                    <div style={{fontSize:13,fontWeight:600,marginBottom:2}}>{ev.icon || ''} {ev.name}</div>
                    {ev.tags && ev.tags.length > 0 && (
                      <div style={{display:'flex',flexWrap:'wrap',gap:4,marginTop:4}}>
                        {ev.tags.slice(0,3).map((t,j) => (
                          <span key={j} style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--text3)',padding:'1px 5px',borderRadius:3,background:'var(--bg2)',border:'1px solid var(--line)'}}>#{t}</span>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>}

      {openDay && <DayDetailModal day={openDay} year={year} month={month} types={types} onClose={()=>setOpenDay(null)} onNavigate={onNavigate}/>}
    </div>
  );
}

function typeColor(types, t) {
  return types?.[t]?.color || 'var(--indigo)';
}

function DayDetailModal({ day, year, month, types, onClose, onNavigate }) {
  const { dateStr, summary, events } = day;
  const dt = new Date(dateStr + 'T00:00:00');
  const dayName = ['週日','週一','週二','週三','週四','週五','週六'][dt.getDay()];
  const total = summary.count || 0;
  const topBrands = (summary.brands || []).slice(0, 8);

  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.6)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center',padding:16}} onClick={onClose}>
      <div style={{background:'var(--panel)',border:'1px solid var(--line)',borderRadius:'var(--r-2xl)',padding:0,width:'100%',maxWidth:520,maxHeight:'85vh',overflowY:'auto'}} onClick={e=>e.stopPropagation()}>
        <div style={{padding:'20px 24px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:12}}>
          <div>
            <div style={{fontSize:22,fontWeight:800,letterSpacing:'-.02em'}}>{dateStr.slice(5).replace('-','/')} <span style={{fontSize:13,color:'var(--text3)',fontFamily:'var(--font-mono)',marginLeft:4}}>{dayName}</span></div>
            <div style={{fontSize:12,color:'var(--text3)',marginTop:4}}>
              {total > 0 ? `${total} 則貼文 · 互動 ${fmtK(summary.totalEngagement || 0)}` : '無貼文'}
            </div>
          </div>
          <button onClick={onClose} style={{marginLeft:'auto',background:'transparent',border:'none',color:'var(--text3)',fontSize:22,cursor:'pointer',padding:'0 6px'}}>×</button>
        </div>

        {events.length > 0 && (
          <div style={{padding:'16px 24px',borderBottom:'1px solid var(--line)'}}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.12em',marginBottom:10}}>行銷節點</div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {events.map((ev,i) => (
                <div key={i} style={{display:'flex',gap:10,alignItems:'center',padding:'8px 12px',borderRadius:'var(--r-md)',background:'var(--bg2)',border:'1px solid var(--line)'}}>
                  <div style={{width:8,height:32,borderRadius:2,background:typeColor(types,ev.type)}}/>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:600}}>{ev.icon || ''} {ev.name}</div>
                    {ev.tags && ev.tags.length > 0 && (
                      <div style={{display:'flex',flexWrap:'wrap',gap:4,marginTop:4}}>
                        {ev.tags.slice(0,4).map((t,j) => (
                          <span key={j} style={{fontFamily:'var(--font-mono)',fontSize:9,color:'var(--text3)'}}>#{t}</span>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {topBrands.length > 0 && (
          <div style={{padding:'16px 24px'}}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.12em',marginBottom:10}}>當日活躍品牌</div>
            <div style={{display:'flex',flexDirection:'column',gap:6}}>
              {topBrands.map((b,i) => (
                <div key={b.brand_id} style={{display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:'var(--r-md)',background:'var(--bg2)',border:'1px solid var(--line)'}}>
                  <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--text3)',width:20,textAlign:'center'}}>{i+1}</span>
                  {b.brand_logo
                    ? <img src={b.brand_logo} loading="lazy" style={{width:28,height:28,borderRadius:'var(--r-sm)',objectFit:'cover'}} onError={e=>{e.target.style.display='none'}}/>
                    : <BrandAvatar name={b.brand_name} color="var(--indigo)" size={28}/>}
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{b.brand_name}</div>
                    <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)'}}>{b.count} 則貼文</div>
                  </div>
                  <div style={{fontFamily:'var(--font-mono)',fontSize:13,fontWeight:700,color:'var(--orange)'}}>🔥 {fmtK(b.engagement)}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div style={{padding:'14px 24px',borderTop:'1px solid var(--line)',display:'flex',justifyContent:'flex-end',gap:8}}>
          {total > 0 && onNavigate && (
            <button className="btn btn-ghost btn-sm" onClick={() => { onNavigate('posts', { from: dateStr, to: dateStr }); onClose(); }}>查看貼文 →</button>
          )}
          <button className="btn btn-ghost btn-sm" onClick={onClose}>關閉</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalendarPage });