/* global React */
// Phone mockups – three flavours of the Ultimate Shopper app screens.
// Pure inline-styled for self-containment.

const PINK = "#1B1B1D";
const PCYAN = "#00C7B1";
const PBLUE = "#0077B6";
const PORANGE = "#FF8F00";
const PYELLOW = "#FFE81A";
const PGREEN = "#00E676";
const PRED = "#FF4B4B";

function PMIcon({ name, size = 22, color = PINK, fill = 0, weight = 500 }) {
  return (
    <span className="material-symbols-outlined" style={{
      fontSize: size, color, lineHeight: 1, flexShrink: 0,
      fontVariationSettings: `'wght' ${weight}, 'FILL' ${fill}`,
    }}>{name}</span>
  );
}

function PAppBar({ title, color = PCYAN, leading = "menu", actions = ["notifications"] }) {
  return (
    <div style={{
      background: color, height: 56,
      display: "flex", alignItems: "center", padding: "0 6px",
      borderBottom: `3px solid ${PINK}`, gap: 4, flexShrink: 0,
    }}>
      <div style={{ width: 36, display: "flex", justifyContent: "center" }}>
        <PMIcon name={leading} size={22} />
      </div>
      <div style={{
        flex: 1, textAlign: "center",
        fontFamily: "Outfit", fontWeight: 900, fontSize: 17, color: PINK,
        letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
      }}>{title}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
        {actions.map((a, i) => (
          a === "live" ? (
            <span key={i} style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              background: "#fff", border: `2px solid ${PCYAN}`,
              padding: "3px 8px", borderRadius: 999,
              fontSize: 10, fontWeight: 900, color: "#00863E",
              marginRight: 2,
            }}>
              <span style={{ width: 6, height: 6, background: PGREEN, border: `1.5px solid ${PINK}`, borderRadius: 999 }} />
              LIVE
            </span>
          ) : (
            <div key={i} style={{ width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <PMIcon name={a} size={20} />
            </div>
          )
        ))}
      </div>
    </div>
  );
}

function PCategoryHeader({ name, count, color, img }) {
  return (
    <div style={{
      margin: "12px 12px 4px", padding: "6px 10px",
      background: color, color: "#fff",
      border: `2.5px solid ${PINK}`, borderRadius: 10,
      boxShadow: `2.5px 2.5px 0 0 ${PINK}`,
      display: "flex", alignItems: "center", gap: 8,
      textShadow: `1.5px 1.5px 0 ${PINK}`,
      minHeight: 38,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 6,
        background: "#fff", border: `1.5px solid ${PINK}`,
        overflow: "hidden", flexShrink: 0,
      }}>
        {img && <img src={`assets/categories/${img}.png`} style={{ width: "100%", height: "100%", objectFit: "cover" }} alt="" />}
        {!img && (
          <div style={{ width: "100%", height: "100%", background: PYELLOW, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Outfit", fontWeight: 900, fontSize: 14, color: PINK, textShadow: "none" }}>?</div>
        )}
      </div>
      <div style={{
        flex: 1, fontFamily: "Outfit", fontWeight: 900, fontSize: 11,
        letterSpacing: "0.12em", textTransform: "uppercase",
      }}>{name}</div>
      <div style={{
        background: "#fff", color: PINK, border: `1.5px solid ${PINK}`,
        borderRadius: 7, padding: "1px 7px",
        fontFamily: "Outfit", fontWeight: 900, fontSize: 11, textShadow: "none",
      }}>{count}</div>
    </div>
  );
}

function PItem({ emoji, title, meta, status = "open", note, claimedBy }) {
  const claimed = status === "claimed";
  const done = status === "done";
  const skipped = status === "skipped";
  const bg = skipped ? "rgba(255,75,75,0.10)" : claimed ? PYELLOW : "#fff";
  const titleStyle = (done || skipped)
    ? { textDecoration: "line-through", color: "rgba(27,27,29,0.5)" }
    : {};
  let statusIcon;
  if (skipped) statusIcon = <PMIcon name="not_interested" color={PRED} fill={1} size={18} />;
  else if (done) statusIcon = <PMIcon name="check_circle" color={PGREEN} fill={1} size={18} />;
  else if (claimed) statusIcon = <PMIcon name="back_hand" color={PINK} fill={1} size={18} />;
  else statusIcon = <PMIcon name="radio_button_unchecked" color="rgba(27,27,29,0.4)" size={18} />;

  return (
    <div style={{
      margin: "5px 12px", padding: "7px 10px",
      background: bg, border: `2.5px solid ${PINK}`, borderRadius: 12,
      boxShadow: `2.5px 2.5px 0 0 ${PINK}`,
      display: "flex", alignItems: "center", gap: 8, minHeight: 50,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: "#fff", border: `1.5px solid ${PINK}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 18, flexShrink: 0,
      }}>{emoji}</div>
      <div style={{ width: 18, display: "flex", justifyContent: "center", flexShrink: 0 }}>
        {statusIcon}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: "Outfit", fontWeight: 800, fontSize: 13, color: PINK,
          ...titleStyle,
          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
        }}>{title}</div>
        <div style={{
          fontFamily: "Outfit", fontWeight: 600, fontSize: 10,
          color: skipped ? "#C92A2A" : "rgba(27,27,29,0.62)",
          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          marginTop: 1,
        }}>
          {skipped ? "⚠️ Nicht verfügbar" :
            [meta, claimed && claimedBy ? `✋ ${claimedBy}` : null, note].filter(Boolean).join(" · ")}
        </div>
      </div>
      <div style={{ width: 18, display: "flex", justifyContent: "center", flexShrink: 0 }}>
        <PMIcon name="more_vert" size={16} color="rgba(27,27,29,0.5)" />
      </div>
    </div>
  );
}

// ---- Phone variant: List overview ----
function PhoneListOverview() {
  const lists = [
    { name: "Wocheneinkauf", meta: "Erstellt: 07.05.2026 · mit Anna", icon: "shopping_bag", color: "rgba(0,199,177,0.30)" },
    { name: "Bio-Markt Samstag", meta: "Erstellt: 03.05.2026", icon: "shopping_bag", color: "rgba(0,199,177,0.30)" },
    { name: "Geburtstag Mia", meta: "Geteilt · Erstellt: 01.05.2026", icon: "people", color: "rgba(0,119,182,0.25)" },
    { name: "Drogerie", meta: "Erstellt: 28.04.2026", icon: "shopping_bag", color: "rgba(0,199,177,0.30)" },
  ];
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "#F4F6F8" }}>
      <PAppBar title="Meine Einkaufslisten" />
      <div style={{ flex: 1, overflow: "hidden", padding: "10px 0" }}>
        {lists.map((l, i) => (
          <div key={i} style={{
            margin: "8px 12px", padding: "10px",
            background: "#fff", border: `2.5px solid ${PINK}`, borderRadius: 14,
            boxShadow: `3px 3px 0 0 ${PINK}`,
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 999,
              background: l.color, border: `2px solid ${PINK}`,
              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
            }}>
              <PMIcon name={l.icon} size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: "Outfit", fontWeight: 800, fontSize: 14, color: PINK }}>{l.name}</div>
              <div style={{ fontFamily: "Outfit", fontWeight: 600, fontSize: 10, color: "rgba(27,27,29,0.62)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{l.meta}</div>
            </div>
            <PMIcon name="chevron_right" size={22} />
          </div>
        ))}
      </div>
      {/* FAB */}
      <div style={{ position: "absolute", right: 14, bottom: 18, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }}>
        <button style={{
          width: 40, height: 40, borderRadius: 12,
          background: "rgba(0,119,182,0.18)", border: `2.5px solid ${PINK}`,
          boxShadow: `2.5px 2.5px 0 0 ${PINK}`,
          display: "flex", alignItems: "center", justifyContent: "center", cursor: "default",
        }}><PMIcon name="add" size={20} /></button>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "10px 14px", height: 44,
          background: PCYAN, color: PINK,
          border: `2.5px solid ${PINK}`, borderRadius: 12,
          boxShadow: `3px 3px 0 0 ${PINK}`,
          fontFamily: "Outfit", fontWeight: 900, fontSize: 12, letterSpacing: "0.06em",
          textTransform: "uppercase",
        }}>
          <PMIcon name="shopping_cart" size={18} /> Einkauf starten
        </div>
      </div>
    </div>
  );
}

// ---- Phone variant: Intake (capture) ----
function PhoneIntake() {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "#F4F6F8" }}>
      <PAppBar title="Wocheneinkauf" leading="arrow_back" actions={["live", "shopping_cart"]} />
      <div style={{ flex: 1, overflow: "hidden", paddingBottom: 8 }}>
        <PCategoryHeader name="Getränke" count={1} color={PORANGE} img="08" />
        <PItem emoji="💧" title="Wasser; Staatl.Faching." meta="Menge: 1 l" />

        <PCategoryHeader name="Milch & Eier" count={2} color={PBLUE} img="03" />
        <PItem emoji="🥛" title="Vollmilch 1,5%" meta="Menge: 2 l" />
        <PItem emoji="🧀" title="Bergkäse" meta="Menge: 250 g" />

        <PCategoryHeader name="Sonstiges" count={2} color={PINK} />
        <PItem emoji="🍎" title="Apfelkompott" meta="Menge: 2 Glas" claimedBy="Anna" status="claimed" />
        <PItem emoji="🥭" title="Fruchtcocktail" meta="Menge: 1 Dose · Bio" />
      </div>
      {/* Capture bar */}
      <div style={{ background: "#F4F6F8", borderTop: "1.5px solid rgba(0,0,0,0.08)", padding: "8px 10px 12px" }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 6,
          background: "#fff", border: `2.5px solid ${PCYAN}`, borderRadius: 12, padding: "0 4px 0 12px", height: 40,
        }}>
          <span style={{ flex: 1, fontFamily: "Outfit", fontWeight: 600, fontSize: 12, color: "rgba(27,27,29,0.45)" }}>Artikel erfassen…</span>
          <div style={{
            width: 30, height: 30, borderRadius: 999, background: PCYAN, border: `2.5px solid ${PINK}`,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}><PMIcon name="add" size={18} /></div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 8 }}>
          <div style={{ width: 22, height: 22, borderRadius: 999, border: `2px solid ${PINK}`, background: PBLUE, color: "#fff", fontFamily: "Outfit", fontWeight: 900, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" }}>−</div>
          <div style={{ width: 26, height: 22, borderRadius: 6, border: `2px solid ${PINK}`, background: "#fff", fontFamily: "Outfit", fontWeight: 900, fontSize: 11, display: "flex", alignItems: "center", justifyContent: "center" }}>1</div>
          <div style={{ width: 22, height: 22, borderRadius: 999, border: `2px solid ${PINK}`, background: PBLUE, color: "#fff", fontFamily: "Outfit", fontWeight: 900, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" }}>+</div>
          <div style={{ flex: 1, display: "flex", gap: 4, marginLeft: 4, overflow: "hidden" }}>
            {["Stk", "g", "kg", "ml", "l", "Dose"].map((u, i) => (
              <div key={u} style={{
                padding: "2px 8px", borderRadius: 999, border: `1.5px solid ${PINK}`,
                background: i === 0 ? PCYAN : "#fff", color: PINK,
                fontFamily: "Outfit", fontWeight: 800, fontSize: 10, flexShrink: 0,
              }}>{u}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- Phone variant: Shopping mode ----
function PhoneShopping() {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "#F4F6F8" }}>
      <PAppBar title="Wocheneinkauf" leading="arrow_back" actions={["live", "edit_note"]} />
      <div style={{ flex: 1, overflow: "hidden" }}>
        <PCategoryHeader name="Brot & Backwaren" count={2} color={PORANGE} img="05" />
        <PItem emoji="🥖" title="Sauerteigbrot" meta="Menge: 1 Stk" />
        <PItem emoji="🥐" title="Croissants" meta="Menge: 4 Stk" status="claimed" claimedBy="Lukas" />

        <PCategoryHeader name="Getränke" count={1} color={PORANGE} img="08" />
        <PItem emoji="💧" title="Wasser Medium" meta="Menge: 6 Fl." />

        {/* skipped section */}
        <div style={{
          margin: "8px 12px", padding: "8px 10px",
          background: "#C92A2A", color: "#fff",
          border: `2.5px solid ${PINK}`, borderRadius: 10,
          boxShadow: `2px 2px 0 0 ${PINK}`,
          display: "flex", alignItems: "center", gap: 8,
          textShadow: `1.5px 1.5px 0 ${PINK}`,
        }}>
          <PMIcon name="not_interested" size={16} color="#fff" fill={1} />
          <div style={{ flex: 1, fontFamily: "Outfit", fontWeight: 900, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>Nicht verfügbar (1)</div>
          <div style={{ fontFamily: "Outfit", fontWeight: 900, fontSize: 13, textShadow: `1.5px 1.5px 0 ${PINK}` }}>▼</div>
        </div>

        {/* done section */}
        <div style={{
          margin: "8px 12px", padding: "8px 10px",
          background: "#00863E", color: "#fff",
          border: `2.5px solid ${PINK}`, borderRadius: 10,
          boxShadow: `2px 2px 0 0 ${PINK}`,
          display: "flex", alignItems: "center", gap: 8,
          textShadow: `1.5px 1.5px 0 ${PINK}`,
        }}>
          <PMIcon name="check_circle" size={16} color="#fff" fill={1} />
          <div style={{ flex: 1, fontFamily: "Outfit", fontWeight: 900, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>Erledigt (3)</div>
          <div style={{ fontFamily: "Outfit", fontWeight: 900, fontSize: 13, textShadow: `1.5px 1.5px 0 ${PINK}` }}>▼</div>
        </div>
      </div>
      {/* FAB */}
      <div style={{ position: "absolute", right: 14, bottom: 18, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 12, background: "#fff",
          border: `2.5px solid ${PINK}`, boxShadow: `2.5px 2.5px 0 0 ${PINK}`,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><PMIcon name="qr_code_scanner" size={20} /></div>
        <div style={{
          width: 50, height: 50, borderRadius: 14, background: PCYAN,
          border: `2.5px solid ${PINK}`, boxShadow: `3px 3px 0 0 ${PINK}`,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><PMIcon name="add_shopping_cart" size={22} /></div>
      </div>
    </div>
  );
}

function Phone({ variant = "list" }) {
  const Inner = variant === "intake" ? PhoneIntake
    : variant === "shopping" ? PhoneShopping
    : PhoneListOverview;
  return (
    <div className="phone">
      <div className="phone-notch" />
      <div className="phone-screen">
        <Inner />
      </div>
    </div>
  );
}

window.Phone = Phone;