// Share Live Preview — glassmorphic modal

const { useState, useEffect } = React;

const EXPIRATION_OPTIONS = [
  { v: "24h", label: "24 hours" },
  { v: "7d",  label: "7 days" },
  { v: "30d", label: "30 days" },
  { v: "never", label: "Never" },
];

const ShareModal = ({ open, onClose }) => {
  const [copied, setCopied] = useState(false);
  const [expiry, setExpiry] = useState("7d");
  const [password, setPassword] = useState(true);
  const [tracking, setTracking] = useState(false);
  const [pwd, setPwd] = useState("k7e-vermont-9");

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const expLabel = EXPIRATION_OPTIONS.find(o => o.v === expiry)?.label;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-icon"><Icon name="globe" size={18} /></div>
          <div className="modal-title-stack">
            <div className="modal-title">Share live preview</div>
            <div className="modal-subtitle">
              Welcome — Pro plan · v14 · 4 locales · last sync 2 min ago
            </div>
          </div>
          <button className="modal-close" onClick={onClose}>
            <Icon name="x" size={14} />
          </button>
        </div>

        <div className="modal-body">

          <div className="share-field">
            <label>Preview URL</label>
            <div className={`share-url${copied ? " is-copied" : ""}`}>
              <div className="share-url-text">
                <span className="scheme">https://</span><span className="host">preview.inlinr.com/</span><span className="path">welcome-pro-x7k9q3</span>
              </div>
              <button className="share-url-copy" onClick={handleCopy}>
                <Icon name={copied ? "check" : "duplicate"} size={12} />
                {copied ? "Copied" : "Copy link"}
              </button>
            </div>
          </div>

          <div className="share-grid">
            <div className="share-field">
              <label>Expires in</label>
              <div className="share-select">
                <span>{expLabel}</span>
                <Icon name="chevronDown" size={12} />
              </div>
            </div>
            <div className="share-field">
              <label>Default locale</label>
              <div className="share-select">
                <span>English (en-US)</span>
                <Icon name="chevronDown" size={12} />
              </div>
            </div>
          </div>

          <div className={`toggle-row${password ? " is-on" : ""}`}>
            <div className="label-stack">
              <div className="t">Password protection</div>
              <div className="s">Recipients must enter a password before previewing.</div>
              {password && (
                <div className="password-input">
                  <Icon name="settings" size={13} style={{ color: "var(--fg-3)" }} />
                  <input value={pwd} onChange={(e) => setPwd(e.target.value)} />
                  <button className="password-regen" title="Regenerate"
                    onClick={() => setPwd(Math.random().toString(36).slice(2, 10) + "-" + Math.floor(Math.random() * 99))}>
                    <Icon name="redo" size={13} />
                  </button>
                </div>
              )}
            </div>
            <div className={`toggle${password ? " is-on" : ""}`} onClick={() => setPassword(p => !p)} />
          </div>

          <div className={`toggle-row${tracking ? " is-on" : ""}`}>
            <div className="label-stack">
              <div className="t">Track preview opens</div>
              <div className="s">Anonymous count of who opened the link. No personal data stored.</div>
            </div>
            <div className={`toggle${tracking ? " is-on" : ""}`} onClick={() => setTracking(t => !t)} />
          </div>

          <div className="share-preview">
            <div className="share-preview-mark">
              <svg width="22" height="22" viewBox="0 0 24 24">
                <rect x="3" y="6" width="14" height="2.4" rx="1.2" fill="currentColor"/>
                <rect x="3" y="11" width="9" height="2.4" rx="1.2" fill="currentColor" opacity="0.55"/>
                <rect x="3" y="16" width="12" height="2.4" rx="1.2" fill="currentColor" opacity="0.3"/>
                <circle cx="20" cy="7.2" r="1.5" fill="#608cff"/>
              </svg>
            </div>
            <div className="share-preview-meta">
              <div className="t">Recipients see your latest saved version</div>
              <div className="s">v14 · auto-refreshes every save · no Inlinr account required</div>
            </div>
          </div>
        </div>

        <div className="modal-foot">
          <div className="lhs">
            <Icon name="check" size={12} />
            <span>End-to-end TLS · revocable at any time</span>
          </div>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <Button variant="primary" iconLeft="globe" onClick={onClose}>Create link</Button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ShareModal });