import { useState } from "react";
import { ChevronDown, ChevronUp, Loader2, Lock } from "lucide-react";
import type { DataClassification } from "../../types/models";

// ── Options ────────────────────────────────────────────────────────

const CLASSIFICATION_OPTIONS: { value: DataClassification; label: string; color: string }[] = [
  { value: "public_release", label: "Public Release", color: "border-gray-500/30 bg-gray-800/50 text-gray-400" },
  { value: "general_use", label: "General Use", color: "border-blue-500/30 bg-blue-900/30 text-blue-400" },
  { value: "confidential", label: "Confidential", color: "border-amber-500/30 bg-amber-900/30 text-amber-400" },
  { value: "restricted", label: "Restricted", color: "border-red-500/30 bg-red-900/30 text-red-400" },
];

// ── Props ──────────────────────────────────────────────────────────

interface DataClassificationBadgeProps {
  value: DataClassification;
  canEdit: boolean;
  isSaving: boolean;
  onChange: (value: DataClassification) => void;
}

// ── Component ──────────────────────────────────────────────────────

export default function DataClassificationBadge({
  value,
  canEdit,
  isSaving,
  onChange,
}: DataClassificationBadgeProps) {
  const [expanded, setExpanded] = useState(false);
  const current = CLASSIFICATION_OPTIONS.find((o) => o.value === value) ?? CLASSIFICATION_OPTIONS[1];

  if (!canEdit) {
    return (
      <span
        className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium ${current.color}`}
      >
        <Lock className="h-2.5 w-2.5" />
        {current.label}
      </span>
    );
  }

  return (
    <div className="relative inline-block">
      <button
        onClick={() => setExpanded((v) => !v)}
        className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors hover:opacity-80 ${current.color}`}
      >
        <Lock className="h-2.5 w-2.5" />
        {current.label}
        {expanded ? <ChevronUp className="h-2.5 w-2.5" /> : <ChevronDown className="h-2.5 w-2.5" />}
      </button>

      {expanded && (
        <div className="absolute left-0 top-full z-20 mt-1 w-44 rounded-lg border border-gray-700 bg-gray-900 p-1.5 shadow-xl">
          {isSaving ? (
            <div className="flex items-center justify-center py-2">
              <Loader2 className="h-4 w-4 animate-spin text-gray-500" />
            </div>
          ) : (
            CLASSIFICATION_OPTIONS.map((opt) => (
              <button
                key={opt.value}
                onClick={() => {
                  onChange(opt.value);
                  setExpanded(false);
                }}
                className={`block w-full rounded px-2 py-1.5 text-left text-xs transition-colors ${
                  opt.value === value
                    ? "bg-gray-800 text-white"
                    : "text-gray-400 hover:bg-gray-800 hover:text-white"
                }`}
              >
                {opt.label}
              </button>
            ))
          )}
        </div>
      )}
    </div>
  );
}