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

interface EmailTemplateSelectorProps {
  value: string | number | undefined;
  onChange: (templateId: string | number | undefined) => void;
  category?: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  className?: string;
}

/**
 * DEPRECATED: Custom email templates are no longer supported.
 *
 * The email template system has been replaced with system-level templates
 * that are managed through Business Settings > Email Templates.
 *
 * This component now displays a deprecation notice instead of a selector.
 */
const EmailTemplateSelector: React.FC<EmailTemplateSelectorProps> = ({
  className = '',
}) => {
  const { t } = useTranslation();

  return (
    <div className={`space-y-2 ${className}`}>
      <div className="flex items-start gap-3 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
        <AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
        <div className="text-sm">
          <p className="font-medium text-amber-800 dark:text-amber-200">
            {t('emailTemplates.deprecated.title', 'Custom Email Templates Deprecated')}
          </p>
          <p className="text-amber-700 dark:text-amber-300 mt-1">
            {t(
              'emailTemplates.deprecated.message',
              'Custom email templates have been replaced with system email templates. You can customize system emails (appointment confirmations, reminders, etc.) in Business Settings > Email Templates.'
            )}
          </p>
        </div>
      </div>
      <div className="relative opacity-50 pointer-events-none">
        <select
          disabled
          className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 cursor-not-allowed appearance-none"
        >
          <option value="">
            {t('emailTemplates.deprecated.unavailable', 'Custom templates no longer available')}
          </option>
        </select>
        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
      </div>
    </div>
  );
};

export default EmailTemplateSelector;