/**
 * StockStatusModal Component
 * 
 * Modal warning when user tries to change stock_status on a product with manage_stock enabled
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { AlertTriangle } from 'lucide-react';

interface Props {
  onConfirm: () => void;
  onCancel: () => void;
  currentStatus: string;
  newStatus: string;
}

export default function StockStatusModal({ onConfirm, onCancel, currentStatus, newStatus }: Props) {
  const { t } = useTranslation();

  return (
    <>
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-[9998]"
        onClick={onCancel}
      />
      
      {/* Modal */}
      <div className="fixed inset-0 flex items-center justify-center z-[9999] p-4">
        <div className="bg-white rounded-xl shadow-2xl max-w-md w-full">
          {/* Header */}
          <div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
            <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
              <AlertTriangle className="w-6 h-6 text-amber-600" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-gray-900">{t('stock_modal.title')}</h3>
              <p className="text-sm text-gray-600">{t('stock_modal.subtitle')}</p>
            </div>
          </div>

          {/* Body */}
          <div className="px-6 py-5 space-y-4">
            <p className="text-sm text-gray-700">
              {t('stock_modal.message')}
            </p>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-sm font-semibold text-blue-900">💡 {t('stock_modal.info_title')}</span>
              </div>
              <p className="text-xs text-blue-800 leading-relaxed">
                {t('stock_modal.info_text')}
              </p>
            </div>

            <div className="flex items-center justify-between text-sm bg-gray-50 rounded-lg p-3">
              <div>
                <span className="text-gray-600">{t('stock_modal.current')}:</span>
                <span className="ml-2 font-semibold text-gray-900">{t(`stock_status.${currentStatus}`)}</span>
              </div>
              <span className="text-gray-400">→</span>
              <div>
                <span className="text-gray-600">{t('stock_modal.new')}:</span>
                <span className="ml-2 font-semibold text-emerald-600">{t(`stock_status.${newStatus}`)}</span>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="px-6 py-4 border-t border-gray-200 flex gap-3 justify-end">
            <button
              onClick={onCancel}
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition"
            >
              {t('common.cancel')}
            </button>
            <button
              onClick={onConfirm}
              className="px-4 py-2 text-sm font-medium text-white bg-amber-600 rounded-lg hover:bg-amber-700 transition shadow-md"
            >
              {t('stock_modal.confirm_button')}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}