import { useEffect, useState } from "react";

const CLOUDFLARE_CMD = "cloudflared tunnel --url http://localhost:8082";
const CLOUDFLARE_DOWNLOAD = "https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/";

export default function ShareModal({ onClose }) {
  const [copied, setCopied] = useState(false);

  // Close on Escape key
  useEffect(() => {
    const handleKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [onClose]);

  const handleCopy = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(CLOUDFLARE_CMD).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      });
    } else {
      // Fallback: select the text
      const el = document.getElementById("share-modal-cmd");
      if (el) {
        const range = document.createRange();
        range.selectNodeContents(el);
        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  };

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.6)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 1000,
      }}
      onClick={onClose}
    >
      <div
        style={{
          background: "#1e1e2e",
          border: "1px solid #444",
          borderRadius: 8,
          padding: "24px 28px",
          minWidth: 380,
          maxWidth: 480,
          color: "#cdd6f4",
          position: "relative",
        }}
        onClick={(e) => e.stopPropagation()}
        onKeyDown={(e) => e.key === "Escape" && onClose()}
      >
        <button
          onClick={onClose}
          style={{
            position: "absolute",
            top: 10,
            right: 14,
            background: "none",
            border: "none",
            color: "#cdd6f4",
            fontSize: 20,
            cursor: "pointer",
          }}
          aria-label="Close"
        >
          ×
        </button>

        <h2 style={{ margin: "0 0 10px", fontSize: 18 }}>Share Radar</h2>

        <p style={{ margin: "0 0 14px", fontSize: 13, color: "#a6adc8" }}>
          Cloudflare Tunnel is free, requires no port forwarding, and gives you a
          public HTTPS URL.
        </p>

        <code
          id="share-modal-cmd"
          style={{
            display: "block",
            background: "#181825",
            borderRadius: 4,
            padding: "8px 12px",
            fontSize: 13,
            marginBottom: 12,
            wordBreak: "break-all",
            userSelect: "text",
          }}
        >
          {CLOUDFLARE_CMD}
        </code>

        <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 14 }}>
          <button
            onClick={handleCopy}
            style={{
              background: "#313244",
              border: "1px solid #555",
              borderRadius: 4,
              color: "#cdd6f4",
              padding: "6px 14px",
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            {copied ? "Copied!" : "Copy command"}
          </button>
        </div>

        <a
          href={CLOUDFLARE_DOWNLOAD}
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: "#89b4fa", fontSize: 13 }}
        >
          Download cloudflared ↗
        </a>
      </div>
    </div>
  );
}
