/* global React */
// FirstTakes app — device chrome & shared shell pieces.
// Composes design-system components from the compiled bundle.

const { Icon, IconButton, StreakPill } = window.FirstTakesDesignSystem_adb0cc;

/** iPhone-ish bezel. Screen is a fixed 390×844 dark canvas. */
function PhoneFrame({ children }) {
  return (
    <div
      style={{
        width: 390,
        height: 844,
        background: "var(--bg)",
        borderRadius: 52,
        border: "11px solid #000",
        boxShadow: "var(--shadow-floating)",
        position: "relative",
        overflow: "hidden",
        flex: "none",
      }}
    >
      {/* notch */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: "50%",
          transform: "translateX(-50%)",
          width: 128,
          height: 30,
          background: "#000",
          borderRadius: "0 0 18px 18px",
          zIndex: 30,
        }}
      />
      {children}
    </div>
  );
}

/** Top status bar (time + indicators). */
function StatusBar() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "12px 26px 4px",
        height: 44,
        boxSizing: "border-box",
      }}
    >
      <span className="ft-num" style={{ fontSize: 14, fontWeight: 600, color: "var(--text)" }}>
        9:41
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--text)" }}>
        <Icon name="signal_cellular_alt" size={16} fill />
        <Icon name="wifi" size={16} fill />
        <Icon name="battery_full" size={16} fill />
      </div>
    </div>
  );
}

/** Left-aligned tab header (title + trailing actions). */
function AppHeader({ title, streak, actions }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 8,
        padding: "12px 8px 8px 20px",
      }}
    >
      <span style={{ flex: 1, font: "var(--text-title)" }}>{title}</span>
      {actions}
      {streak != null && (
        <div style={{ marginRight: 12 }}>
          <StreakPill count={streak} />
        </div>
      )}
    </div>
  );
}

// ---- Floating pill nav (mirrors lib/features/shell/floating_nav.dart) -------
// Geometry from the app: 64px bar, 60px centre pill protruding 22px above the
// bar's top edge, with a scallop (radius 36) carved out of the bar beneath it.
const NAV_BAR_H = 64;
const NAV_PILL = 60;
const NAV_PROTRUDE = 22;
const NAV_CUTOUT_R = NAV_PILL / 2 + 6;

/**
 * Floating pill bottom navigation: Friends · centre action · Profile.
 * The centre button morphs with the challenge lifecycle — `bolt`/"Today"
 * before a prompt, `videocam`/"Record" while a prompt is live and unposted,
 * `check`/"Today" once posted — the icon carries the state, the label stays
 * truthful about the destination (all three land on the same Today tab).
 * Side-tab labels show only on the active tab.
 * Rendered as an overlay: absolutely positioned, floating over tab content.
 */
function FloatingNav({ active, center = "record", friendsBadge = 0, onChange = () => {} }) {
  // In bar coordinates the scallop's centre sits NAV_PILL/2 − NAV_PROTRUDE
  // below the bar's top edge (see _NavBarPainter in the app).
  const notchY = NAV_PILL / 2 - NAV_PROTRUDE;
  const mask = `radial-gradient(circle at 50% ${notchY}px, transparent ${NAV_CUTOUT_R}px, #000 ${NAV_CUTOUT_R + 0.5}px)`;

  const centerFace = {
    today: { icon: "bolt", label: "Today" },
    record: { icon: "videocam", label: "Record" },
    done: { icon: "check", label: "Today" },
  }[center] || { icon: "bolt", label: "Today" };

  const sideTab = (key, icon, label, badge) => {
    const selected = active === key;
    return (
      <button
        onClick={() => onChange(key)}
        style={{
          flex: 1,
          background: "none",
          border: "none",
          cursor: "pointer",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 2,
          padding: 0,
          height: "100%",
          color: selected ? "var(--text)" : "var(--text-muted)",
        }}
      >
        <span style={{ position: "relative", display: "inline-flex" }}>
          <Icon name={icon} size={26} fill={selected} color="currentColor" />
          {badge > 0 && (
            <span
              style={{
                position: "absolute",
                right: -7,
                top: -4,
                minWidth: 16,
                boxSizing: "border-box",
                padding: "1px 5px",
                borderRadius: 999,
                background: "var(--accent)",
                border: "1.5px solid var(--surface)",
                color: "var(--on-accent)",
                font: "700 10px/1.2 var(--font-ui)",
                textAlign: "center",
              }}
            >
              {badge > 9 ? "9+" : badge}
            </span>
          )}
        </span>
        {selected && (
          <span style={{ font: "700 9px/1 var(--font-ui)", color: "var(--text)" }}>{label}</span>
        )}
      </button>
    );
  };

  return (
    <div
      style={{
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 26,
        display: "flex",
        justifyContent: "center",
        zIndex: 20,
        pointerEvents: "none",
      }}
    >
      <div
        style={{
          position: "relative",
          width: 351, // min(90% of the 390 screen, 360)
          height: NAV_BAR_H + NAV_PROTRUDE,
          pointerEvents: "auto",
        }}
      >
        {/* The bar itself, with the scallop masked out of its top-centre. */}
        <div
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            height: NAV_BAR_H,
            borderRadius: 999,
            background: "rgba(22,22,22,0.96)",
            border: "1px solid var(--border)",
            boxShadow: "var(--shadow-floating)",
            WebkitMask: mask,
            mask,
            display: "flex",
            alignItems: "stretch",
            boxSizing: "border-box",
          }}
        >
          {sideTab("friends", "group", "Friends", friendsBadge)}
          {/* Reserve the centre slot; the button floats over it. */}
          <div style={{ width: 72, flex: "none" }} />
          {sideTab("profile", "person", "Profile")}
        </div>
        {/* The centre button, nested into the notch and protruding above. */}
        <button
          onClick={() => onChange("today")}
          style={{
            position: "absolute",
            top: 0,
            left: "50%",
            transform: "translateX(-50%)",
            background: "none",
            border: "none",
            padding: 0,
            cursor: "pointer",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 6,
          }}
        >
          <span
            style={{
              width: NAV_PILL,
              height: NAV_PILL,
              borderRadius: "50%",
              background: "var(--accent)",
              // Matches the bar's outline so circle + notch read as one edge.
              border: "1px solid var(--border)",
              boxSizing: "border-box",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Icon name={centerFace.icon} size={26} fill color="var(--on-accent)" />
          </span>
          <span style={{ font: "700 9px/1 var(--font-ui)", color: "var(--accent)" }}>
            {centerFace.label}
          </span>
        </button>
      </div>
    </div>
  );
}

/** Neutral video-thumbnail placeholder (the app shows real takes; we have none).
 * `aspect` mirrors the app: feed cards are 4:5 portrait, archive tiles square. */
function MediaTile({ radius = 10, aspect = "1 / 1", children, style, mediaSlot }) {
  // Optional real-photo source, wired up by the marketing kit via window.FTMedia.
  // When absent/disabled, falls back to the neutral placeholder (app & App Store).
  const m = window.FTMedia;
  const url = m && m.enabled && mediaSlot ? m.resolveTile(mediaSlot) : null;
  const tappable = false; // images are fixed on the marketing site — no tap-to-swap
  return (
    <div
      onClick={tappable ? () => m.cycle(mediaSlot) : undefined}
      title={tappable ? "Tap to swap photo" : undefined}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: aspect,
        borderRadius: radius,
        overflow: "hidden",
        cursor: tappable ? "pointer" : undefined,
        background:
          "radial-gradient(120% 120% at 30% 20%, #2a2a2a 0%, var(--surface-2) 55%, #1b1b1b 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        ...style,
      }}
    >
      {url ? (
        <img
          src={url}
          alt=""
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: m.fit === "contain" ? "contain" : "cover", filter: m.bw ? "grayscale(1)" : "none" }}
        />
      ) : (
        <Icon name="play_circle" size={44} color="rgba(255,255,255,0.85)" />
      )}
      {children}
    </div>
  );
}

Object.assign(window, { PhoneFrame, StatusBar, AppHeader, FloatingNav, MediaTile });