/* global React, COPY, LANGS */
const { useState, useEffect } = React;

// ───────────────────────────────────────────────────
// Icons (inline SVG)
// ───────────────────────────────────────────────────
const Icon = {
  auto: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
    </svg>
  ),
  free: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2l2.4 5.6L20 8.4l-4.2 4 1 5.8L12 15.5 7.2 18.2l1-5.8L4 8.4l5.6-.8z"/>
    </svg>
  ),
  photo: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <circle cx="8.5" cy="10.5" r="1.5"/>
      <path d="M21 15l-5-5L5 19"/>
    </svg>
  ),
  dict: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1 0-4h13"/>
      <path d="M9 7h6"/>
    </svg>
  ),
  voice: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="3" width="6" height="12" rx="3"/>
      <path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>
    </svg>
  ),
  natural: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7-5.2-7-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.8-7 11-7 11"/>
      <path d="M9 11l2 2 4-4" />
    </svg>
  ),
  stats: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/>
    </svg>
  ),
  alt: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 7h12l-3-3M4 7l3 3M20 17H8l3 3M20 17l-3-3"/>
    </svg>
  ),
  reverse: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 12a9 9 0 0 1-15 6.7L3 16"/>
      <path d="M21 3v5h-5M3 21v-5h5"/>
    </svg>
  ),
  arrow: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7"/>
    </svg>
  ),
  send: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2.5 21l19-9-19-9v7l13 2-13 2z"/>
    </svg>
  ),
};

// ───────────────────────────────────────────────────
// iPhone mockup with Telegram chat
// ───────────────────────────────────────────────────
function PhoneFrame({ children, scale = 1 }) {
  return (
    <div style={{
      transform: `scale(${scale})`,
      transformOrigin: "center center",
      width: 360,
      height: 740,
      borderRadius: 52,
      background: "#0a0a0e",
      padding: 12,
      border: "1px solid rgba(255,255,255,0.1)",
      boxShadow: "0 60px 140px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset",
      position: "relative",
    }}>
      {/* Side buttons */}
      <div style={{ position: "absolute", left: -2, top: 130, width: 4, height: 32, background: "#1a1a20", borderRadius: 2 }}></div>
      <div style={{ position: "absolute", left: -2, top: 180, width: 4, height: 60, background: "#1a1a20", borderRadius: 2 }}></div>
      <div style={{ position: "absolute", left: -2, top: 250, width: 4, height: 60, background: "#1a1a20", borderRadius: 2 }}></div>
      <div style={{ position: "absolute", right: -2, top: 200, width: 4, height: 90, background: "#1a1a20", borderRadius: 2 }}></div>

      <div style={{
        width: "100%",
        height: "100%",
        borderRadius: 42,
        overflow: "hidden",
        background: "#17212B",
        position: "relative",
      }}>
        {/* Dynamic Island */}
        <div style={{
          position: "absolute",
          top: 10,
          left: "50%",
          transform: "translateX(-50%)",
          width: 110,
          height: 32,
          background: "#000",
          borderRadius: 999,
          zIndex: 30,
        }}></div>
        {children}
      </div>
    </div>
  );
}

function StatusBar() {
  return (
    <div style={{
      height: 50,
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      padding: "0 28px",
      paddingTop: 14,
      color: "#fff",
      fontSize: 15,
      fontWeight: 600,
      fontFamily: "-apple-system, system-ui",
    }}>
      <span>9:41</span>
      <span style={{ display: "inline-flex", gap: 5, alignItems: "center" }}>
        <svg width="17" height="11" viewBox="0 0 17 11" fill="#fff"><rect x="0" y="6" width="3" height="5" rx="0.6"/><rect x="4.5" y="4" width="3" height="7" rx="0.6"/><rect x="9" y="2" width="3" height="9" rx="0.6"/><rect x="13.5" y="0" width="3" height="11" rx="0.6"/></svg>
        <svg width="24" height="11" viewBox="0 0 24 11" fill="none"><rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="#fff" strokeOpacity="0.5"/><rect x="2" y="2" width="17" height="7" rx="1.2" fill="#fff"/><path d="M22 3.5v4c0.7-0.2 1.2-0.9 1.2-2s-0.5-1.8-1.2-2z" fill="#fff" fillOpacity="0.5"/></svg>
      </span>
    </div>
  );
}

function TgHeader({ name = "AI Translate", status = "online", lang }) {
  const t = COPY[lang];
  return (
    <div style={{
      background: "#212D3B",
      padding: "8px 12px 10px",
      display: "flex",
      alignItems: "center",
      gap: 12,
      borderBottom: "1px solid rgba(0,0,0,0.2)",
      color: "#fff",
    }}>
      <div style={{ color: "#5EB5F7", fontSize: 22, fontWeight: 400, paddingTop: 2 }}>‹</div>
      <div style={{
        width: 36, height: 36, borderRadius: "50%",
        background: "linear-gradient(135deg, #5EB5F7, #7B6CF6)",
        display: "grid", placeItems: "center",
        fontWeight: 700, fontSize: 14, color: "#fff",
      }}>AI</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.1 }}>{name}</div>
        <div style={{ fontSize: 11, color: "#82a0bc" }}>{lang === "ru" ? "в сети" : status}</div>
      </div>
      <div style={{ color: "#5EB5F7", fontSize: 18 }}>⋮</div>
    </div>
  );
}

function Bubble({ from = "user", children, accent }) {
  const isUser = from === "user";
  return (
    <div style={{
      display: "flex",
      justifyContent: isUser ? "flex-end" : "flex-start",
      padding: "0 10px",
      marginBottom: 6,
    }}>
      <div style={{
        maxWidth: "78%",
        padding: "8px 12px 10px",
        borderRadius: 12,
        background: isUser ? (accent || "#3A8CC9") : "#212D3B",
        color: "#fff",
        fontSize: 14,
        lineHeight: 1.35,
        position: "relative",
        borderBottomRightRadius: isUser ? 4 : 12,
        borderBottomLeftRadius: isUser ? 12 : 4,
        boxShadow: "0 1px 1px rgba(0,0,0,0.15)",
      }}>
        {children}
      </div>
    </div>
  );
}

function PinnedBar({ lang }) {
  const text = lang === "ru" ? "Перевожу на" : "Translating to";
  return (
    <div style={{
      background: "rgba(94, 181, 247, 0.08)",
      borderLeft: "2px solid #5EB5F7",
      padding: "6px 10px 6px 12px",
      margin: "8px 10px 12px",
      borderRadius: 4,
      fontSize: 12,
      color: "#fff",
    }}>
      <div style={{ color: "#5EB5F7", fontWeight: 600, fontSize: 11 }}>📌 Pinned</div>
      <div style={{ marginTop: 1 }}>{text} 🇷🇺 Русский</div>
    </div>
  );
}

function ChatBackground({ children }) {
  return (
    <div style={{
      flex: 1,
      background: "#0E1621",
      backgroundImage: "radial-gradient(ellipse at top, rgba(94,181,247,0.05), transparent 50%)",
      overflow: "hidden",
      paddingBottom: 8,
    }}>
      {children}
    </div>
  );
}

// Hero phone — "Hello, world" example showing auto-detect
function HeroChat({ lang, accent }) {
  const t = lang === "ru";
  return (
    <>
      <StatusBar/>
      <TgHeader lang={lang}/>
      <ChatBackground>
        <PinnedBar lang={lang}/>
        <Bubble from="user" accent={accent}>How are you holding up after all that?</Bubble>
        <div style={{ padding: "0 10px", marginBottom: 6, display: "flex", justifyContent: "flex-start" }}>
          <div style={{
            maxWidth: "82%",
            background: "#212D3B",
            borderRadius: 12,
            borderBottomLeftRadius: 4,
            padding: "8px 12px 10px",
            color: "#fff",
            fontSize: 13,
          }}>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              background: "rgba(0,0,0,0.25)",
              padding: "6px 8px",
              borderRadius: 6,
              fontSize: 13,
              color: "#fff",
              marginBottom: 6,
            }}>
              Ну как ты, отошёл уже после всего?
            </div>
            <div style={{ fontSize: 11, color: "#82a0bc", fontStyle: "italic", marginBottom: 8 }}>
              💾 {t ? "тапни, чтобы скопировать" : "tap to copy"}
            </div>
            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
              <Pill>Alternatives</Pill>
              <Pill>↩ Reverse</Pill>
              <Pill>📊 Stats</Pill>
            </div>
          </div>
        </div>
        <Bubble from="user" accent={accent}>こんにちは、元気？</Bubble>
        <div style={{ padding: "0 10px", marginBottom: 6, display: "flex", justifyContent: "flex-start" }}>
          <div style={{
            maxWidth: "82%",
            background: "#212D3B",
            borderRadius: 12,
            borderBottomLeftRadius: 4,
            padding: "8px 12px 10px",
            color: "#fff",
            fontSize: 13,
          }}>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              background: "rgba(0,0,0,0.25)",
              padding: "6px 8px",
              borderRadius: 6,
              fontSize: 13,
            }}>
              Привет, как ты?
            </div>
          </div>
        </div>
      </ChatBackground>
      <ReplyKeyboard lang={lang}/>
    </>
  );
}

function Pill({ children }) {
  return (
    <div style={{
      fontSize: 11,
      padding: "4px 9px",
      background: "rgba(94,181,247,0.15)",
      color: "#7CC1F4",
      borderRadius: 999,
      fontWeight: 500,
    }}>{children}</div>
  );
}

function ReplyKeyboard({ lang }) {
  const t = lang === "ru";
  return (
    <div style={{
      background: "#17212B",
      padding: "8px 6px 16px",
      borderTop: "1px solid rgba(0,0,0,0.2)",
    }}>
      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
        <KbBtn flex={2}>{t ? "Сменить на" : "Switch to"} 🇬🇧 English</KbBtn>
        <KbBtn flex={1}>🌐 Languages</KbBtn>
      </div>
      <div style={{ display: "flex", gap: 4 }}>
        <KbBtn flex={1}>💬 Feedback</KbBtn>
        <KbBtn flex={1}>📋 History</KbBtn>
        <KbBtn flex={0.5}>⭐</KbBtn>
      </div>
    </div>
  );
}

function KbBtn({ children, flex = 1 }) {
  return (
    <div style={{
      flex,
      background: "#2B3A4D",
      padding: "10px 12px",
      borderRadius: 6,
      fontSize: 13,
      color: "#fff",
      textAlign: "center",
      border: "1px solid rgba(255,255,255,0.04)",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
    }}>{children}</div>
  );
}

// Demo phone — Photo OCR scenario
function DemoChat({ lang, accent }) {
  const t = lang === "ru";
  return (
    <>
      <StatusBar/>
      <TgHeader lang={lang}/>
      <ChatBackground>
        <PinnedBar lang={lang}/>

        {/* Photo bubble */}
        <div style={{ padding: "0 10px", marginBottom: 6, display: "flex", justifyContent: "flex-end" }}>
          <div style={{
            background: accent || "#3A8CC9",
            borderRadius: 12,
            borderBottomRightRadius: 4,
            overflow: "hidden",
            width: 180,
          }}>
            <div style={{
              height: 110,
              background: "linear-gradient(135deg, #2a3845, #1a2330)",
              position: "relative",
              display: "grid",
              placeItems: "center",
              color: "rgba(255,255,255,0.7)",
              fontSize: 11,
              fontFamily: "ui-monospace, monospace",
              padding: 12,
              textAlign: "left",
            }}>
              <div style={{
                position: "absolute", inset: 8,
                border: "1px dashed rgba(255,255,255,0.25)",
                borderRadius: 4,
              }}></div>
              <div style={{ position: "relative", zIndex: 1, color: "#cfd9e4", lineHeight: 1.4 }}>
                Trabajaba en silencio,<br/>
                con la paciencia<br/>
                de un viejo relojero…
              </div>
            </div>
            <div style={{ padding: "5px 10px 7px", fontSize: 11, color: "rgba(255,255,255,0.7)" }}>
              📷 IMG_4521.jpg
            </div>
          </div>
        </div>

        {/* OCR result */}
        <div style={{ padding: "0 10px", marginBottom: 6, display: "flex", justifyContent: "flex-start" }}>
          <div style={{
            maxWidth: "82%",
            background: "#212D3B",
            borderRadius: 12,
            borderBottomLeftRadius: 4,
            padding: "8px 12px 10px",
            color: "#fff",
            fontSize: 12,
          }}>
            <div style={{ fontStyle: "italic", color: "#82a0bc", marginBottom: 4 }}>
              {t ? "Оригинал:" : "Original:"}
            </div>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              background: "rgba(0,0,0,0.25)",
              padding: "6px 8px",
              borderRadius: 6,
              fontSize: 12,
            }}>
              Trabajaba en silencio, con la paciencia de un viejo relojero…
            </div>
          </div>
        </div>

        <div style={{ padding: "0 10px", marginBottom: 6, display: "flex", justifyContent: "flex-start" }}>
          <div style={{
            maxWidth: "82%",
            background: "#212D3B",
            borderRadius: 12,
            borderBottomLeftRadius: 4,
            padding: "8px 12px 10px",
            color: "#fff",
            fontSize: 12,
          }}>
            <div style={{ fontStyle: "italic", color: "#82a0bc", marginBottom: 4 }}>
              {t ? "Перевод:" : "Translation:"}
            </div>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              background: "rgba(0,0,0,0.25)",
              padding: "6px 8px",
              borderRadius: 6,
              fontSize: 12,
              color: "#fff",
              marginBottom: 8,
            }}>
              Он работал молча, с терпением старого часовщика…
            </div>
            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
              <Pill>Alternatives</Pill>
              <Pill>↩ Reverse</Pill>
            </div>
          </div>
        </div>
      </ChatBackground>
      <ReplyKeyboard lang={lang}/>
    </>
  );
}

window.PhoneFrame = PhoneFrame;
window.HeroChat = HeroChat;
window.DemoChat = DemoChat;
window.Icon = Icon;
