"use client"

import { Loader2, Trash2, X, AlertTriangle } from "lucide-react"
import type { Category } from "./CategoryTable"

interface CategoryDeleteModalProps {
  category: Category | null
  isLoading: boolean
  onClose: () => void
  onConfirm: () => void
}

function formatLinkedSummary(category: Category): string[] {
  const items: string[] = []
  if (category.articleCount > 0) {
    items.push(`${category.articleCount} article${category.articleCount > 1 ? "s" : ""}`)
  }
  if (category.doctorCount > 0) {
    items.push(`${category.doctorCount} doctor${category.doctorCount > 1 ? "s" : ""}`)
  }
  if (category.hospitalCount > 0) {
    items.push(`${category.hospitalCount} hospital${category.hospitalCount > 1 ? "s" : ""}`)
  }
  if (category.procedureCount > 0) {
    items.push(`${category.procedureCount} procedure${category.procedureCount > 1 ? "s" : ""}`)
  }
  return items
}

export function CategoryDeleteModal({
  category,
  isLoading,
  onClose,
  onConfirm,
}: CategoryDeleteModalProps) {
  if (!category) return null

  const linkedSummary = formatLinkedSummary(category)
  const hasLinkedContent = linkedSummary.length > 0
  const isDeleteDisabled = hasLinkedContent || isLoading

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="cat-delete-title"
      aria-describedby="cat-delete-desc"
    >
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={!isLoading ? onClose : undefined}
        aria-hidden="true"
      />

      {/* Modal */}
      <div className="relative w-full max-w-sm bg-card rounded-2xl shadow-2xl border border-border overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-5 border-b border-border">
          <div className="flex items-center gap-3">
            <div
              className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: "rgba(239,68,68,0.10)" }}
            >
              <Trash2
                className="w-5 h-5"
                style={{ color: "#EF4444" }}
                aria-hidden="true"
              />
            </div>
            <h2
              id="cat-delete-title"
              className="text-base font-bold text-foreground font-sans"
            >
              Delete Category
            </h2>
          </div>
          <button
            onClick={onClose}
            disabled={isLoading}
            className="p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50 cursor-pointer"
            aria-label="Close"
          >
            <X className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>

        {/* Body */}
        <div className="px-6 py-6 flex flex-col gap-5">
          <p
            id="cat-delete-desc"
            className="text-sm text-muted-foreground font-sans leading-relaxed"
          >
            Are you sure you want to delete{" "}
            <span className="font-semibold text-foreground">
              &quot;{category.name}&quot;
            </span>
            ? This action cannot be undone.
          </p>

          {hasLinkedContent && (
            <div
              className="flex items-start gap-3 p-3.5 rounded-xl border"
              style={{
                background: "rgba(245,158,11,0.08)",
                borderColor: "rgba(245,158,11,0.25)",
              }}
            >
              <AlertTriangle
                className="w-4 h-4 mt-0.5 shrink-0"
                style={{ color: "#F59E0B" }}
                aria-hidden="true"
              />
              <p className="text-xs text-foreground font-sans leading-relaxed">
                This category is linked to{" "}
                <span className="font-bold" style={{ color: "#F59E0B" }}>
                  {linkedSummary.join(", ")}
                </span>
                . Deleting it may affect that content.
              </p>
            </div>
          )}
          {hasLinkedContent && (
            <p className="text-xs text-muted-foreground font-sans leading-relaxed">
              Please unlink all related articles, doctors, hospitals, and procedures before deleting.
            </p>
          )}

          {/* Category preview */}
          <div
            className="flex items-center gap-3 p-3.5 rounded-xl border border-border"
            style={{ background: "var(--muted)" }}
          >
            <div
              className="w-9 h-9 rounded-xl flex items-center justify-center text-white text-sm font-bold font-sans shrink-0"
              style={{ background: category.color }}
            >
              {category.name.charAt(0).toUpperCase()}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-semibold text-foreground font-sans">{category.name}</p>
              <p className="text-xs text-muted-foreground font-mono">/{category.slug}</p>
            </div>
          </div>

          <div className="flex gap-3">
            <button
              type="button"
              onClick={onClose}
              disabled={isLoading}
              className="flex-1 py-2.5 rounded-xl text-sm font-semibold font-sans border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-all disabled:opacity-50 cursor-pointer"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={onConfirm}
              disabled={isDeleteDisabled}
              className={`flex-1 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 flex items-center justify-center gap-2 ${
                isDeleteDisabled
                  ? "opacity-60 cursor-not-allowed"
                  : "hover:brightness-105 cursor-pointer"
              }`}
              style={{ background: "#EF4444" }}
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
                  Deleting...
                </>
              ) : hasLinkedContent ? (
                <>
                  <Trash2 className="w-4 h-4" aria-hidden="true" />
                  Cannot delete
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4" aria-hidden="true" />
                  Delete
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}