// iMessage thread — used in hero & scenario sections.
// Faithful to iMessage spacing/colors but generic enough not to feel like Apple lifted.

const Bubble = ({ from, children, time, status, voice, voiceLen = "0:14", typing }) => {
  const isMe = from === "me";
  return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: isMe ? "flex-end" : "flex-start",
      gap: 2,
      width: "100%",
    }}>
      {time && (
        <div style={{
          fontSize: 11, color: "#9a958d", fontWeight: 500,
          alignSelf: "center", margin: "10px 0 4px",
          letterSpacing: 0.2,
        }}>{time}</div>
      )}
      <div style={{
        background: isMe ? "#2f7eff" : "#e9e6e1",
        color: isMe ? "white" : "#1A1714",
        padding: voice ? "8px 12px" : "8px 14px",
        borderRadius: 20,
        borderBottomRightRadius: isMe ? 6 : 20,
        borderBottomLeftRadius: isMe ? 20 : 6,
        maxWidth: "78%",
        fontSize: 16,
        lineHeight: 1.32,
        fontWeight: 400,
        boxShadow: "0 1px 0 rgba(0,0,0,0.04)",
        wordBreak: "break-word",
      }}>
        {typing ? (
          <span style={{ display: "inline-flex", gap: 4, padding: "4px 2px" }}>
            <Dot delay={0} /><Dot delay={0.2} /><Dot delay={0.4} />
          </span>
        ) : voice ? (
          <VoiceWave len={voiceLen} dark={!isMe} />
        ) : children}
      </div>
      {status && isMe && (
        <div style={{ fontSize: 10.5, color: "#9a958d", marginRight: 4, marginTop: 2, letterSpacing: 0.2 }}>{status}</div>
      )}
    </div>
  );
};

const Dot = ({ delay }) => (
  <span style={{
    width: 7, height: 7, borderRadius: "50%", background: "#9a958d",
    animation: `imdot 1.2s ${delay}s infinite ease-in-out`,
  }} />
);

const VoiceWave = ({ len, dark }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "2px 4px" }}>
    <div style={{
      width: 26, height: 26, borderRadius: "50%",
      background: dark ? "#1A1714" : "white",
      color: dark ? "white" : "#2f7eff",
      display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700,
    }}>▶</div>
    <svg width="120" height="22" viewBox="0 0 120 22">
      {Array.from({ length: 30 }).map((_, i) => {
        const h = [4,8,14,18,12,6,10,16,20,14,8,4,12,18,16,10,6,12,20,14,8,4,10,16,12,18,14,8,6,4][i];
        return <rect key={i} x={i * 4} y={(22 - h) / 2} width="2.5" height={h} rx="1.25"
                     fill={dark ? "rgba(26,23,20,0.55)" : "rgba(255,255,255,0.85)"} />;
      })}
    </svg>
    <span style={{ fontSize: 13, color: dark ? "#1A1714" : "white", fontVariantNumeric: "tabular-nums" }}>{len}</span>
  </div>
);

const IMessageThread = ({ contact = "JUST", subtitle = "", messages = [], compact = false, signal = true, time = "now" }) => {
  return (
    <div style={{
      width: "100%", maxWidth: compact ? 340 : 380,
      background: "white",
      borderRadius: 38,
      border: "1px solid rgba(26,23,20,0.08)",
      boxShadow: "0 30px 60px -20px rgba(26,23,20,0.25), 0 8px 20px -8px rgba(26,23,20,0.15)",
      overflow: "hidden",
      fontFamily: "'Inter Tight', 'SF Pro Text', system-ui, sans-serif",
    }}>
      {/* Status bar */}
      <div style={{
        padding: "14px 26px 6px", display: "flex", justifyContent: "space-between",
        fontSize: 14, fontWeight: 600, color: "#1A1714",
        fontVariantNumeric: "tabular-nums",
      }}>
        <span>9:41</span>
        <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
          {/* signal */}
          <svg width="17" height="11" viewBox="0 0 17 11"><g fill="#1A1714">
            <rect x="0" y="7" width="3" height="4" rx="0.5" />
            <rect x="4.5" y="5" width="3" height="6" rx="0.5" />
            <rect x="9" y="2.5" width="3" height="8.5" rx="0.5" />
            <rect x="13.5" y="0" width="3" height="11" rx="0.5" opacity="0.35" />
          </g></svg>
          {/* battery */}
          <svg width="26" height="12" viewBox="0 0 26 12">
            <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" fill="none" stroke="#1A1714" opacity="0.45" />
            <rect x="2" y="2" width="18" height="8" rx="1.5" fill="#1A1714" />
            <rect x="23" y="3.5" width="2" height="5" rx="1" fill="#1A1714" opacity="0.45" />
          </svg>
        </span>
      </div>
      {/* Header */}
      <div style={{
        padding: "8px 16px 12px",
        borderBottom: "1px solid rgba(26,23,20,0.06)",
        display: "flex", flexDirection: "column", alignItems: "center",
      }}>
        <div style={{
          width: 42, height: 42, borderRadius: "50%",
          background: "linear-gradient(180deg,#1A1714,#3a342c)",
          color: "#FBF7EE", display: "grid", placeItems: "center",
          fontFamily: "'Caveat', cursive", fontSize: 22, fontWeight: 700,
          marginBottom: 4,
        }}>J</div>
        <div style={{ fontSize: 12, fontWeight: 500, color: "#1A1714" }}>{contact}</div>
        {subtitle && <div style={{ fontSize: 10.5, color: "#9a958d", marginTop: 1 }}>{subtitle}</div>}
      </div>
      {/* Messages */}
      <div style={{
        padding: "10px 12px 16px",
        display: "flex", flexDirection: "column", gap: 4,
        background: "white",
        minHeight: compact ? 280 : 360,
      }}>
        {messages.map((m, i) => <Bubble key={i} {...m} />)}
      </div>
      {/* Input bar */}
      <div style={{
        padding: "8px 12px 14px", display: "flex", alignItems: "center", gap: 8,
        borderTop: "1px solid rgba(26,23,20,0.06)",
      }}>
        <div style={{
          width: 30, height: 30, borderRadius: "50%", border: "1.5px solid #c8c2b8",
          display: "grid", placeItems: "center", color: "#9a958d", fontSize: 18, fontWeight: 300,
        }}>+</div>
        <div style={{
          flex: 1, height: 30, borderRadius: 16, border: "1.5px solid #e3ddd2",
          padding: "0 10px", display: "flex", alignItems: "center",
          fontSize: 13, color: "#9a958d",
        }}>iMessage</div>
        <div style={{
          width: 30, height: 30, borderRadius: "50%", background: "#1A1714",
          display: "grid", placeItems: "center", color: "white", fontSize: 14,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 3v9.5l4-4 1.5 1.5L12 16l-5.5-6L8 8.5l4 4V3z M5 19h14v2H5z" /></svg>
        </div>
      </div>
    </div>
  );
};

window.IMessageThread = IMessageThread;
window.Bubble = Bubble;