// Phone mockup components — high-fidelity recreations from Figma frames
// References (Figma):
//   ScreenInjuredLanding   → /Prototype/03.00.00.L-Mobile-Injured-Landing
//   ScreenOrthoAgent       → /Prototype/02.00.00.L-Mobile-OrthoAgent
//   ScreenRoadmap          → /Prototype/03.06.32.L-Mobile-Injured-Pathway-2-Dashboard-Phase-7
//   ScreenMRI              → /Prototype/03.06.01.L-Mobile-Injured-Pathway-2-MRI-Injury-Detected
//   ScreenHome             → /Prototype/01.01.01.L-Mobile-Home-Injured
//   ScreenCongrats         → /Prototype/03.10.00.L-Mobile-Injured-Injured-Recap-Congratulations-1

// ── Status bar (no Dynamic Island — matches Figma) ──
const StatusBar = ({ dark = true }) =>
<div className="phone-status" style={dark ? {} : { color: "#0A131F" }}>
    <div className="time">9:41</div>
    <div className="icons">
      <Icon.signal width={18} height={12} />
      <Icon.wifi width={16} height={12} />
      <Icon.battery width={26} height={12} />
    </div>
  </div>;

// ── Bottom Tab Bar (Injured nav — center is the "U" mark) ──
const TabBar = ({ active = "home", theme = "light" }) => {
  return (
    <div className="phone-tabbar" style={theme === "dark" ? { background: "rgba(255,255,255,0.95)" } : {}}>
      <Icon.home className={`tab ${active === "home" ? "active" : ""}`} />
      {active === "orthoagent" ? (
        <div className="tab-sparkles"><Icon.sparkles /></div>
      ) : (
        <Icon.sparkles className="tab" />
      )}
      <div className={`tab-center ${active === "injured" ? "active" : ""}`}>
        <InjuredLogo size={28} />
      </div>
      <Icon.user className="tab" />
      <Icon.settings className="tab" />
    </div>);
};

const PhoneShell = ({ children, theme = "dark", className = "", style = {} }) =>
<div className={`phone ${theme === "light" ? "phone-light" : ""} ${className}`} style={style}>
    <div className="phone-screen">
      {children}
    </div>
  </div>;

// ── Reusable OrthoAgent "Big Agent" gradient glyph ──
const BigAgentGlyph = ({ size = 56 }) => (
  <div style={{
    width: size,
    height: size * (83 / 76),
    background: "radial-gradient(circle at 30% 30%, #6BDAFF 0%, #0F8FEA 80%)",
    WebkitMaskImage: "url(assets/orthoagent-logo.svg)",
    maskImage: "url(assets/orthoagent-logo.svg)",
    WebkitMaskRepeat: "no-repeat",
    maskRepeat: "no-repeat",
    WebkitMaskSize: "contain",
    maskSize: "contain",
    filter: "drop-shadow(0 6px 20px rgba(15,143,234,0.45))"
  }} />
);

// ────────────────────────────────────────────────────────────
// 1) Injured Landing — "Are You Injured?"
// ────────────────────────────────────────────────────────────
const ScreenLanding = () =>
<PhoneShell theme="light">
    <StatusBar dark={false} />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "20px 24px 0", position: "relative" }}>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 26,
        textAlign: "center",
        letterSpacing: "-0.02em",
        color: "var(--ink-200)",
        marginTop: 30
      }}>
        Welcome, Gabriel
      </div>
      <div style={{ flex: 1 }} />
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 32,
        textAlign: "center",
        letterSpacing: "-0.02em",
        color: "var(--ink-300)",
        marginBottom: 22
      }}>
        Are You INJURED?
      </div>
      <button style={{
        background: "var(--brand)",
        color: "#fff",
        border: "none",
        padding: "14px 28px",
        borderRadius: 999,
        fontFamily: "var(--font-ui)",
        fontWeight: 700,
        fontSize: 14,
        margin: "0 auto 100px",
        cursor: "pointer",
        boxShadow: "0 12px 28px rgba(15,143,234,0.35)"
      }}>
        Start My Recovery
      </button>
    </div>
    <TabBar active="injured" theme="light" />
  </PhoneShell>;

// ────────────────────────────────────────────────────────────
// 2) OrthoAgent — Big-Agent logo + Ask bar + 2×2 chat history cards
// ────────────────────────────────────────────────────────────
const ChatHistoryCard = ({ when = "Today at 2:00 PM" }) => (
  <div style={{
    flex: 1,
    background: "rgba(255,255,255,0.04)",
    border: "1px solid rgba(255,255,255,0.06)",
    borderRadius: 14,
    padding: "14px 14px 12px",
    display: "flex",
    flexDirection: "column",
    gap: 8,
    minWidth: 0
  }}>
    <div style={{
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      fontSize: 13,
      lineHeight: 1.2,
      color: "rgba(255,255,255,0.55)"
    }}>
      When can I walk after my surgery?
    </div>
    <div style={{ fontSize: 10, color: "rgba(255,255,255,0.45)", fontFamily: "var(--font-ui)" }}>
      {when}
    </div>
    <div style={{ flex: 1 }} />
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "var(--font-ui)" }}>Continue Chat</div>
      <div style={{
        width: 18, height: 18, borderRadius: 9,
        background: "var(--brand)",
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>
        <Icon.chevronLeft width={9} height={9} style={{ transform: "rotate(180deg)", color: "#fff" }} />
      </div>
    </div>
  </div>
);

const ScreenOrthoAgent = () =>
<PhoneShell theme="dark">
    <StatusBar />
    <div style={{ padding: "24px 22px 0", flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 38 }}>
        <BigAgentGlyph size={56} />
      </div>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 32,
        color: "var(--brand)",
        letterSpacing: "-0.02em",
        textAlign: "center",
        marginTop: 14
      }}>
        OrthoAgent
      </div>
      <div style={{
        fontFamily: "var(--font-body)",
        fontWeight: 300,
        fontSize: 12,
        color: "rgba(255,255,255,0.6)",
        textAlign: "center",
        marginTop: 6,
        lineHeight: 1.5,
        padding: "0 18px"
      }}>
        Your go-to assistant for quick answers<br />about surgery, recovery, and PT.
      </div>
      <div style={{
        background: "rgba(255,255,255,0.05)",
        border: "1px solid rgba(255,255,255,0.08)",
        borderRadius: 14,
        padding: "11px 14px",
        display: "flex",
        alignItems: "center",
        gap: 10,
        marginTop: 28
      }}>
        <div style={{ flex: 1, fontSize: 12, color: "rgba(255,255,255,0.4)", fontFamily: "var(--font-ui)" }}>Ask Me Anything…</div>
        <Icon.image width={18} height={18} style={{ color: "var(--brand)" }} />
        <Icon.mic width={18} height={18} style={{ color: "var(--brand)" }} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 14 }}>
        <div style={{ display: "flex", gap: 10 }}>
          <ChatHistoryCard when="Today at 2:00 PM" />
          <ChatHistoryCard when="Today at 2:00 PM" />
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <ChatHistoryCard when="Monday at 3:11 PM" />
          <ChatHistoryCard when="Friday at 11:00 AM" />
        </div>
      </div>
    </div>
    <TabBar active="orthoagent" theme="dark" />
  </PhoneShell>;

// ────────────────────────────────────────────────────────────
// 3) Recovery Roadmap — Plan-3: full-width green bars, "Time" pills, divider lines
// ────────────────────────────────────────────────────────────
const RoadmapStep = ({ complete, label, status, withDivider = true }) =>
  <div style={{ padding: "10px 0 8px" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
      <div style={{
        width: 18, height: 18, borderRadius: 9,
        background: complete ? "var(--success)" : "rgba(255,255,255,0.1)",
        display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0
      }}>
        {complete && <Icon.check width={9} height={9} style={{ color: "#fff" }} />}
      </div>
      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: 14,
        fontWeight: 700,
        color: complete ? "rgba(255,255,255,0.45)" : "#fff",
        flex: 1
      }}>{label}</div>
      <div style={{
        background: "var(--brand)",
        color: "#fff",
        fontSize: 9,
        fontWeight: 700,
        padding: "3px 9px",
        borderRadius: 999,
        fontFamily: "var(--font-ui)"
      }}>Time</div>
    </div>
    <div style={{
      height: 3, borderRadius: 2,
      background: complete ? "var(--success)" : "rgba(255,255,255,0.1)",
      marginBottom: 6
    }} />
    <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "var(--font-ui)" }}>{status}</div>
    {withDivider && <div style={{ height: 1, background: "rgba(255,255,255,0.06)", marginTop: 10 }} />}
  </div>;

const ScreenRoadmap = () =>
<PhoneShell theme="dark">
    <StatusBar />
    <div style={{ padding: "20px 22px 0", flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 24,
        color: "#fff",
        letterSpacing: "-0.01em",
        lineHeight: 1.15,
        marginBottom: 6
      }}>
        Your Recovery Roadmap
      </div>
      <div style={{
        fontSize: 11.5,
        color: "rgba(255,255,255,0.55)",
        lineHeight: 1.5,
        marginBottom: 14,
        fontFamily: "var(--font-ui)"
      }}>
        Here is your recovery roadmap to get<br />you back to doing what you love.
      </div>
      <RoadmapStep complete label="Injury Intake" status="Intake Completed" />
      <div style={{
        background: "rgba(230,246,255,0.95)",
        border: "1px solid rgba(15,143,234,0.15)",
        color: "var(--brand)",
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 13,
        textAlign: "center",
        padding: "11px 14px",
        borderRadius: 999,
        margin: "4px 0 8px"
      }}>Injury Report</div>
      <div style={{ height: 1, background: "rgba(255,255,255,0.06)", marginBottom: 0 }} />
      <RoadmapStep complete label="Office Consultation" status="Consultation Completed" />
      <RoadmapStep complete label="Surgery Date" status="Surgery Completed" />
      <RoadmapStep complete label="Physical Therapy" status="Schedule with PT." withDivider={false} />
    </div>
    <TabBar active="home" theme="dark" />
  </PhoneShell>;

// ────────────────────────────────────────────────────────────
// 4) MRI Findings — light, Big-Agent glyph, bullets, agent-analysis, timeline
// ────────────────────────────────────────────────────────────
const ScreenMRI = () =>
<PhoneShell theme="light">
    <StatusBar dark={false} />
    <div style={{ padding: "16px 22px 0", flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ marginBottom: 12 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 18,
          background: "var(--ink-50)",
          display: "flex", alignItems: "center", justifyContent: "center"
        }}>
          <Icon.chevronLeft width={14} height={14} style={{ color: "var(--ink-500)" }} />
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 4 }}>
        <BigAgentGlyph size={48} />
      </div>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 26,
        color: "var(--brand)",
        letterSpacing: "-0.02em",
        textAlign: "center",
        marginTop: 12,
        marginBottom: 16
      }}>
        Your MRI Findings
      </div>
      <ul style={{
        fontSize: 12,
        lineHeight: 1.55,
        color: "var(--ink-900)",
        listStylePosition: "outside",
        marginLeft: 18,
        marginBottom: 16,
        fontFamily: "var(--font-ui)",
        fontWeight: 500
      }}>
        <li>ACL is completely torn</li>
        <li>Medial Meniscus has a tear and is displaced</li>
        <li>Cartilage loss on the inside of the top shin bone</li>
        <li>Moderate fluid build in the knee joint</li>
      </ul>
      <div style={{
        background: "#fff",
        borderRadius: 16,
        padding: "14px 14px 16px",
        boxShadow: "0 12px 30px -8px rgba(10,19,31,0.12)",
        border: "1px solid var(--ink-100)",
        marginBottom: 12
      }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, marginBottom: 6 }}>Recovery Timeline</div>
        <div style={{ fontSize: 10.5, color: "var(--ink-400)", marginBottom: 10, lineHeight: 1.5, fontFamily: "var(--font-ui)" }}>
          For this injury, patients typically recover within 6 to 12 months.
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 4, fontFamily: "var(--font-display)" }}>Advanced Recovery?</div>
        <div style={{ fontSize: 10, color: "var(--ink-400)", marginBottom: 10, lineHeight: 1.5, fontFamily: "var(--font-ui)" }}>
          Surgical techniques like LEAP and Internal Tape may allow you to return as quickly as 6 months.
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-400)", fontWeight: 700, marginBottom: 4, fontFamily: "var(--font-ui)" }}>
          <span>0m</span><span>3m</span><span>6m</span><span>9m</span><span>12m</span>
        </div>
        <div style={{
          height: 14, borderRadius: 999,
          background: "var(--ink-50)",
          position: "relative",
          overflow: "hidden"
        }}>
          <div style={{
            position: "absolute", left: 0, top: 0, bottom: 0, width: "50%",
            background: "linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand) 100%)",
            borderRadius: 999
          }} />
          <div style={{
            position: "absolute", left: "50%", top: 1, bottom: 1, width: "50%",
            background: "rgba(15,143,234,0.08)",
            border: "1px dashed rgba(15,143,234,0.4)",
            borderRadius: 999
          }} />
        </div>
      </div>
    </div>
    <TabBar active="injured" theme="light" />
  </PhoneShell>;

// ────────────────────────────────────────────────────────────
// 5) BONUS: Home Dashboard — "Welcome Home, Gabriel" + 75% Recovery Journey ring
// ────────────────────────────────────────────────────────────
const ScreenHome = () =>
<PhoneShell theme="dark">
    <StatusBar />
    <div style={{ padding: "20px 22px 0", flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28
      }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontWeight: 700,
          fontSize: 22,
          color: "#fff",
          letterSpacing: "-0.01em",
          lineHeight: 1.1
        }}>Welcome Home,<br />Gabriel</div>
        <div style={{
          width: 32, height: 32, borderRadius: 16,
          background: "var(--brand)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0
        }}>
          <InjuredLogo size={18} />
        </div>
      </div>

      {/* Recovery Journey ring */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: 22
      }}>
        <div>
          <div style={{
            fontFamily: "var(--font-display)",
            fontWeight: 700,
            fontSize: 18,
            color: "rgba(255,255,255,0.85)",
            marginBottom: 4
          }}>Recovery Journey</div>
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-ui)" }}>You're Almost There!</div>
        </div>
        <div style={{
          width: 76, height: 76,
          borderRadius: "50%",
          background: `conic-gradient(var(--success) 0deg, var(--success) 270deg, rgba(255,255,255,0.06) 270deg, rgba(255,255,255,0.06) 360deg)`,
          display: "flex", alignItems: "center", justifyContent: "center",
          filter: "drop-shadow(0 0 18px rgba(52,199,89,0.45))",
          position: "relative"
        }}>
          <div style={{
            position: "absolute", inset: 8,
            background: "var(--ink-900)",
            borderRadius: "50%",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--font-display)",
            fontWeight: 700,
            fontSize: 14,
            color: "rgba(255,255,255,0.65)"
          }}>75%</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 10, marginBottom: 22 }}>
        <button style={{
          flex: 1, padding: "10px 12px", borderRadius: 999,
          background: "rgba(230,246,255,0.95)",
          color: "var(--brand)",
          fontFamily: "var(--font-display)",
          fontWeight: 700, fontSize: 12,
          border: "none"
        }}>Today's Plan</button>
        <button style={{
          flex: 1, padding: "10px 12px", borderRadius: 999,
          background: "var(--brand)",
          color: "#fff",
          fontFamily: "var(--font-display)",
          fontWeight: 700, fontSize: 12,
          border: "none"
        }}>Roadmap</button>
      </div>

      <div style={{
        background: "rgba(255,255,255,0.03)",
        border: "1px solid rgba(255,255,255,0.06)",
        borderRadius: 18,
        padding: "16px 16px 18px",
      }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontWeight: 700,
          fontSize: 16,
          color: "var(--brand)",
          textAlign: "center",
          marginBottom: 6
        }}>Recovery Summary</div>
        <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", marginBottom: 10, fontFamily: "var(--font-ui)" }}>Updated: June 3, 2025</div>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.75)", lineHeight: 1.55, marginBottom: 14, fontFamily: "var(--font-ui)" }}>
          You've completed 5 out of 7 prescribed exercises this week, and your next session is scheduled for June 6 at 9:00 AM.
        </div>
        <button style={{
          background: "var(--brand)",
          color: "#fff",
          border: "none",
          padding: "9px 18px",
          borderRadius: 999,
          fontFamily: "var(--font-display)",
          fontWeight: 700,
          fontSize: 12,
          cursor: "pointer"
        }}>Learn More</button>
      </div>
    </div>
    <TabBar active="home" theme="dark" />
  </PhoneShell>;

// ────────────────────────────────────────────────────────────
// 6) BONUS: Congratulations Recap — Dark celebration screen
// ────────────────────────────────────────────────────────────
const ScreenCongrats = () =>
<PhoneShell theme="dark">
    <StatusBar />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "0 28px", position: "relative", overflow: "hidden" }}>
      {/* soft glow */}
      <div style={{
        position: "absolute",
        width: 320, height: 320,
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(15,143,234,0.25) 0%, rgba(15,143,234,0) 65%)",
        top: "30%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        filter: "blur(10px)"
      }} />
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 32,
        color: "var(--brand)",
        letterSpacing: "-0.02em",
        textAlign: "center",
        lineHeight: 1.1,
        position: "relative"
      }}>
        Congratulations,<br />Gabriel!
      </div>
    </div>
  </PhoneShell>;

Object.assign(window, {
  PhoneShell, StatusBar, TabBar,
  ScreenLanding, ScreenOrthoAgent, ScreenRoadmap, ScreenMRI,
  ScreenHome, ScreenCongrats,
  BigAgentGlyph
});