/**
 * InterviewActionButtons Component
 * Action button group for interview management
 */

"use client";

import {
  CheckCircle,
  XCircle,
  Calendar,
  Video,
  MessageSquare,
} from "lucide-react";
import { InterviewStatus } from "@/lib/types/interview.types";

interface InterviewActionButtonsProps {
  status: InterviewStatus;
  onConfirm?: () => void;
  onAddMeetingLink?: () => void;
  onReschedule?: () => void;
  onCancel?: () => void;
  onComplete?: () => void;
  onAddNotes?: () => void;
  hasMeetingLink?: boolean;
  isLoading?: boolean;
}

export default function InterviewActionButtons({
  status,
  onConfirm,
  onAddMeetingLink,
  onReschedule,
  onCancel,
  onComplete,
  onAddNotes,
  hasMeetingLink = false,
  isLoading = false,
}: InterviewActionButtonsProps) {
  // Define available actions based on status
  const actions = {
    [InterviewStatus.PENDING]: [
      {
        label: "Confirm Interview",
        icon: CheckCircle,
        onClick: onConfirm,
        variant: "primary",
        disabled: !hasMeetingLink,
        tooltip: !hasMeetingLink ? "Add meeting link first" : undefined,
      },
      {
        label: hasMeetingLink ? "Edit Meeting Link" : "Add Meeting Link",
        icon: Video,
        onClick: onAddMeetingLink,
        variant: "secondary",
      },
      {
        label: "Cancel",
        icon: XCircle,
        onClick: onCancel,
        variant: "destructive",
      },
    ],
    [InterviewStatus.CONFIRMED]: [
      {
        label: "Mark Completed",
        icon: CheckCircle,
        onClick: onComplete,
        variant: "primary",
      },
      {
        label: "Reschedule",
        icon: Calendar,
        onClick: onReschedule,
        variant: "secondary",
      },
      {
        label: "Edit Meeting Link",
        icon: Video,
        onClick: onAddMeetingLink,
        variant: "secondary",
      },
      {
        label: "Cancel",
        icon: XCircle,
        onClick: onCancel,
        variant: "destructive",
      },
    ],
    [InterviewStatus.RESCHEDULED]: [
      {
        label: "Confirm New Time",
        icon: CheckCircle,
        onClick: onConfirm,
        variant: "primary",
        disabled: !hasMeetingLink,
      },
      {
        label: "Add Meeting Link",
        icon: Video,
        onClick: onAddMeetingLink,
        variant: "secondary",
      },
      {
        label: "Cancel",
        icon: XCircle,
        onClick: onCancel,
        variant: "destructive",
      },
    ],
    [InterviewStatus.CANCELLED]: [
      {
        label: "Add Notes",
        icon: MessageSquare,
        onClick: onAddNotes,
        variant: "secondary",
      },
    ],
    [InterviewStatus.COMPLETED]: [
      {
        label: "Add Feedback",
        icon: MessageSquare,
        onClick: onAddNotes,
        variant: "secondary",
      },
    ],
  };

  const currentActions = actions[status] || [];

  const getButtonStyles = (variant: string) => {
    const base =
      "inline-flex items-center gap-2 px-4 py-2 font-semibold rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed";

    switch (variant) {
      case "primary":
        return `${base} bg-brand-green text-white hover:bg-green-600`;
      case "secondary":
        return `${base} bg-gray-100 text-gray-700 hover:bg-gray-200`;
      case "destructive":
        return `${base} bg-red-50 text-red-600 border border-red-300 hover:bg-red-100`;
      default:
        return base;
    }
  };

  if (currentActions.length === 0) {
    return null;
  }

  return (
    <div className="flex flex-wrap gap-3">
      {currentActions.map((action, index) => {
        const Icon = action.icon;
        const buttonDisabled = isLoading || action.disabled;

        return (
          <div key={index} className="relative group">
            <button
              onClick={action.onClick}
              disabled={buttonDisabled}
              className={getButtonStyles(action.variant)}
              title={action.tooltip}
            >
              <Icon className="w-4 h-4" />
              {action.label}
            </button>

            {action.tooltip && action.disabled && (
              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                {action.tooltip}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}