'use client';

import { cn } from '@/lib/helper';
import { Icon } from '@iconify/react';

type FloatingActionsButtonProps = {
  actions: {
    action: 'DETAIL' | 'EDIT' | 'DELETE';
    icon: string;
    label?: string;
    onClick?: () => void;
    hidden?: boolean;
  }[];
  approvals: {
    action: 'APPROVED' | 'REJECTED';
    icon: string;
    label?: string;
    onClick?: () => void;
  }[];
  selectedRowIds: number[];
  onClose: () => void;
};

const FloatingActionsButton = ({
  actions,
  approvals,
  selectedRowIds,
  onClose,
}: FloatingActionsButtonProps) => {
  // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
  const positionStyles =
    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';

  // Helper untuk menentukan gaya warna tombol approval
  const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
    if (action === 'APPROVED') return 'success';
    if (action === 'REJECTED') return 'error';
    return 'primary';
  };

  const getActionColor = (action: 'DETAIL' | 'EDIT' | 'DELETE') => {
    if (action === 'DETAIL') return 'white';
    if (action === 'EDIT') return 'warning';
    if (action === 'DELETE') return 'error';
    return 'primary';
  };

  return (
    // Container utama FAB
    <div
      className={cn(
        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
        'mx-auto w-full max-w-xl sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
        'bg-slate-950 backdrop-blur-md'
      )}
    >
      <div className='flex flex-col gap-3'>
        {/* === BARIS ATAS: Status Seleksi dan Actions (Termasuk Close) === */}
        <div className='flex justify-between items-center text-white'>
          <h4 className='text-base font-semibold'>
            {selectedRowIds.length} Selected
          </h4>

          <div className='flex flex-row gap-1 items-stretch'>
            <div className='flex gap-4 items-center'>
              {/* Render Aksi dari props.actions */}
              {actions
                .filter((action) => !action.hidden)
                .map((action, index) => {
                  return (
                    <button
                      key={index}
                      onClick={action.onClick}
                      className='text-white hover:text-gray-400 tooltip tooltip-bottom'
                      data-tip={action.label}
                    >
                      <Icon
                        icon={action.icon}
                        width={24}
                        height={24}
                        className={`text-${getActionColor(action.action)} font-thin`}
                      />
                    </button>
                  );
                })}

              <div className='border-[0.5px] border-white/30 h-full'></div>

              {/* Tombol Close */}
              <button
                onClick={onClose}
                className='text-white hover:text-gray-400'
              >
                <Icon icon='mdi:close' width={24} height={24} />
              </button>
            </div>
          </div>
        </div>

        {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
        <div className={`grid grid-cols-${approvals.length} gap-3`}>
          {approvals.map((approval, index) => (
            <button
              key={index}
              onClick={approval.onClick}
              className={cn(
                'btn btn-lg w-full',
                'bg-white/20 hover:bg-white/40 border-white/30 hover:border-white/50',
                'text-white/50 hover:text-white/100 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200'
              )}
            >
              <Icon
                icon={approval.icon}
                width={20}
                height={20}
                className={`text-${getApprovalColor(approval.action)}`}
              />
              {approval.label || approval.action}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FloatingActionsButton;