"use client";

import { useState } from "react";
import { STATUS_OPTIONS } from "./StatusBadge";

interface BulkActionBarProps {
  selectedCount: number;
  onSetStatus: (status: string) => void;
  onDelete: () => void;
}

export function BulkActionBar({ selectedCount, onSetStatus, onDelete }: BulkActionBarProps) {
  const [showStatusMenu, setShowStatusMenu] = useState(false);

  if (selectedCount === 0) return null;

  return (
    <div
      style={{
        position: "fixed",
        bottom: 24,
        left: "50%",
        transform: "translateX(-50%)",
        background: "#111118",
        border: "1px solid #1e1e2e",
        borderRadius: 8,
        padding: "8px 16px",
        display: "flex",
        alignItems: "center",
        gap: 12,
        zIndex: 200,
        boxShadow: "0 4px 24px rgba(0,0,0,0.5)",
        animation: "slideUp 0.15s ease",
      }}
    >
      <span style={{ fontSize: 13, color: "#9ca3af", whiteSpace: "nowrap" }}>
        {selectedCount} ausgewählt
      </span>
      <span style={{ color: "#1e1e2e" }}>·</span>

      {/* Status dropdown */}
      <div style={{ position: "relative" }}>
        <button
          onClick={() => setShowStatusMenu((v) => !v)}
          style={{
            background: "#0d0d18",
            border: "1px solid #2e2e3e",
            borderRadius: 6,
            padding: "5px 12px",
            fontSize: 13,
            color: "#ffffff",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            gap: 6,
          }}
        >
          Status setzen ▾
        </button>
        {showStatusMenu && (
          <div
            style={{
              position: "absolute",
              bottom: "calc(100% + 4px)",
              left: 0,
              background: "#111118",
              border: "1px solid #1e1e2e",
              borderRadius: 8,
              padding: 4,
              minWidth: 160,
              boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
              zIndex: 300,
            }}
          >
            {STATUS_OPTIONS.map((opt) => (
              <button
                key={opt.value}
                onClick={() => { onSetStatus(opt.value); setShowStatusMenu(false); }}
                style={{
                  width: "100%",
                  display: "block",
                  padding: "7px 10px",
                  borderRadius: 6,
                  fontSize: 13,
                  color: "#9ca3af",
                  background: "transparent",
                  border: "none",
                  cursor: "pointer",
                  textAlign: "left",
                }}
                onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = "#1e1e2e"; }}
                onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = "transparent"; }}
              >
                {opt.label}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Delete */}
      <button
        onClick={onDelete}
        style={{
          background: "rgba(239,68,68,0.1)",
          border: "1px solid rgba(239,68,68,0.3)",
          borderRadius: 6,
          padding: "5px 12px",
          fontSize: 13,
          color: "#ef4444",
          cursor: "pointer",
        }}
      >
        Löschen
      </button>

      <style>{`
        @keyframes slideUp {
          from { opacity: 0; transform: translateX(-50%) translateY(8px); }
          to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
      `}</style>
    </div>
  );
}