import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { NotificationSettings as NotificationSettingsType } from '../types/settings';
import { PushPreferencesSection } from './PushPreferencesSection';

interface NotificationSettingsProps {
  notifications: NotificationSettingsType;
  onChange: (notifications: NotificationSettingsType) => void;
}

export function NotificationSettings({
  notifications,
  onChange,
}: NotificationSettingsProps) {
  const handleChange = (
    field: keyof NotificationSettingsType,
    value: boolean,
  ) => {
    onChange({
      ...notifications,
      [field]: value,
    });
  };

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold mb-4">Notifications par email</h3>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_notifications">Notifications email</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir des notifications par email
              </p>
            </div>
            <Checkbox
              id="email_notifications"
              checked={notifications.email_notifications}
              onCheckedChange={(checked) =>
                handleChange('email_notifications', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="push_notifications">Notifications push</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir des notifications push
              </p>
            </div>
            <Checkbox
              id="push_notifications"
              checked={notifications.push_notifications}
              onCheckedChange={(checked) =>
                handleChange('push_notifications', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="browser_notifications">
                Notifications navigateur
              </Label>
              <p className="text-sm text-muted-foreground">
                Recevoir des notifications dans le navigateur
              </p>
            </div>
            <Checkbox
              id="browser_notifications"
              checked={notifications.browser_notifications}
              onCheckedChange={(checked) =>
                handleChange('browser_notifications', checked === true)
              }
            />
          </div>
        </div>
      </div>

      <div>
        <h3 className="text-lg font-semibold mb-4">Notifications d'activité</h3>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_on_follow">Email lors d'un follow</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir un email quand quelqu'un vous suit
              </p>
            </div>
            <Checkbox
              id="email_on_follow"
              checked={notifications.email_on_follow}
              onCheckedChange={(checked) =>
                handleChange('email_on_follow', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_on_like">Email lors d'un like</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir un email quand quelqu'un aime votre contenu
              </p>
            </div>
            <Checkbox
              id="email_on_like"
              checked={notifications.email_on_like}
              onCheckedChange={(checked) =>
                handleChange('email_on_like', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_on_comment">
                Email lors d'un commentaire
              </Label>
              <p className="text-sm text-muted-foreground">
                Recevoir un email quand quelqu'un commente votre contenu
              </p>
            </div>
            <Checkbox
              id="email_on_comment"
              checked={notifications.email_on_comment}
              onCheckedChange={(checked) =>
                handleChange('email_on_comment', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_on_message">Email lors d'un message</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir un email quand vous recevez un message
              </p>
            </div>
            <Checkbox
              id="email_on_message"
              checked={notifications.email_on_message}
              onCheckedChange={(checked) =>
                handleChange('email_on_message', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_on_mention">Email lors d'une mention</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir un email quand quelqu'un vous mentionne
              </p>
            </div>
            <Checkbox
              id="email_on_mention"
              checked={notifications.email_on_mention}
              onCheckedChange={(checked) =>
                handleChange('email_on_mention', checked === true)
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="email_marketing">Email marketing</Label>
              <p className="text-sm text-muted-foreground">
                Recevoir des emails promotionnels et des actualités
              </p>
            </div>
            <Checkbox
              id="email_marketing"
              checked={notifications.email_marketing}
              onCheckedChange={(checked) =>
                handleChange('email_marketing', checked === true)
              }
            />
          </div>
        </div>
      </div>

      {/* N1.3: Push preferences from API */}
      <PushPreferencesSection />
    </div>
  );
}