import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Save } from 'lucide-react';
import { NotificationChannels } from './NotificationChannels';
import { NotificationSettings } from './NotificationSettings';
import { EmailTemplateSection } from './EmailTemplateSection';
import { toast } from 'sonner';

interface NotificationConfigData {
  emailNotifications: boolean;
  inAppNotifications: boolean;
  autoReminders: boolean;
  notificationFrequency: string;
  reminderFrequency: number;
  emailTemplate: string;
}

export function NotificationConfig() {
  const [config, setConfig] = useState<NotificationConfigData>({
    emailNotifications: true,
    inAppNotifications: true,
    autoReminders: true,
    notificationFrequency: 'Immediate',
    reminderFrequency: 12,
    emailTemplate: 'Dear [Name], You have a pending approval request [Request ID] that requires your attention. TAT remaining: [TAT]. Please review at your earliest convenience.'
  });

  const handleSave = () => {

    toast.success('Notification configuration saved successfully');
  };

  const updateConfig = (updates: Partial<NotificationConfigData>) => {
    setConfig(prev => ({ ...prev, ...updates }));
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Notification Configuration</CardTitle>
        <CardDescription>
          Configure notification channels, frequency, and message templates
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <NotificationChannels
          emailNotifications={config.emailNotifications}
          inAppNotifications={config.inAppNotifications}
          autoReminders={config.autoReminders}
          onEmailNotificationsChange={(enabled) => updateConfig({ emailNotifications: enabled })}
          onInAppNotificationsChange={(enabled) => updateConfig({ inAppNotifications: enabled })}
          onAutoRemindersChange={(enabled) => updateConfig({ autoReminders: enabled })}
        />

        <Separator />

        <NotificationSettings
          notificationFrequency={config.notificationFrequency}
          reminderFrequency={config.reminderFrequency}
          onNotificationFrequencyChange={(frequency) => updateConfig({ notificationFrequency: frequency })}
          onReminderFrequencyChange={(hours) => updateConfig({ reminderFrequency: hours })}
        />

        <EmailTemplateSection
          emailTemplate={config.emailTemplate}
          onEmailTemplateChange={(template) => updateConfig({ emailTemplate: template })}
        />

        <Button onClick={handleSave} className="bg-re-green hover:bg-re-green/90">
          <Save className="w-4 h-4 mr-2" />
          Save Notification Settings
        </Button>
      </CardContent>
    </Card>
  );
}

