/* Dashboard mock v2: three phone-style app screens lined up.
   Matches the real OneMoreDay app: dark Home with amber glow,
   golden-header Goals, golden-header Train. */

function PhoneFrame({ children, label }) {
  return (
    <div style={{
      width: 300,
      height: 620,
      borderRadius: 36,
      background: "#0a0a0a",
      border: "1px solid #2a2a2a",
      boxShadow: "0 40px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.03)",
      padding: 8,
      position: "relative",
      flexShrink: 0,
    }}>
      {/* notch */}
      <div style={{
        position: "absolute", top: 14, left: "50%", transform: "translateX(-50%)",
        width: 90, height: 22, borderRadius: 12, background: "#000", zIndex: 5,
      }}/>
      <div style={{
        width: "100%", height: "100%",
        borderRadius: 28,
        background: "var(--bg)",
        overflow: "hidden",
        position: "relative",
        color: "var(--fg)",
        fontSize: 12,
      }}>
        {children}
      </div>
      {label && (
        <div style={{
          position: "absolute", bottom: -28, left: 0, right: 0, textAlign: "center",
          fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".15em",
          color: "var(--muted)", textTransform: "uppercase",
        }}>{label}</div>
      )}
    </div>
  );
}

function StatusBar({ onDark = true }) {
  const c = onDark ? "#f4f4f4" : "#1a1308";
  return (
    <div style={{
      height: 34, padding: "10px 24px 0",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontSize: 13, fontWeight: 600, color: c,
    }}>
      <span>9:41</span>
      <div style={{ display: "flex", gap: 5, alignItems: "center" }}>
        <span style={{ width: 16, height: 10, border: `1.2px solid ${c}`, borderRadius: 2, position: "relative", display: "inline-block" }}>
          <span style={{ position: "absolute", inset: 1.5, background: c, borderRadius: 1 }}/>
        </span>
      </div>
    </div>
  );
}

function BottomTabs({ active = "home" }) {
  const tabs = [
    { id: "home",    label: "Home" },
    { id: "train",   label: "Train" },
    { id: "goals",   label: "Goals" },
    { id: "profile", label: "Profile" },
  ];
  const icon = (id, color) => {
    const s = { width: 16, height: 16, stroke: color, strokeWidth: 1.8, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
    if (id === "home")    return <svg {...s} viewBox="0 0 24 24"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>;
    if (id === "train")   return <svg {...s} viewBox="0 0 24 24"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg>;
    if (id === "goals")   return <svg {...s} viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill={color}/></svg>;
    if (id === "profile") return <svg {...s} viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>;
    return null;
  };
  return (
    <div style={{
      position: "absolute", left: 14, right: 14, bottom: 14, zIndex: 5,
      height: 58, padding: "0 8px",
      background: "rgba(28,22,10,0.65)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      border: "1px solid rgba(255,255,255,0.1)",
      borderRadius: 999,
      display: "flex", justifyContent: "space-around", alignItems: "center",
      boxShadow: "0 10px 30px rgba(0,0,0,0.5)",
    }}>
      {tabs.map(t => {
        const on = t.id === active;
        return (
          <div key={t.id} style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
            padding: on ? "6px 14px" : "6px 8px",
            borderRadius: 999,
            background: on ? "rgba(255,255,255,0.14)" : "transparent",
            color: on ? "#fff" : "rgba(255,255,255,0.65)",
          }}>
            {icon(t.id, on ? "#fff" : "rgba(255,255,255,0.7)")}
            <span style={{ fontSize: 9.5, fontWeight: on ? 600 : 500 }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- HOME screen ---------- */
function HomeScreen({ dying }) {
  return (
    <div style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden", background: "#000" }}>
      <StatusBar />

      {/* radial gold-to-black background (matches reference) */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 75% 58% at 50% 42%, #d9a21a 0%, #9c7114 35%, #3a280b 70%, #000 100%)",
        pointerEvents: "none",
      }}/>

      {/* ambient drift blobs over the gold */}
      <div className="drift-blob blob-a" style={{
        position: "absolute", width: 240, height: 240, left: "-18%", top: "18%",
        borderRadius: "50%", filter: "blur(55px)",
        background: "radial-gradient(circle, rgba(255,185,40,0.55), rgba(255,185,40,0) 70%)",
        zIndex: 0, pointerEvents: "none", mixBlendMode: "screen",
      }}/>
      <div className="drift-blob blob-b" style={{
        position: "absolute", width: 220, height: 220, right: "-18%", top: "22%",
        borderRadius: "50%", filter: "blur(60px)",
        background: "radial-gradient(circle, rgba(255,150,30,0.45), rgba(255,150,30,0) 70%)",
        zIndex: 0, pointerEvents: "none", mixBlendMode: "screen",
      }}/>
      <div className="drift-blob blob-c" style={{
        position: "absolute", width: 180, height: 180, left: "30%", top: "48%",
        borderRadius: "50%", filter: "blur(55px)",
        background: "radial-gradient(circle, rgba(255,220,100,0.38), rgba(255,220,100,0) 70%)",
        zIndex: 0, pointerEvents: "none", mixBlendMode: "screen",
      }}/>

      {/* header */}
      <div style={{ padding: "16px 22px 0", position: "relative", zIndex: 2, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,0.78)", fontWeight: 500 }}>Good morning</div>
          <div style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", marginTop: 2, color: "#fff" }}>Andrés</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 12, color: "#fff", fontWeight: 600, whiteSpace: "nowrap" }}>Friday, April 10</div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.65)", marginTop: 2, display: "flex", alignItems: "center", gap: 3, justifyContent: "flex-end", whiteSpace: "nowrap" }}>
            <span style={{ fontSize: 9 }}>◉</span> Dubai Marina
          </div>
        </div>
      </div>

      {/* avatar stage */}
      <div style={{
        position: "absolute", top: 82, left: 16, right: 16, bottom: 170,
        display: "grid", placeItems: "center",
        overflow: "hidden",
        zIndex: 1,
      }}>
        <img src="assets/avatar.png" alt="OneMoreDay avatar"
             style={{
               maxHeight: "100%", maxWidth: "100%",
               width: "auto", height: "auto",
               objectFit: "contain",
               filter: dying
                 ? "grayscale(0.7) brightness(0.55) drop-shadow(0 0 20px rgba(255,69,64,0.5))"
                 : "drop-shadow(0 14px 26px rgba(0,0,0,0.55))",
               transition: "filter .4s ease",
             }}/>
      </div>

      {/* Level + HP */}
      <div style={{
        position: "absolute", bottom: 96, left: 24, right: 24, zIndex: 3,
        textAlign: "center", color: "#fff",
      }}>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.88)", fontWeight: 500 }}>
          Level 1 · {dying ? "1" : "14"} day streak
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>
          <span style={{ color: "#fff" }}>{dying ? "14" : "50"}</span>
          <span style={{ color: "rgba(255,255,255,0.6)", fontWeight: 500 }}> /100 HP</span>
        </div>
        <div style={{ height: 5, borderRadius: 3, background: "rgba(255,255,255,0.2)", marginTop: 10, overflow: "hidden" }}>
          <div style={{
            width: dying ? "14%" : "50%", height: "100%",
            background: dying
              ? "linear-gradient(90deg, #FF4540, #ff7a6b)"
              : "linear-gradient(90deg, #ebc726, #ffd94a)",
            transition: "width .6s ease",
          }}/>
        </div>
      </div>

      <BottomTabs active="home" />
    </div>
  );
}

/* ---------- GOALS screen ---------- */
function GoalsScreen({ dying }) {
  const habits = [
    { name: "Morning run",   sub: "2km · 6:30am",   streak: 47, pct: 92, done: true  },
    { name: "Read 20 pages", sub: "after lunch",    streak: 12, pct: 68, done: true  },
    { name: "No sugar 6pm+", sub: "ongoing",        streak:  6, pct: 41, done: false },
    { name: "Meditate",      sub: "10 min · night", streak: 23, pct: dying ? 14 : 78, done: false, dying },
    { name: "Sketch one",    sub: "anything",       streak:  3, pct: 22, done: false, dying: true },
  ];
  return (
    <div style={{ width: "100%", height: "100%", position: "relative", background: "var(--bg)" }}>
      {/* golden header */}
      <div className="golden-header" style={{ padding: "0 0 18px" }}>
        <StatusBar onDark={false} />
        <div style={{ padding: "6px 20px 0" }}>
          <div style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, opacity: 0.75 }}>
            Thursday · Apr 18
          </div>
          <div style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", marginTop: 4 }}>Goals</div>
          <div style={{ marginTop: 12, display: "flex", gap: 8, flexWrap: "wrap" }}>
            <div style={{ padding: "4px 10px", borderRadius: 999, background: "rgba(26,19,8,0.15)", fontSize: 10, fontWeight: 600, whiteSpace: "nowrap" }}>2 / 5 today</div>
            <div style={{ padding: "4px 10px", borderRadius: 999, background: "rgba(26,19,8,0.15)", fontSize: 10, fontWeight: 600, whiteSpace: "nowrap" }}>🔥 128d</div>
          </div>
        </div>
      </div>

      {/* habit list */}
      <div style={{ padding: "14px 14px 90px", display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
        {habits.map((h, i) => (
          <div key={i} style={{
            background: "var(--surface)",
            border: "1px solid #2a2a2a",
            borderRadius: 14,
            padding: "12px 14px",
            display: "grid",
            gridTemplateColumns: "22px 1fr auto",
            gap: 12, alignItems: "center",
          }}>
            <div style={{
              width: 20, height: 20, borderRadius: 6,
              border: `1.5px solid ${h.done ? "var(--accent-green)" : "#444"}`,
              background: h.done ? "var(--accent-green)" : "transparent",
              display: "grid", placeItems: "center",
            }}>
              {h.done && <svg width="11" height="11" viewBox="0 0 12 12"><path d="M2 6.5 L5 9 L10 3" stroke="#0a0a0a" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg)" }}>{h.name}</div>
              <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 1, fontWeight: 500 }}>{h.sub}</div>
              <div style={{ height: 3, borderRadius: 2, background: "#262626", marginTop: 6, overflow: "hidden" }}>
                <div style={{
                  width: `${h.pct}%`, height: "100%",
                  background: h.dying ? "var(--accent-red)" : "var(--accent-yellow)",
                }}/>
              </div>
            </div>
            <div style={{ textAlign: "right", minWidth: 54, whiteSpace: "nowrap" }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--accent-yellow)", whiteSpace: "nowrap" }}>{h.streak}d</div>
              <div style={{ fontSize: 9, color: h.dying ? "var(--accent-red)" : "var(--muted)", fontWeight: 500, marginTop: 2, whiteSpace: "nowrap" }}>
                {h.dying ? "3h left" : "on track"}
              </div>
            </div>
          </div>
        ))}
      </div>

      <BottomTabs active="goals" />
    </div>
  );
}

/* ---------- TRAIN screen ---------- */
function TrainScreen() {
  return (
    <div style={{ width: "100%", height: "100%", position: "relative", background: "var(--bg)" }}>
      <div className="golden-header" style={{ padding: "0 0 22px" }}>
        <StatusBar onDark={false} />
        <div style={{ padding: "6px 20px 0" }}>
          <div style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, opacity: 0.75 }}>
            Today's session
          </div>
          <div style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", marginTop: 4 }}>Train</div>

          {/* big HP-style circle */}
          <div style={{
            marginTop: 16, display: "flex", alignItems: "center", gap: 14,
          }}>
            <div style={{
              width: 70, height: 70, borderRadius: 999,
              background: "rgba(26,19,8,0.22)",
              display: "grid", placeItems: "center",
              border: "2px solid rgba(26,19,8,0.4)",
            }}>
              <div style={{ textAlign: "center", lineHeight: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 900 }}>24</div>
                <div style={{ fontSize: 8, fontWeight: 600, opacity: 0.7, marginTop: 2 }}>MIN</div>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Full-body strength</div>
              <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 500, marginTop: 2 }}>8 exercises · +12 HP reward</div>
            </div>
          </div>
        </div>
      </div>

      {/* exercise list */}
      <div style={{ padding: "14px 14px 90px", display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { n: "Push-ups",      s: "3 × 12", done: true  },
          { n: "Squats",        s: "3 × 15", done: true  },
          { n: "Plank",         s: "3 × 45s", done: false },
          { n: "Lunges",        s: "3 × 10", done: false },
          { n: "Mtn. climbers", s: "3 × 20", done: false },
        ].map((e, i) => (
          <div key={i} style={{
            background: "var(--surface)",
            border: "1px solid #2a2a2a",
            borderRadius: 12,
            padding: "10px 14px",
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10,
          }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--fg)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.n}</div>
              <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2, fontWeight: 500, whiteSpace: "nowrap" }}>{e.s}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 999,
              background: e.done ? "var(--accent-green)" : "transparent",
              border: `1.5px solid ${e.done ? "var(--accent-green)" : "#444"}`,
              display: "grid", placeItems: "center",
            }}>
              {e.done && <svg width="10" height="10" viewBox="0 0 12 12"><path d="M2 6.5 L5 9 L10 3" stroke="#0a0a0a" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            </div>
          </div>
        ))}
      </div>

      <BottomTabs active="train" />
    </div>
  );
}

/* Multi-phone layout for the landing hero */
function DashboardMock({ dying = false }) {
  return (
    <div style={{
      width: "100%", height: "100%",
      display: "flex", alignItems: "center", justifyContent: "center",
      gap: 36,
      padding: "20px 0 40px",
    }}>
      <div style={{ transform: "translateY(20px) rotate(-3deg)" }}>
        <PhoneFrame label="Train">
          <TrainScreen />
        </PhoneFrame>
      </div>
      <div style={{ transform: "translateY(-10px)", zIndex: 2 }}>
        <PhoneFrame label="Home">
          <HomeScreen dying={dying} />
        </PhoneFrame>
      </div>
      <div style={{ transform: "translateY(20px) rotate(3deg)" }}>
        <PhoneFrame label="Goals">
          <GoalsScreen dying={dying} />
        </PhoneFrame>
      </div>
    </div>
  );
}

window.DashboardMock = DashboardMock;