// Week schema scherm
function WeekScreen({ me, state, setState, now, demoDate }) {
  const H = window.kretaHelpers;
  const DATA = window.CORVEE_DATA;
  const today = demoDate || now;
  const todayStr = today.toISOString().slice(0, 10);
  const [selectedDate, setSelectedDate] = React.useState(todayStr);

  const sched = H.getSchedule(selectedDate);
  const day = H.getDay(selectedDate);

  return (
    <div className="screen">
      <h1 className="serif" style={{ fontSize: 30, margin: "8px 0 2px", letterSpacing: -0.6 }}>Schema</h1>
      <div className="section-sub">Tik een dag voor alle taken</div>

      <div className="hscroll" style={{ marginBottom: 18 }}>
        {DATA.days.map(d => {
          const isActive = d.date === selectedDate;
          const isToday = d.date === todayStr;
          return (
            <button
              key={d.date}
              onClick={() => setSelectedDate(d.date)}
              style={{
                appearance: "none", border: "none", cursor: "pointer",
                padding: "10px 14px",
                minWidth: 62,
                borderRadius: 14,
                background: isActive ? "var(--aegean)" : "white",
                color: isActive ? "white" : "var(--ink)",
                border: isActive ? "none" : "1px solid var(--line-soft)",
                fontFamily: "inherit",
                boxShadow: isActive ? "0 4px 12px rgba(26,84,144,0.3)" : "none",
                textAlign: "center",
                position: "relative",
              }}
            >
              <div style={{ fontSize: 10, fontWeight: 600, textTransform: "uppercase", opacity: 0.75, letterSpacing: 0.5 }}>
                {d.label.split(" ")[0]}
              </div>
              <div style={{ fontFamily: "Fraunces, serif", fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 2 }}>
                {d.label.split(" ")[1]}
              </div>
              {isToday && (
                <div style={{
                  position: "absolute", top: 4, right: 6,
                  width: 6, height: 6, borderRadius: "50%",
                  background: isActive ? "white" : "var(--bougainvillea)",
                }} />
              )}
              {d.travel && <div style={{ fontSize: 11, marginTop: 2 }}>✈️</div>}
              {d.special === "bonte-avond" && <div style={{ fontSize: 11, marginTop: 2 }}>🎭</div>}
            </button>
          );
        })}
      </div>

      {/* Day header */}
      <div className="card" style={{ marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
          <div>
            <div className="tiny-mute" style={{ color: "var(--aegean)" }}>{day?.dayName}</div>
            <div className="serif" style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.4 }}>
              {H.formatDateNL(selectedDate)}
            </div>
            {day?.note && <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{day.note}</div>}
          </div>
          {day?.travel && <div style={{ fontSize: 36 }}>✈️</div>}
          {day?.special === "bonte-avond" && <div style={{ fontSize: 36 }}>🎭</div>}
        </div>

        {day?.boodsch && (
          <div style={{ marginTop: 14, padding: "10px 12px", background: "var(--stucco)", borderRadius: 10, border: "1px dashed var(--sun-deep)" }}>
            <div className="tiny-mute" style={{ marginBottom: 6, color: "#6b4a00" }}>🛒 Boodschappen vandaag</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {day.boodsch.doers.map(id => <PersonChip key={id} person={H.getPerson(id)} compact />)}
            </div>
            {day.boodsch.extra && (
              <div style={{ fontSize: 12, marginTop: 6, color: "var(--ink-soft)" }}>
                + extra hulp: {day.boodsch.extra}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Tasks */}
      {sched && Object.keys(sched.tasks).length > 0 ? (
        <div className="card">
          {DATA.taskTypes.map(tt => {
            const entry = sched.tasks[tt.id];
            if (!entry) return null;
            return (
              <TaskRow
                key={tt.id}
                task={{ taskId: tt.id, type: tt, ...entry }}
                dateStr={selectedDate}
                state={state}
                setState={setState}
                me={me}
              />
            );
          })}
        </div>
      ) : (
        <div className="card" style={{ textAlign: "center", padding: 30 }}>
          <div style={{ fontSize: 40, marginBottom: 8 }}>🏖️</div>
          <div style={{ fontWeight: 600 }}>Geen taken deze dag</div>
          <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>
            {day?.travel ? "Reisdag — geniet van de reis!" : "Lekker niksen"}
          </div>
        </div>
      )}
    </div>
  );
}

window.WeekScreen = WeekScreen;