// Mobile phone mockup component for GH Gambit Stats App preview
// Variants: "login" | "home" | "attendance"

function PhoneFrame({ children, label, hasImage }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
      <div
        style={{
          width: 290,
          height: 620,
          background: "#1A1A1A",
          borderRadius: 44,
          padding: 8,
          position: "relative",
          boxShadow: `
            0 30px 100px -20px rgba(0,0,0,0.8),
            0 0 0 1px rgba(244,240,229,0.25),
            inset 0 0 0 1px rgba(255,255,255,0.05)
          `,
          border: "1px solid rgba(244,240,229,0.1)",
        }}
      >
        {/* Side button highlights */}
        <span style={{ position: "absolute", left: -2, top: 110, width: 3, height: 28, background: "#0f0f0f", borderRadius: 2 }}></span>
        <span style={{ position: "absolute", left: -2, top: 160, width: 3, height: 50, background: "#0f0f0f", borderRadius: 2 }}></span>
        <span style={{ position: "absolute", left: -2, top: 220, width: 3, height: 50, background: "#0f0f0f", borderRadius: 2 }}></span>
        <span style={{ position: "absolute", right: -2, top: 160, width: 3, height: 80, background: "#0f0f0f", borderRadius: 2 }}></span>

        <div
          style={{
            width: "100%",
            height: "100%",
            background: "var(--ink)",
            borderRadius: 34,
            overflow: "hidden",
            position: "relative",
            display: "flex",
            flexDirection: "column",
          }}
        >
          {/* Only show notch/status bar for Mock UI, not for real Screenshots */}
          {!hasImage && (
            <>
              <div style={{ position: "absolute", top: 8, left: "50%", transform: "translateX(-50%)", width: 92, height: 24, background: "#000", borderRadius: 14, zIndex: 10 }}></div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 22px 0", fontSize: 10, color: "var(--cream)", fontFamily: "var(--mono)", letterSpacing: "0.08em", position: "relative", zIndex: 5 }}>
                <span>9:41</span>
                <span style={{ display: "inline-flex", gap: 5, alignItems: "center" }}>
                  <svg width="14" height="9" viewBox="0 0 14 9" fill="currentColor"><path d="M0 8h2V6H0v2zm3 0h2V4H3v4zm3 0h2V2H6v6zm3 0h2V0H9v8z" /></svg>
                  <svg width="14" height="9" viewBox="0 0 14 9" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="1.5" width="11" height="6" rx="1" /><rect x="2" y="3" width="7" height="3" fill="currentColor" /><rect x="12" y="3" width="1.5" height="3" fill="currentColor" /></svg>
                </span>
              </div>
            </>
          )}

          {children}
        </div>
      </div>
      {label && (
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "inherit" }}>
          {label}
        </span>
      )}
    </div>
  );
}

function MockLogin() {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "40px 24px 28px", color: "var(--cream)" }}>
      {/* Logo block */}
      <div style={{ marginTop: 24, display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
        <div style={{ width: 56, height: 56, background: "var(--burgundy)", display: "grid", placeItems: "center", fontFamily: "var(--display)", fontSize: 22, color: "var(--cream)" }}>
          GH
        </div>
        <p className="mono" style={{ margin: 0, fontSize: 9, letterSpacing: "0.28em", color: "var(--teal)" }}>STATS · MOBILE</p>
      </div>

      <div style={{ marginTop: 38 }}>
        <p className="mono" style={{ fontSize: 9, letterSpacing: "0.22em", color: "var(--muted-cream)", margin: 0 }}>WELCOME BACK</p>
        <h3 className="display" style={{ margin: "8px 0 0", fontSize: 30, color: "var(--cream)" }}>Login</h3>
      </div>

      <div style={{ marginTop: 26, display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <p style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--muted-cream)", margin: "0 0 6px", textTransform: "uppercase" }}>Email / Username</p>
          <div style={{ height: 38, background: "rgba(244,240,229,0.05)", border: "1px solid var(--line-strong)", display: "flex", alignItems: "center", padding: "0 12px", fontSize: 12, color: "var(--cream)" }}>
            pemain@sekolah.id
          </div>
        </div>
        <div>
          <p style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--muted-cream)", margin: "0 0 6px", textTransform: "uppercase" }}>Password</p>
          <div style={{ height: 38, background: "rgba(244,240,229,0.05)", border: "1px solid var(--line-strong)", display: "flex", alignItems: "center", padding: "0 12px", fontSize: 16, color: "var(--cream)", letterSpacing: "0.3em" }}>
            ••••••••
          </div>
        </div>
      </div>

      <button style={{ marginTop: 22, height: 42, background: "var(--burgundy)", color: "var(--cream)", border: "none", fontSize: 11, letterSpacing: "0.20em", textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--sans)" }}>
        Masuk →
      </button>

      <p style={{ marginTop: 14, fontSize: 10, color: "var(--teal)", textAlign: "center", letterSpacing: "0.10em" }}>
        Lupa password?
      </p>

      <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
        <p className="mono" style={{ margin: 0, fontSize: 8, letterSpacing: "0.28em", color: "var(--muted-cream)" }}>GH GAMBIT</p>
        <p className="mono" style={{ margin: 0, fontSize: 8, letterSpacing: "0.28em", color: "var(--muted-cream)", opacity: 0.7 }}>STATS MOBILE APP</p>
      </div>
    </div>
  );
}

function MockHome() {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "36px 18px 16px", color: "var(--cream)", overflow: "hidden" }}>
      {/* Top bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
        <div>
          <p className="mono" style={{ margin: 0, fontSize: 8, letterSpacing: "0.22em", color: "var(--teal)" }}>HALO,</p>
          <p style={{ margin: "4px 0 0", fontSize: 15, fontWeight: 600 }}>Rifqi Abdi</p>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: 50, background: "var(--burgundy)", display: "grid", placeItems: "center", fontFamily: "var(--display)", fontSize: 13 }}>RA</div>
      </div>

      {/* Hero stat card */}
      <div style={{ marginTop: 16, padding: 16, background: "var(--burgundy)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
        <span className="display" style={{ position: "absolute", right: -8, bottom: -16, fontSize: 80, opacity: 0.12, lineHeight: 1 }}>GH</span>
        <p className="mono" style={{ margin: 0, fontSize: 8, letterSpacing: "0.22em", opacity: 0.8 }}>ATTENDANCE / BULAN INI</p>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 8 }}>
          <span className="display" style={{ fontSize: 38, lineHeight: 1 }}>92%</span>
          <span style={{ fontSize: 11, opacity: 0.8 }}>kehadiran</span>
        </div>
        <div style={{ marginTop: 10, height: 4, background: "rgba(244,240,229,0.18)", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "92%", background: "var(--teal)" }}></div>
        </div>
      </div>

      {/* Shortcuts */}
      <p className="mono" style={{ marginTop: 18, marginBottom: 8, fontSize: 8, letterSpacing: "0.22em", color: "var(--muted-cream)" }}>SHORTCUT</p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        {[
          ["Attendance", "→"],
          ["Riwayat", "→"],
        ].map(([l, a]) => (
          <div key={l} style={{ padding: 10, border: "1px solid var(--line-strong)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 11, fontWeight: 500 }}>{l}</span>
            <span style={{ color: "var(--teal)", fontSize: 12 }}>{a}</span>
          </div>
        ))}
      </div>

      {/* Info card */}
      <div style={{ marginTop: 12, padding: 12, border: "1px solid var(--line-strong)", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="mono" style={{ fontSize: 8, letterSpacing: "0.22em", color: "var(--teal)" }}>SESI BERIKUTNYA</span>
          <span className="mono" style={{ fontSize: 8, color: "var(--muted-cream)" }}>SEL · 16:00</span>
        </div>
        <p style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>Latihan Skill Development</p>
        <p style={{ margin: 0, fontSize: 10, color: "var(--muted-cream)" }}>Lapangan Sekolah · 90 menit</p>
      </div>

      {/* Bottom tab */}
      <div style={{ marginTop: "auto", paddingTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4, borderTop: "1px solid var(--line)" }}>
        {[["Home", true], ["Attendance", false], ["Profile", false]].map(([l, active], i) => (
          <div key={i} style={{ padding: "8px 4px", textAlign: "center", color: active ? "var(--teal)" : "var(--muted-cream)" }}>
            <p className="mono" style={{ margin: 0, fontSize: 8, letterSpacing: "0.20em" }}>{l}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function MockAttendance() {
  const cells = [
    "P", "P", "P", "A", "P", "P", "P",
    "P", "I", "P", "P", "P", "P", "P",
    "P", "P", "P", "P", "P",
  ];
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "36px 18px 16px", color: "var(--cream)", overflow: "hidden" }}>
      <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 14, color: "var(--teal)" }}>←</span>
        <p className="mono" style={{ margin: 0, fontSize: 9, letterSpacing: "0.22em" }}>ATTENDANCE</p>
        <span style={{ width: 14 }}></span>
      </div>

      <p className="display" style={{ margin: "12px 0 0", fontSize: 22, color: "var(--cream)" }}>Februari 2026</p>

      {/* Stats row */}
      <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6 }}>
        {[
          ["Hadir", "17", "var(--teal)"],
          ["Tidak", "02", "var(--burgundy)"],
          ["%", "92", "var(--cream)"],
        ].map(([l, v, c], i) => (
          <div key={i} style={{ padding: 10, background: "rgba(244,240,229,0.04)", border: "1px solid var(--line-strong)" }}>
            <p className="mono" style={{ margin: 0, fontSize: 7, letterSpacing: "0.22em", color: "var(--muted-cream)" }}>{l.toUpperCase()}</p>
            <p className="display" style={{ margin: "4px 0 0", fontSize: 22, color: c }}>{v}</p>
          </div>
        ))}
      </div>

      {/* Calendar mini */}
      <p className="mono" style={{ marginTop: 14, marginBottom: 6, fontSize: 8, letterSpacing: "0.22em", color: "var(--muted-cream)" }}>KALENDER LATIHAN</p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4 }}>
        {cells.map((c, i) => (
          <div key={i} style={{ aspectRatio: "1 / 1", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 9, color: c === "P" ? "var(--cream)" : c === "A" ? "var(--burgundy)" : "var(--teal)", background: c === "P" ? "rgba(20,184,166,0.10)" : c === "A" ? "rgba(185,28,60,0.18)" : "rgba(244,240,229,0.06)", border: c === "P" ? "1px solid rgba(20,184,166,0.4)" : "1px solid var(--line-strong)" }}>
            {c}
          </div>
        ))}
      </div>

      {/* Recent list */}
      <p className="mono" style={{ marginTop: 14, marginBottom: 4, fontSize: 8, letterSpacing: "0.22em", color: "var(--muted-cream)" }}>RIWAYAT</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 10 }}>
        {[
          ["12 Feb", "Hadir", "var(--teal)"],
          ["09 Feb", "Hadir", "var(--teal)"],
          ["05 Feb", "Izin", "var(--cream)"],
          ["02 Feb", "Hadir", "var(--teal)"],
        ].map(([d, s, c], i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--line)" }}>
            <span className="mono" style={{ letterSpacing: "0.16em", color: "var(--muted-cream)" }}>{d}</span>
            <span style={{ color: c, fontWeight: 500 }}>{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileScreenMockup({ variant = "login", label, imageUrl }) {
  let body;
  if (imageUrl) {
    body = (
      <div style={{ flex: 1, position: "relative", overflow: "hidden", background: "#000" }}>
        <img 
          src={imageUrl} 
          alt="Screen Preview" 
          style={{ 
            width: "100%", 
            height: "100%", 
            objectFit: "contain",
            display: "block"
          }} 
        />
      </div>
    );
  } else {
    if (variant === "login") body = <MockLogin />;
    else if (variant === "home") body = <MockHome />;
    else if (variant === "attendance") body = <MockAttendance />;
  }
  return <PhoneFrame label={label} hasImage={!!imageUrl}>{body}</PhoneFrame>;
}

window.MobileScreenMockup = MobileScreenMockup;