import { useEffect, useRef } from "react";
import { COLORS, FONT } from "./theme";

/** Confirmation modal for deleting a workspace. Warns when live terminals
 * would be killed, but still allows the delete (per product decision). */
export function ConfirmDelete({
  name,
  activeCount,
  onConfirm,
  onCancel,
}: {
  name: string;
  activeCount: number;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  const confirmRef = useRef<HTMLButtonElement>(null);
  useEffect(() => { confirmRef.current?.focus(); }, []);

  function onKeyDown(e: React.KeyboardEvent) {
    e.stopPropagation();
    if (e.key === "Escape") { e.preventDefault(); onCancel(); }
    else if (e.key === "Enter") { e.preventDefault(); onConfirm(); }
  }

  return (
    <div
      onMouseDown={onCancel}
      style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}
    >
      <div
        onMouseDown={(e) => e.stopPropagation()}
        onKeyDown={onKeyDown}
        style={{ width: 420, background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}
      >
        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 12 }}>Delete workspace</div>
        <div style={{ fontSize: 13, color: COLORS.textSecondary, lineHeight: 1.5 }}>
          Delete <span style={{ color: COLORS.textPrimary, fontWeight: 600 }}>{name}</span>? This removes the workspace and its layout.
        </div>
        {activeCount > 0 && (
          <div style={{ marginTop: 12, padding: "8px 10px", borderRadius: 8, background: "#2A1414", border: `1px solid ${COLORS.stError}`, color: COLORS.stError, fontSize: 12, fontWeight: 600 }}>
            {activeCount} active terminal{activeCount === 1 ? "" : "s"} will be terminated.
          </div>
        )}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }}>
          <button
            onClick={onCancel}
            style={{ padding: "7px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 13, fontFamily: FONT.ui }}
          >
            Cancel
          </button>
          <button
            ref={confirmRef}
            onClick={onConfirm}
            style={{ padding: "7px 14px", background: COLORS.stError, color: "#fff", border: "none", borderRadius: 7, fontSize: 13, fontWeight: 600, fontFamily: FONT.ui }}
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  );
}