/* ============================================================
   Variation 1 — Playful Timeline
   Napló-szerű, világos, barátságos, domináns nagy óra + timeline
   ============================================================ */

function V1Variation({ state, setState, t }) {
  const routes = state.routes;
  const now = state.now;
  const U = window.BUS_UTILS;

  const nowFmt = U.fmtTime(now.getHours() * 60 + now.getMinutes());
  const dateFmt = now.toLocaleDateString(state.lang === "hu" ? "hu-HU" : "en-US", {
    weekday: "long", month: "short", day: "numeric",
  });

  const hero = routes[0];
  let heroInfo = null;
  if (hero) {
    const nowMins = now.getHours() * 60 + now.getMinutes();
    const minsToLeave = hero.departLeaveHome - nowMins;
    let stateText = t.youHaveTime;
    if (minsToLeave <= 0) stateText = t.leaveNow;
    else if (minsToLeave <= 5) stateText = t.leaveSoon;
    heroInfo = { minsToLeave, stateText };
  }

  return (
    <div className="v1">
      <div className="v1-header">
        <div>
          <div className="v1-title">{t.appTitle} ✨</div>
          <div className="v1-subtitle">{t.appSubtitle}</div>
        </div>
        <div className="v1-clock">
          <div className="v1-clock-label">{t.now_is}</div>
          <div className="v1-clock-time">{nowFmt}</div>
          <div className="v1-clock-date">{dateFmt}</div>
        </div>
      </div>

      <div className="v1-toolbar">
        {state.DayPicker && <state.DayPicker />}
        <button
          className={`v1-btn ${state.mode === "now" ? "active" : ""}`}
          onClick={() => setState({ ...state, mode: "now" })}
        >
          🕐 {t.now}
        </button>
        <button
          className={`v1-btn ${state.mode === "custom" ? "active" : ""}`}
          onClick={() => setState({ ...state, mode: "custom" })}
        >
          ⏰ {t.customTime}
        </button>
        {state.mode === "custom" && (
          <input
            type="time"
            value={state.customTime}
            className="v1-time-input"
            onChange={(e) => setState({ ...state, customTime: e.target.value })}
          />
        )}
        <button className="v1-btn warn" onClick={() => setState({ ...state, missed: (state.missed || 0) + 1 })}>
          😬 {t.missedButton}
        </button>
      </div>

      {hero && heroInfo && (
        <div className="v1-hero-banner">
          <div className="v1-hero-left">
            <div className="v1-hero-label">{t.leaveAtShort}</div>
            <div className="v1-hero-time">{U.fmtTime(hero.departLeaveHome)}</div>
            <div className="v1-hero-sub">{heroInfo.stateText}</div>
          </div>
          <div className="v1-hero-right">
            <div className="v1-hero-countdown">{t.countdownToLeave}</div>
            <div className="v1-hero-count">
              {heroInfo.minsToLeave > 0 ? `${heroInfo.minsToLeave} ${t.min}` : "— "}
            </div>
          </div>
        </div>
      )}

      {routes.length > 0 ? (
        <div className="v1-routes">
          {routes.map((r, i) => (
            <window.RouteCard
              key={i}
              route={r}
              index={i}
              isPrimary={i === 0}
              t={t}
              style=""
            />
          ))}
        </div>
      ) : (
        <div className="v1-empty">
          <div className="v1-empty-emoji">🌙</div>
          <div className="v1-empty-title">{t.noRoutes}</div>
          <div className="v1-empty-hint">{t.noRoutesHint}</div>
        </div>
      )}
    </div>
  );
}

window.V1Variation = V1Variation;