import React, { useEffect, useState } from "react";
import { bpFetch } from "../api/client";
import { Drawer } from "../ui/Drawer";

export default function SmartVariablesDrawer({ eventKey, open, onClose }) {
  const [groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [copiedKey, setCopiedKey] = useState("");

  useEffect(() => {
    if (!open) return;
    setLoading(true);
    setError("");
    bpFetch(`/smart-variables?event_key=${encodeURIComponent(eventKey)}`)
      .then((response) => {
        setGroups(response?.data || []);
      })
      .catch((err) => {
        console.error(err);
        setError(err.message || "Could not load variables.");
      })
      .finally(() => setLoading(false));
  }, [eventKey, open]);

  async function copyValue(key) {
    const value = `{{${key}}}`;
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(value);
      } else {
        const temp = document.createElement("textarea");
        temp.value = value;
        temp.style.position = "fixed";
        temp.style.opacity = "0";
        document.body.appendChild(temp);
        temp.select();
        document.execCommand("copy");
        document.body.removeChild(temp);
      }
      setCopiedKey(key);
      setTimeout(() => setCopiedKey(""), 1500);
    } catch (err) {
      console.error(err);
      setError("Copy failed.");
    }
  }

  if (!open) {
    return null;
  }

  return (
    <Drawer open={open} title="Smart variables" onClose={onClose} width="520px">
      <div className="bp-smartvars">
        <div className="bp-smartvars__event">Event: {eventKey}</div>

        {error ? <div className="bp-error">{error}</div> : null}
        {loading ? <div className="bp-muted">Loading variables...</div> : null}
        {!loading && !error && groups.length === 0 ? (
          <div className="bp-muted">No variables available.</div>
        ) : null}

        {groups.map((group) => (
          <section key={group.label} className="bp-smartvars__group">
            <div className="bp-section-title bp-smartvars__groupTitle">{group.label}</div>
            <div className="bp-smartvars__list">
              {group.variables?.map((variable) => (
                <div key={variable.key} className="bp-smartvars__row">
                  <div className="bp-smartvars__meta">
                    <div className="bp-smartvars__token">{`{{${variable.key}}}`}</div>
                    <div className="bp-muted bp-smartvars__label">{variable.label}</div>
                  </div>
                  <button type="button" className="bp-btn-sm bp-smartvars__copyBtn" onClick={() => copyValue(variable.key)}>
                    {copiedKey === variable.key ? "Copied" : "Copy"}
                  </button>
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>
    </Drawer>
  );
}