silo/web/src/components/items/DeleteItemPane.tsx

import { useState } from "react";
import { del } from "../../api/client";

interface DeleteItemPaneProps {
  partNumber: string;
  onDeleted: () => void;
  onCancel: () => void;
}

export function DeleteItemPane({
  partNumber,
  onDeleted,
  onCancel,
}: DeleteItemPaneProps) {
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleDelete = async () => {
    setDeleting(true);
    setError(null);
    try {
      await del(`/api/items/${encodeURIComponent(partNumber)}`);
      onDeleted();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to delete item");
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: "0.75rem",
          padding: "0.5rem 0.75rem",
          borderBottom: "1px solid var(--ctp-surface1)",
          backgroundColor: "var(--ctp-mantle)",
          flexShrink: 0,
        }}
      >
        <span
          style={{
            color: "var(--ctp-red)",
            fontWeight: 600,
            fontSize: "var(--font-body)",
          }}
        >
          Delete Item
        </span>
        <span style={{ flex: 1 }} />
        <button onClick={onCancel} style={headerBtnStyle}>
          Cancel
        </button>
      </div>

      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "2rem",
          gap: "1rem",
        }}
      >
        {error && (
          <div
            style={{
              color: "var(--ctp-red)",
              backgroundColor: "rgba(243,139,168,0.1)",
              padding: "0.5rem 1rem",
              borderRadius: "0.25rem",
              fontSize: "var(--font-body)",
              width: "100%",
              textAlign: "center",
            }}
          >
            {error}
          </div>
        )}

        <div style={{ textAlign: "center" }}>
          <p
            style={{
              fontSize: "var(--font-body)",
              color: "var(--ctp-text)",
              marginBottom: "0.5rem",
            }}
          >
            Permanently delete item
          </p>
          <p
            style={{
              fontFamily: "'JetBrains Mono', monospace",
              color: "var(--ctp-peach)",
              fontSize: "var(--font-title)",
              fontWeight: 600,
            }}
          >
            {partNumber}
          </p>
        </div>

        <p
          style={{
            color: "var(--ctp-subtext0)",
            fontSize: "var(--font-body)",
            textAlign: "center",
            maxWidth: 300,
          }}
        >
          This will permanently remove this item, all its revisions, BOM
          entries, and file attachments. This action cannot be undone.
        </p>

        <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.5rem" }}>
          <button
            onClick={onCancel}
            style={{
              padding: "0.5rem 1.25rem",
              fontSize: "0.75rem",
              fontWeight: 500,
              border: "none",
              borderRadius: "0.25rem",
              backgroundColor: "var(--ctp-surface1)",
              color: "var(--ctp-text)",
              cursor: "pointer",
            }}
          >
            Cancel
          </button>
          <button
            onClick={() => void handleDelete()}
            disabled={deleting}
            style={{
              padding: "0.5rem 1.25rem",
              fontSize: "0.75rem",
              fontWeight: 500,
              border: "none",
              borderRadius: "0.25rem",
              backgroundColor: "var(--ctp-red)",
              color: "var(--ctp-crust)",
              cursor: "pointer",
              opacity: deleting ? 0.6 : 1,
            }}
          >
            {deleting ? "Deleting..." : "Delete Permanently"}
          </button>
        </div>
      </div>
    </div>
  );
}

const headerBtnStyle: React.CSSProperties = {
  background: "none",
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
  fontSize: "0.75rem",
  fontWeight: 500,
  padding: "0.25rem 0.5rem",
  borderRadius: "0.25rem",
};