import { useState, useRef, useEffect } from "react";

const PROXY_SERVICES = [
  { name: "Ultraviolet", url: "https://uv.holyubofficial.net/", icon: "🌐" },
  { name: "Holy Unblocker", url: "https://www.holyubofficial.net/", icon: "🔓" },
  { name: "Interstellar", url: "https://interstellar.baby/", icon: "🚀" },
];

const QUICK_LINKS = [
  { name: "Google", url: "https://google.com", icon: "🔍" },
  { name: "YouTube", url: "https://youtube.com", icon: "📺" },
  { name: "Wikipedia", url: "https://wikipedia.org", icon: "📚" },
  { name: "Reddit", url: "https://reddit.com", icon: "🗨️" },
  { name: "Twitter", url: "https://twitter.com", icon: "🐦" },
  { name: "GitHub", url: "https://github.com", icon: "💻" },
];

export default function ProxyApp() {
  const [tab, setTab] = useState("home");
  const [inputUrl, setInputUrl] = useState("");
  const [activeProxy, setActiveProxy] = useState(PROXY_SERVICES[0]);
  const [iframeUrl, setIframeUrl] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [history, setHistory] = useState([]);
  const [theme, setTheme] = useState("dark");
  const [cloakTitle, setCloakTitle] = useState("ZXS Lite");
  const inputRef = useRef(null);

  const isDark = theme === "dark";

  const colors = {
    bg: isDark ? "#0d1117" : "#f0f4f8",
    bgCard: isDark ? "#161b22" : "#ffffff",
    border: isDark ? "#30363d" : "#d1d9e0",
    text: isDark ? "#e6edf3" : "#1c2128",
    muted: isDark ? "#8b949e" : "#57606a",
    accent: "#3ac3ab",
    accentDark: "#12ae9a",
  };

  const styles = {
    app: {
      display: "flex",
      flexDirection: "column",
      height: "100vh",
      background: colors.bg,
      color: colors.text,
      fontFamily: "'Segoe UI', Roboto, sans-serif",
      overflow: "hidden",
    },
    header: {
      background: colors.bgCard,
      borderBottom: `1px solid ${colors.border}`,
      padding: "0.8rem 1.5rem",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: "1rem",
      flexShrink: 0,
    },
    logo: {
      fontWeight: 700,
      fontSize: "1.2rem",
      color: colors.accent,
      whiteSpace: "nowrap",
    },
    urlBar: {
      flex: 1,
      display: "flex",
      gap: "0.5rem",
      alignItems: "center",
    },
    input: {
      flex: 1,
      background: colors.bg,
      border: `1px solid ${colors.border}`,
      borderRadius: "8px",
      color: colors.text,
      padding: "0.5rem 1rem",
      fontSize: "0.9rem",
      outline: "none",
    },
    btnPrimary: {
      background: colors.accent,
      border: "none",
      color: "#fff",
      borderRadius: "8px",
      padding: "0.5rem 1rem",
      cursor: "pointer",
      fontWeight: 600,
      fontSize: "0.85rem",
    },
    btnSecondary: {
      background: "transparent",
      border: `1px solid ${colors.border}`,
      color: colors.muted,
      borderRadius: "8px",
      padding: "0.5rem 0.8rem",
      cursor: "pointer",
      fontSize: "0.9rem",
    },
    content: {
      flex: 1,
      overflow: "auto",
    },
    nav: {
      display: "flex",
      justifyContent: "space-around",
      background: colors.bgCard,
      borderTop: `1px solid ${colors.border}`,
      padding: "0.3rem 0",
      flexShrink: 0,
    },
    navBtn: (active) => ({
      flex: 1,
      background: "none",
      border: "none",
      color: active ? colors.accent : colors.muted,
      fontSize: "0.75rem",
      padding: "0.5rem 0",
      cursor: "pointer",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      gap: "2px",
      fontWeight: active ? 600 : 400,
    }),
    page: {
      padding: "1.5rem",
      maxWidth: "700px",
      margin: "0 auto",
    },
    sectionTitle: {
      color: colors.accent,
      fontWeight: 600,
      fontSize: "0.9rem",
      marginBottom: "0.8rem",
      marginTop: "1.5rem",
      textTransform: "uppercase",
      letterSpacing: "0.05em",
    },
    grid: {
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
      gap: "0.8rem",
    },
    card: {
      background: colors.bgCard,
      border: `1px solid ${colors.border}`,
      borderRadius: "10px",
      padding: "1rem",
      textAlign: "center",
      cursor: "pointer",
      transition: "all 0.2s",
    },
    proxyCard: (active) => ({
      background: active ? `${colors.accent}20` : colors.bgCard,
      border: `1px solid ${active ? colors.accent : colors.border}`,
      borderRadius: "10px",
      padding: "0.8rem 1rem",
      cursor: "pointer",
      display: "flex",
      alignItems: "center",
      gap: "0.8rem",
      marginBottom: "0.5rem",
    }),
    settingRow: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      padding: "0.8rem 0",
      borderBottom: `1px solid ${colors.border}`,
    },
    toggle: (active) => ({
      width: "42px",
      height: "22px",
      borderRadius: "11px",
      background: active ? colors.accent : colors.border,
      position: "relative",
      cursor: "pointer",
      transition: "background 0.2s",
      border: "none",
      flexShrink: 0,
    }),
    toggleDot: (active) => ({
      position: "absolute",
      top: "3px",
      left: active ? "23px" : "3px",
      width: "16px",
      height: "16px",
      borderRadius: "50%",
      background: "#fff",
      transition: "left 0.2s",
    }),
    historyItem: {
      display: "flex",
      alignItems: "center",
      gap: "0.8rem",
      padding: "0.7rem 0",
      borderBottom: `1px solid ${colors.border}`,
      cursor: "pointer",
    },
  };

  function navigate(url) {
    let finalUrl = url.trim();
    if (!finalUrl) return;
    if (!/^https?:\/\//i.test(finalUrl)) {
      if (finalUrl.includes(".") && !finalUrl.includes(" ")) {
        finalUrl = "https://" + finalUrl;
      } else {
        finalUrl = `https://www.google.com/search?q=${encodeURIComponent(finalUrl)}`;
      }
    }
    const proxyUrl = activeProxy.url + "?url=" + encodeURIComponent(finalUrl);
    setIframeUrl(proxyUrl);
    setInputUrl(finalUrl);
    setHistory((h) => [{ url: finalUrl, time: new Date().toLocaleTimeString() }, ...h.slice(0, 19)]);
    setTab("browse");
    setIsLoading(true);
  }

  function handleKey(e) {
    if (e.key === "Enter") navigate(inputUrl);
  }

  useEffect(() => {
    if (tab === "proxy" && inputRef.current) inputRef.current.focus();
  }, [tab]);

  const NavIcon = ({ icon, label, page }) => (
    <button style={styles.navBtn(tab === page)} onClick={() => setTab(page)}>
      <span style={{ fontSize: "1.1rem" }}>{icon}</span>
      <span>{label}</span>
    </button>
  );

  const renderHome = () => (
    <div style={styles.page}>
      <div style={{ textAlign: "center", marginBottom: "1.5rem" }}>
        <div style={{ fontSize: "3rem" }}>🌊</div>
        <h2 style={{ margin: "0.5rem 0", color: colors.accent }}>ZXS Lite Proxy</h2>
        <p style={{ color: colors.muted, fontSize: "0.9rem", margin: 0 }}>
          Fast, lightweight, anonymous browsing
        </p>
      </div>

      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
        <input
          style={{ ...styles.input, flex: 1 }}
          placeholder="Enter URL or search..."
          value={inputUrl}
          onChange={(e) => setInputUrl(e.target.value)}
          onKeyDown={handleKey}
        />
        <button style={styles.btnPrimary} onClick={() => navigate(inputUrl)}>Go</button>
      </div>

      <div style={styles.sectionTitle}>Quick Access</div>
      <div style={styles.grid}>
        {QUICK_LINKS.map((l) => (
          <div
            key={l.name}
            style={styles.card}
            onClick={() => navigate(l.url)}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = colors.accent;
              e.currentTarget.style.transform = "translateY(-2px)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = colors.border;
              e.currentTarget.style.transform = "translateY(0)";
            }}
          >
            <div style={{ fontSize: "1.6rem" }}>{l.icon}</div>
            <div style={{ fontSize: "0.8rem", marginTop: "0.3rem", color: colors.muted }}>{l.name}</div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderBrowse = () => (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      {iframeUrl ? (
        <>
          {isLoading && (
            <div style={{ padding: "0.5rem 1rem", background: `${colors.accent}15`, color: colors.accent, fontSize: "0.8rem" }}>
              ⏳ Loading...
            </div>
          )}
          <iframe
            src={iframeUrl}
            style={{ flex: 1, border: "none", background: "#000" }}
            title="proxy"
            onLoad={() => setIsLoading(false)}
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation"
          />
        </>
      ) : (
        <div style={{ ...styles.page, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", textAlign: "center" }}>
          <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>🔭</div>
          <p style={{ color: colors.muted }}>Enter a URL in the bar above or go to the Proxy tab to browse</p>
          <button style={styles.btnPrimary} onClick={() => setTab("proxy")}>
            Start Browsing
          </button>
        </div>
      )}
    </div>
  );

  const renderProxy = () => (
    <div style={styles.page}>
      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem" }}>
        <input
          ref={inputRef}
          style={{ ...styles.input, flex: 1 }}
          placeholder="https://example.com or search..."
          value={inputUrl}
          onChange={(e) => setInputUrl(e.target.value)}
          onKeyDown={handleKey}
        />
        <button style={styles.btnPrimary} onClick={() => navigate(inputUrl)}>Go</button>
      </div>

      <div style={styles.sectionTitle}>Select Proxy Service</div>
      {PROXY_SERVICES.map((p) => (
        <div
          key={p.name}
          style={styles.proxyCard(activeProxy.name === p.name)}
          onClick={() => setActiveProxy(p)}
        >
          <span style={{ fontSize: "1.4rem" }}>{p.icon}</span>
          <div>
            <div style={{ fontWeight: 600, fontSize: "0.9rem" }}>{p.name}</div>
            <div style={{ color: colors.muted, fontSize: "0.75rem" }}>{p.url}</div>
          </div>
          {activeProxy.name === p.name && (
            <span style={{ marginLeft: "auto", color: colors.accent, fontSize: "0.85rem" }}>✓ Active</span>
          )}
        </div>
      ))}

      {history.length > 0 && (
        <>
          <div style={styles.sectionTitle}>Recent</div>
          {history.slice(0, 5).map((h, i) => (
            <div key={i} style={styles.historyItem} onClick={() => navigate(h.url)}>
              <span>🕐</span>
              <div style={{ flex: 1, overflow: "hidden" }}>
                <div style={{ fontSize: "0.85rem", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>{h.url}</div>
                <div style={{ color: colors.muted, fontSize: "0.75rem" }}>{h.time}</div>
              </div>
            </div>
          ))}
        </>
      )}
    </div>
  );

  const renderSettings = () => (
    <div style={styles.page}>
      <h2 style={{ color: colors.accent, marginTop: 0 }}>⚙️ Settings</h2>

      <div style={styles.sectionTitle}>Appearance</div>
      <div style={styles.settingRow}>
        <div>
          <div style={{ fontWeight: 500 }}>Dark Mode</div>
          <div style={{ color: colors.muted, fontSize: "0.8rem" }}>Toggle dark/light theme</div>
        </div>
        <button style={styles.toggle(isDark)} onClick={() => setTheme(isDark ? "light" : "dark")}>
          <div style={styles.toggleDot(isDark)} />
        </button>
      </div>

      <div style={styles.sectionTitle}>Tab Cloak</div>
      <div style={{ marginBottom: "0.8rem", color: colors.muted, fontSize: "0.85rem" }}>
        Change the browser tab title to disguise this page
      </div>
      <div style={{ display: "flex", gap: "0.5rem" }}>
        <input
          style={{ ...styles.input, flex: 1 }}
          value={cloakTitle}
          onChange={(e) => setCloakTitle(e.target.value)}
          placeholder="Tab title..."
        />
        <button
          style={styles.btnPrimary}
          onClick={() => { document.title = cloakTitle; }}
        >
          Apply
        </button>
      </div>

      <div style={styles.sectionTitle}>History</div>
      <div style={styles.settingRow}>
        <div>
          <div style={{ fontWeight: 500 }}>Browsing History</div>
          <div style={{ color: colors.muted, fontSize: "0.8rem" }}>{history.length} entries stored</div>
        </div>
        <button
          style={{ ...styles.btnSecondary, color: "#f85149", borderColor: "#f85149" }}
          onClick={() => setHistory([])}
        >
          Clear
        </button>
      </div>

      <div style={styles.sectionTitle}>Active Proxy</div>
      <div style={{ ...styles.proxyCard(true), cursor: "default" }}>
        <span style={{ fontSize: "1.4rem" }}>{activeProxy.icon}</span>
        <div>
          <div style={{ fontWeight: 600, fontSize: "0.9rem" }}>{activeProxy.name}</div>
          <div style={{ color: colors.muted, fontSize: "0.75rem" }}>{activeProxy.url}</div>
        </div>
        <button
          style={{ ...styles.btnSecondary, marginLeft: "auto", fontSize: "0.75rem" }}
          onClick={() => setTab("proxy")}
        >
          Change
        </button>
      </div>
    </div>
  );

  return (
    <div style={styles.app}>
      <header style={styles.header}>
        <div style={styles.logo}>🌊 ZXS Lite</div>
        <div style={styles.urlBar}>
          <input
            style={styles.input}
            placeholder="Search or enter URL..."
            value={inputUrl}
            onChange={(e) => setInputUrl(e.target.value)}
            onKeyDown={handleKey}
          />
          <button style={styles.btnPrimary} onClick={() => navigate(inputUrl)}>→</button>
          {iframeUrl && (
            <button style={styles.btnSecondary} onClick={() => { setIframeUrl(""); setTab("home"); }}>✕</button>
          )}
        </div>
      </header>

      <div style={styles.content}>
        {tab === "home" && renderHome()}
        {tab === "browse" && renderBrowse()}
        {tab === "proxy" && renderProxy()}
        {tab === "settings" && renderSettings()}
      </div>

      <nav style={styles.nav}>
        <NavIcon icon="🏠" label="Home" page="home" />
        <NavIcon icon="🔭" label="Browse" page="browse" />
        <NavIcon icon="🌐" label="Proxy" page="proxy" />
        <NavIcon icon="⚙️" label="Settings" page="settings" />
      </nav>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>