"use client";

// "Push to Hub": publish this claw's .brain (identity + skills + memory) to
// ClawBrainHub under owner/name:version (POST /api/claws/{id}/brain/push).
// Requires BRAINHUB_API_KEY on the server; surfaces a clear error if unset.

import { useEffect, useState } from "react";
import { UploadCloud, X } from "lucide-react";

const mono = "'JetBrains Mono', ui-monospace, monospace";

export function PushBrainModal({ clawId, clawName, onClose }: { clawId: string; clawName: string; onClose: () => void }) {
  const slug = clawName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "agent";
  const [reference, setReference] = useState(`me/${slug}:1.0.0`);
  const [description, setDescription] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState(false);

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

  const canPush = /.+\/.+:.+/.test(reference.trim()) && !busy;

  async function push() {
    if (!canPush) { setError("Use owner/name:version, e.g. me/my-agent:1.0.0"); return; }
    setBusy(true); setError(null);
    try {
      const res = await fetch(`/api/claws/${clawId}/brain/push`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ reference: reference.trim(), description: description.trim(), tags: [] }),
      });
      if (!res.ok) {
        setError(res.status === 400 ? "Push rejected — check the name, or BRAINHUB_API_KEY isn't set on the server." : `Push failed (${res.status})`);
        setBusy(false);
        return;
      }
      setDone(true); setBusy(false);
    } catch { setError("Network error"); setBusy(false); }
  }

  const field: React.CSSProperties = { width: "100%", boxSizing: "border-box", padding: "9px 11px", borderRadius: 9, border: "1px solid rgba(255,255,255,.12)", background: "#141417", color: "#eaeaee", fontSize: 13, fontFamily: mono };

  return (
    <div onClick={onClose} role="presentation" style={{ position: "fixed", inset: 0, zIndex: 120, background: "rgba(0,0,0,.62)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, animation: "cm-fade .18s ease" }}>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Push to ClawBrainHub" style={{ width: "100%", maxWidth: 460, borderRadius: 16, background: "#0d0d10", border: "1px solid rgba(255,255,255,.1)", boxShadow: "0 30px 90px rgba(0,0,0,.6)", padding: 22, animation: "scale-in .18s ease" }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 16 }}>
          <span style={{ width: 34, height: 34, flex: "none", borderRadius: 9, background: "rgba(95,208,138,.12)", border: "1px solid rgba(95,208,138,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "#5fd08a" }}><UploadCloud size={17} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: "#f3f3f5" }}>Push to ClawBrainHub</div>
            <div style={{ fontSize: 12.5, color: "#8a8a92", marginTop: 2 }}>Publish {clawName}&apos;s <code>.brain</code> as a versioned release.</div>
          </div>
          <button type="button" onClick={onClose} aria-label="Close" style={{ width: 28, height: 28, flex: "none", borderRadius: 8, border: "1px solid rgba(255,255,255,.12)", background: "transparent", color: "#9a9aa2", cursor: "pointer" }}><X size={14} /></button>
        </div>

        {done ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: 13, color: "#7fd0a0" }}>Published <code>{reference.trim()}</code> to ClawBrainHub.</div>
            <button type="button" onClick={onClose} style={{ padding: "10px 0", borderRadius: 10, border: 0, background: "#5fd08a", color: "#06140c", fontSize: 13, fontWeight: 700, cursor: "pointer" }}>Done</button>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
            <label style={{ display: "flex", flexDirection: "column", gap: 5 }}>
              <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".08em", color: "#6a6a72" }}>REFERENCE (owner/name:version)</span>
              <input value={reference} onChange={(e) => setReference(e.target.value)} placeholder="me/my-agent:1.0.0" style={field} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 5 }}>
              <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".08em", color: "#6a6a72" }}>DESCRIPTION (optional)</span>
              <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What this agent is good at" style={{ ...field, fontFamily: "inherit" }} />
            </label>
            {error ? <div style={{ fontSize: 12, color: "#ff8a7a" }}>{error}</div> : null}
            <button type="button" disabled={!canPush} onClick={push} style={{ marginTop: 4, padding: "10px 0", borderRadius: 10, border: 0, background: canPush ? "#5fd08a" : "rgba(95,208,138,.25)", color: "#06140c", fontSize: 13, fontWeight: 700, cursor: canPush ? "pointer" : "default" }}>{busy ? "Pushing…" : "Push brain"}</button>
          </div>
        )}
      </div>
    </div>
  );
}