/* global React, Icon, TRIP_DATA */

function DayRail({ dayIdx, setDayIdx }) {
  return (
    <div className="day-rail">
      {TRIP_DATA.days.map((d, i) => (
        <div key={i}
          className={`day-chip ${i === dayIdx ? 'active' : ''}`}
          onClick={() => setDayIdx(i)}>
          <div className="dc-num">DAY 0{d.day}</div>
          <div className="dc-theme">{d.theme}</div>
          <div className="dc-date">{d.date}</div>
        </div>
      ))}
    </div>
  );
}

function DayBanner({ day }) {
  const totalStops = day.items.length;
  return (
    <div className="day-banner fade-in">
      <div className="db-small">DAY {String(day.day).padStart(2,'0')} · {day.date}</div>
      <div className="db-big">{day.theme}</div>
      <div className="db-sub">{day.subtheme}</div>
      <div className="db-foot">
        <span className="pill">📍 {totalStops} 個行程</span>
        <span className="pill">{day.weather.cond} {day.weather.t}°</span>
      </div>
    </div>
  );
}

function TLItem({ item, open, onToggle }) {
  const mapUrl = item.mapQ && item.mapQ !== '-'
    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(item.mapQ)}`
    : null;
  return (
    <div className="tl-item">
      <div className="tl-left">
        <div className="tl-time">{item.time.split('–').map((t, i) => (
          <React.Fragment key={i}>{t}{i === 0 && item.time.includes('–') && <br/>}</React.Fragment>
        ))}</div>
        <div className="tl-dot" style={{ borderColor: item.mood }}/>
        <div className="tl-line"/>
      </div>
      <div className={`tl-card ${open ? 'expanded' : ''}`} onClick={onToggle}>
        <div className="tl-head">
          <span className="tl-tag">{item.tag}</span>
          <span className="tl-mood" style={{ background: item.mood }}/>
        </div>
        <div className="tl-title">{item.title}</div>
        {item.desc && <div className="tl-desc">{item.desc}</div>}
        <div className="tl-meta">
          <span>{Icon.clock('#8C8276')} {item.stay}</span>
          <span>{Icon.car('#8C8276')} {item.move}</span>
        </div>
        {open && (
          <>
            {item.info && (
              <div className="tl-info fade-in">
                <div className="tl-info-head">
                  <div>
                    <div className="tl-info-ko">{item.info.ko}</div>
                    <div className="tl-info-addr">📍 {item.info.addrZh}</div>
                    <div className="tl-info-addr-ko">　 {item.info.addr}</div>
                  </div>
                  {item.info.rating && (
                    <div className="tl-info-rating">
                      <span className="star">★</span>
                      <span className="num">{item.info.rating}</span>
                    </div>
                  )}
                </div>
                <div className="tl-info-grid">
                  <div className="tl-info-cell">
                    <div className="tl-info-label">營業時間</div>
                    <div className="tl-info-val">{item.info.hours}</div>
                  </div>
                  <div className="tl-info-cell">
                    <div className="tl-info-label">電話</div>
                    <div className="tl-info-val">{item.info.phone}</div>
                  </div>
                </div>
                {item.info.mustEat && (
                  <div className="tl-info-sect">
                    <div className="tl-info-sect-title">🍜 必點</div>
                    <ul>{item.info.mustEat.map((m,i)=><li key={i}>{m}</li>)}</ul>
                  </div>
                )}
                {item.info.tips && (
                  <div className="tl-info-sect">
                    <div className="tl-info-sect-title">💡 小提醒</div>
                    <ul>{item.info.tips.map((t,i)=><li key={i}>{t}</li>)}</ul>
                  </div>
                )}
              </div>
            )}
            <div className="tl-expand fade-in">
              {mapUrl ? (
                <a className="tl-exp-btn primary" href={mapUrl} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}>
                  {Icon.pin('#fff')} 地圖開啟
                </a>
              ) : (
                <div className="tl-exp-btn" style={{ opacity: 0.5 }}>— 無地點 —</div>
              )}
              <div className="tl-exp-btn" onClick={e => e.stopPropagation()}>
                {Icon.compass('#3A5A8A')} 收藏標記
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function DaySummary({ day }) {
  const meals = day.items.filter(i => ['早餐','午餐','晚餐'].includes(i.tag)).length;
  const spots = day.items.filter(i => ['景點','樂園','離島','市場'].includes(i.tag)).length;
  return (
    <div className="day-summary">
      <span>🍚 餐食 <b>{meals}</b></span>
      <span>📍 景點 <b>{spots}</b></span>
      <span>🌡 {day.weather.t}° {day.weather.cond}</span>
    </div>
  );
}

function TripTab({ dayIdx, setDayIdx }) {
  const [openIdx, setOpenIdx] = React.useState(0);
  const day = TRIP_DATA.days[dayIdx];
  React.useEffect(() => { setOpenIdx(-1); }, [dayIdx]);
  return (
    <>
      <DayRail dayIdx={dayIdx} setDayIdx={setDayIdx}/>
      <DayBanner day={day}/>
      <DaySummary day={day}/>
      <div className="timeline">
        {day.items.map((item, i) => (
          <TLItem key={`${dayIdx}-${i}`} item={item}
            open={openIdx === i}
            onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}/>
        ))}
      </div>
    </>
  );
}

window.TripTab = TripTab;