import React from 'react';
import { Bell, MessageSquare, Mail, AlertCircle, Globe, Info } from 'lucide-react';
import { Input, SettingSection, SettingRow, Select } from '../../../../../components/ui';
import type { NotificationSettings } from '../../../../../api/types/settings';
import { useTranslation } from 'react-i18next';

interface NotificationSettingsCardProps {
  settings: NotificationSettings;
  onChange: (settings: NotificationSettings) => void;
  disabled?: boolean;
}

const NotificationSettingsCard: React.FC<NotificationSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const { t } = useTranslation('ajustes');

  const handleChange = (field: keyof NotificationSettings) => (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const value = e.target.type === 'checkbox' ? (e.target as HTMLInputElement).checked :
                  e.target.value;
    onChange({ ...settings, [field]: value });
  };

  const handleToggleChange = (field: keyof NotificationSettings) => (checked: boolean) => {
    onChange({ ...settings, [field]: checked });
  };

  const handleSelectChange = (field: keyof NotificationSettings) => (value: string) => {
    onChange({ ...settings, [field]: value });
  };

  const handleChannelChange = (
    field: 'po_notification_channels' | 'inventory_alert_channels' | 'production_alert_channels' | 'forecast_alert_channels',
    channel: string
  ) => {
    const currentChannels = settings[field];
    const newChannels = currentChannels.includes(channel)
      ? currentChannels.filter(c => c !== channel)
      : [...currentChannels, channel];
    onChange({ ...settings, [field]: newChannels });
  };

  const languageOptions = [
    { value: 'es', label: 'Español' },
    { value: 'eu', label: 'Euskara' },
    { value: 'en', label: 'English' }
  ];

  return (
    <SettingSection
      title={t('notification.title')}
      description="Configure WhatsApp, Email, and notification preferences for your bakery"
      icon={<Bell className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* WhatsApp Configuration */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.whatsapp_enabled')}
            description="Enable WhatsApp notifications for your bakery"
            icon={<MessageSquare className="w-4 h-4" />}
            type="toggle"
            checked={settings.whatsapp_enabled}
            onToggle={handleToggleChange('whatsapp_enabled')}
            disabled={disabled}
            helpText="Configure WhatsApp Business API for notifications"
          />

          {settings.whatsapp_enabled && (
            <>
              <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
                <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                  WhatsApp Configuration
                </h5>

                {/* Display Phone Number */}
                {settings.whatsapp_display_phone_number ? (
                  <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center justify-center w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full">
                        <MessageSquare className="w-5 h-5 text-green-600 dark:text-green-400" />
                      </div>
                      <div className="flex-1">
                        <p className="text-sm font-medium text-green-900 dark:text-green-100">
                          WhatsApp Configured
                        </p>
                        <p className="text-xs text-green-700 dark:text-green-300 mt-1">
                          Phone: <span className="font-mono font-semibold">{settings.whatsapp_display_phone_number}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                    <div className="flex items-start gap-2">
                      <AlertCircle className="w-4 h-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
                      <div className="text-xs text-yellow-700 dark:text-yellow-300">
                        <p className="font-semibold mb-1">No phone number assigned</p>
                        <p>Please contact support to have a WhatsApp phone number assigned to your bakery.</p>
                      </div>
                    </div>
                  </div>
                )}

                {/* Language Preference */}
                <div className="mt-4">
                  <Select
                    label={t('notification.whatsapp_default_language')}
                    options={languageOptions}
                    value={settings.whatsapp_default_language}
                    onChange={handleSelectChange('whatsapp_default_language')}
                    disabled={disabled}
                  />
                </div>

                {/* WhatsApp Info */}
                <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <div className="flex items-start gap-2">
                    <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                    <div className="text-xs text-blue-700 dark:text-blue-300">
                      <p className="font-semibold mb-1">WhatsApp Notifications Included</p>
                      <p>WhatsApp messaging is included in your subscription. Your notifications will be sent from the phone number shown above to your suppliers and team members.</p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        {/* Email Configuration */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.email_enabled')}
            description="Enable email notifications for your bakery"
            icon={<Mail className="w-4 h-4" />}
            type="toggle"
            checked={settings.email_enabled}
            onToggle={handleToggleChange('email_enabled')}
            disabled={disabled}
            helpText="Configure email sender details for notifications"
          />

          {settings.email_enabled && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                Email Sender Configuration
              </h5>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input
                  type="email"
                  label={t('notification.email_from_address')}
                  value={settings.email_from_address}
                  onChange={handleChange('email_from_address')}
                  disabled={disabled}
                  placeholder="orders@yourbakery.com"
                />

                <Input
                  label={t('notification.email_from_name')}
                  value={settings.email_from_name}
                  onChange={handleChange('email_from_name')}
                  disabled={disabled}
                  placeholder="Your Bakery Name"
                />

                <Input
                  type="email"
                  label={t('notification.email_reply_to')}
                  value={settings.email_reply_to}
                  onChange={handleChange('email_reply_to')}
                  disabled={disabled}
                  placeholder="info@yourbakery.com"
                />
              </div>
            </div>
          )}
        </div>

        {/* Notification Preferences Section Header */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-2 flex items-center">
            <Globe className="w-4 h-4 mr-2" />
            {t('notification.preferences')}
          </h4>
          <p className="text-xs text-[var(--text-tertiary)]">
            Configure which notifications you want to receive and through which channels
          </p>
        </div>

        {/* PO Notifications */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.enable_po_notifications')}
            description="Receive notifications for purchase order updates"
            type="toggle"
            checked={settings.enable_po_notifications}
            onToggle={handleToggleChange('enable_po_notifications')}
            disabled={disabled}
            helpText="Get notified when POs are created, approved, or delivered"
          />

          {settings.enable_po_notifications && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-3">
                Notification Channels
              </h5>
              <div className="flex flex-wrap gap-4">
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.po_notification_channels.includes('email')}
                    onChange={() => handleChannelChange('po_notification_channels', 'email')}
                    disabled={disabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <Mail className="w-4 h-4" />
                  Email
                </label>
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.po_notification_channels.includes('whatsapp')}
                    onChange={() => handleChannelChange('po_notification_channels', 'whatsapp')}
                    disabled={disabled || !settings.whatsapp_enabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <MessageSquare className="w-4 h-4" />
                  WhatsApp
                  {!settings.whatsapp_enabled && <span className="text-xs">(disabled)</span>}
                </label>
              </div>
            </div>
          )}
        </div>

        {/* Inventory Alerts */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.enable_inventory_alerts')}
            description="Receive alerts for low stock and inventory issues"
            type="toggle"
            checked={settings.enable_inventory_alerts}
            onToggle={handleToggleChange('enable_inventory_alerts')}
            disabled={disabled}
            helpText="Get notified about low stock, expiring items, and inventory problems"
          />

          {settings.enable_inventory_alerts && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-3">
                Notification Channels
              </h5>
              <div className="flex flex-wrap gap-4">
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.inventory_alert_channels.includes('email')}
                    onChange={() => handleChannelChange('inventory_alert_channels', 'email')}
                    disabled={disabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <Mail className="w-4 h-4" />
                  Email
                </label>
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.inventory_alert_channels.includes('whatsapp')}
                    onChange={() => handleChannelChange('inventory_alert_channels', 'whatsapp')}
                    disabled={disabled || !settings.whatsapp_enabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <MessageSquare className="w-4 h-4" />
                  WhatsApp
                  {!settings.whatsapp_enabled && <span className="text-xs">(disabled)</span>}
                </label>
              </div>
            </div>
          )}
        </div>

        {/* Production Alerts */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.enable_production_alerts')}
            description="Receive alerts for production schedule and capacity issues"
            type="toggle"
            checked={settings.enable_production_alerts}
            onToggle={handleToggleChange('enable_production_alerts')}
            disabled={disabled}
            helpText="Get notified about production delays, capacity warnings, and quality issues"
          />

          {settings.enable_production_alerts && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-3">
                Notification Channels
              </h5>
              <div className="flex flex-wrap gap-4">
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.production_alert_channels.includes('email')}
                    onChange={() => handleChannelChange('production_alert_channels', 'email')}
                    disabled={disabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <Mail className="w-4 h-4" />
                  Email
                </label>
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.production_alert_channels.includes('whatsapp')}
                    onChange={() => handleChannelChange('production_alert_channels', 'whatsapp')}
                    disabled={disabled || !settings.whatsapp_enabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <MessageSquare className="w-4 h-4" />
                  WhatsApp
                  {!settings.whatsapp_enabled && <span className="text-xs">(disabled)</span>}
                </label>
              </div>
            </div>
          )}
        </div>

        {/* Forecast Alerts */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('notification.enable_forecast_alerts')}
            description="Receive alerts for demand forecast and predictions"
            type="toggle"
            checked={settings.enable_forecast_alerts}
            onToggle={handleToggleChange('enable_forecast_alerts')}
            disabled={disabled}
            helpText="Get notified about demand predictions and forecast updates"
          />

          {settings.enable_forecast_alerts && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-3">
                Notification Channels
              </h5>
              <div className="flex flex-wrap gap-4">
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.forecast_alert_channels.includes('email')}
                    onChange={() => handleChannelChange('forecast_alert_channels', 'email')}
                    disabled={disabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <Mail className="w-4 h-4" />
                  Email
                </label>
                <label className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  <input
                    type="checkbox"
                    checked={settings.forecast_alert_channels.includes('whatsapp')}
                    onChange={() => handleChannelChange('forecast_alert_channels', 'whatsapp')}
                    disabled={disabled || !settings.whatsapp_enabled}
                    className="rounded border-[var(--border-primary)]"
                  />
                  <MessageSquare className="w-4 h-4" />
                  WhatsApp
                  {!settings.whatsapp_enabled && <span className="text-xs">(disabled)</span>}
                </label>
              </div>
            </div>
          )}
        </div>
      </div>
    </SettingSection>
  );
};

export default NotificationSettingsCard;
