// Boodschappen + Mij-scherm + Taakbeschrijving

function BoodschappenScreen({ me, now, demoDate }) {
  const H = window.kretaHelpers;
  const DATA = window.CORVEE_DATA;
  const today = demoDate || now;

  const boodschDagen = DATA.days.filter(d => d.boodsch);

  return (
    <div className="screen">
      <h1 className="serif" style={{ fontSize: 30, margin: "8px 0 2px", letterSpacing: -0.6 }}>
        Boodschappen
      </h1>
      <div className="section-sub">3x per week naar de super 🛒</div>

      {boodschDagen.map(d => {
        const dt = H.parseDateTime(d.date, "10:00");
        const isPast = dt < today;
        const isToday = d.date === today.toISOString().slice(0, 10);
        const amIOn = me && d.boodsch.doers.includes(me.id);

        return (
          <div key={d.date} className="card boodsch-card" style={{
            marginBottom: 14,
            opacity: isPast ? 0.6 : 1,
            position: "relative",
          }}>
            {isToday && (
              <div style={{
                position: "absolute", top: 14, right: 14,
                padding: "2px 8px",
                background: "var(--bougainvillea)", color: "white",
                borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: 0.5,
              }}>VANDAAG</div>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <div style={{ fontSize: 32 }}>🛒</div>
              <div>
                <div className="serif" style={{ fontSize: 20, fontWeight: 700, color: "#6b4a00" }}>
                  {H.formatDateNL(d.date)}
                </div>
                <div style={{ fontSize: 12, color: "#8b6a20" }}>
                  {isPast ? "Al geweest" : isToday ? "Vandaag!" : "Gepland"}
                </div>
              </div>
            </div>

            <div className="tiny-mute" style={{ marginBottom: 6, color: "#6b4a00" }}>Boodschappers</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
              {d.boodsch.doers.map(id => <PersonChip key={id} person={H.getPerson(id)} />)}
            </div>

            {d.boodsch.extra && (
              <>
                <div className="tiny-mute" style={{ marginBottom: 6, color: "#6b4a00" }}>+ Extra hulpjes</div>
                <div style={{ fontSize: 14, color: "#6b4a00", fontWeight: 500 }}>
                  {d.boodsch.extra}
                </div>
              </>
            )}

            {amIOn && !isPast && (
              <div style={{ marginTop: 12, padding: "8px 12px", background: "rgba(255,255,255,0.6)", borderRadius: 10, fontSize: 13, fontWeight: 600, color: "#6b4a00" }}>
                👀 Jij moet mee!
              </div>
            )}
          </div>
        );
      })}

      <div className="card" style={{ marginTop: 18, background: "rgba(255,255,255,0.6)" }}>
        <div className="tiny-mute" style={{ marginBottom: 8 }}>Niet vergeten</div>
        <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)" }}>
          <li>Brood + beleg (lunch)</li>
          <li>Rauwe groenten & fruit</li>
          <li>Drank (water, limonade, wijn)</li>
          <li>Hartige snack (chips/nootjes)</li>
          <li>Ontbijtspullen</li>
          <li>Dinerbenodigdheden (kok regelt zelf)</li>
        </ul>
      </div>
    </div>
  );
}

function MijnScreen({ me, state, setState, now, demoDate, onSwitchUser }) {
  const H = window.kretaHelpers;
  const DATA = window.CORVEE_DATA;
  const today = demoDate || now;

  const allTasks = me ? H.allTasksForPerson(me.id) : [];
  const upcoming = allTasks.filter(t => t.dateTime >= today);
  const past = allTasks.filter(t => t.dateTime < today);
  const doneCount = past.filter(t => H.isTaskDone(state, t.date, t.taskId)).length;

  if (me.id === "opa") {
    return (
      <div className="screen">
        <div className="card opa-card" style={{ textAlign: "center", padding: 26, marginTop: 8 }}>
          <Avatar person={me} size={80} />
          <div className="serif" style={{ fontSize: 28, fontWeight: 700, marginTop: 12, color: "#6b4a00" }}>
            Opa, 70
          </div>
          <div style={{ fontSize: 14, color: "#8b6a20", marginTop: 4 }}>
            Grootvader · geldschieter · VIP
          </div>
          <div style={{ marginTop: 14, padding: 12, background: "rgba(255,255,255,0.5)", borderRadius: 12 }}>
            <div style={{ fontFamily: "Fraunces, serif", fontSize: 42, fontWeight: 700, color: "#c9a227" }}>0</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: "#6b4a00", textTransform: "uppercase", letterSpacing: 1 }}>taken</div>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, fontStyle: "italic", color: "#6b4a00" }}>
            "De grootste geluksvogel van Kreta 2026"
          </div>
          <button className="btn btn-ghost" style={{ marginTop: 14, fontSize: 13 }} onClick={onSwitchUser}>
            ↻ Van persoon wisselen
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="screen">
      <div className="card" style={{ textAlign: "center", padding: 24, marginTop: 8, position: "relative" }}>
        <Avatar person={me} size={80} />
        <div className="serif" style={{ fontSize: 26, fontWeight: 700, marginTop: 12 }}>
          {me.name} {me.emoji}
        </div>
        <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>
          {me.role === "hoofd" ? "Hoofd van de keuken" : "Meute-lid"}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 16 }}>
          <div style={{ padding: 10, background: "var(--stucco)", borderRadius: 10 }}>
            <div className="serif" style={{ fontSize: 22, fontWeight: 700, color: "var(--aegean-deep)" }}>{allTasks.length}</div>
            <div style={{ fontSize: 10, textTransform: "uppercase", fontWeight: 600, color: "var(--muted)", letterSpacing: 0.5 }}>Totaal</div>
          </div>
          <div style={{ padding: 10, background: "#e8f5e9", borderRadius: 10 }}>
            <div className="serif" style={{ fontSize: 22, fontWeight: 700, color: "var(--olive)" }}>{doneCount}</div>
            <div style={{ fontSize: 10, textTransform: "uppercase", fontWeight: 600, color: "var(--muted)", letterSpacing: 0.5 }}>Klaar</div>
          </div>
          <div style={{ padding: 10, background: "#fff4d6", borderRadius: 10 }}>
            <div className="serif" style={{ fontSize: 22, fontWeight: 700, color: "var(--sun-deep)" }}>{upcoming.length}</div>
            <div style={{ fontSize: 10, textTransform: "uppercase", fontWeight: 600, color: "var(--muted)", letterSpacing: 0.5 }}>Komt</div>
          </div>
        </div>

        <button className="btn btn-ghost" style={{ marginTop: 14, fontSize: 13 }} onClick={onSwitchUser}>
          ↻ Van persoon wisselen
        </button>
      </div>

      {upcoming.length > 0 && (
        <>
          <div className="section-title">Jouw komende taken</div>
          <div className="card">
            {upcoming.map((t, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "12px 0",
                borderBottom: i < upcoming.length - 1 ? "1px solid var(--line-soft)" : "none",
              }}>
                <div style={{ fontSize: 24 }}>{t.type.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{t.type.label}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
                    {H.formatDateNL(t.date)} · {t.type.time}
                    {t.dish ? ` · ${t.dish}` : ""}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      <div className="section-title">Wat doe je precies?</div>
      <div className="card" style={{ fontSize: 13, lineHeight: 1.55, color: "var(--ink-soft)" }}>
        {DATA.taskTypes.map((tt, i) => (
          <div key={tt.id} style={{ padding: "10px 0", borderBottom: i < DATA.taskTypes.length - 1 ? "1px solid var(--line-soft)" : "none" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
              <span style={{ fontSize: 20 }}>{tt.icon}</span>
              <span style={{ fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>{tt.label}</span>
              <span style={{ fontSize: 11, color: "var(--muted)", marginLeft: "auto" }}>{tt.time}</span>
            </div>
            <div style={{ fontSize: 12 }}>{DATA.taskInfo[tt.id]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { BoodschappenScreen, MijnScreen });