import { useState, useEffect } from 'react';
import { useAuthStore } from '@/stores/auth';
import { getSettings, updateSettings } from '../services/settingsService';
import { UserSettings } from '../types/settings';
import { SettingsTabs } from '../components/SettingsTabs';
import { Button } from '@/components/ui/button';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { toast } from 'react-hot-toast';
import { settingsSchema } from '../schemas/settingsSchema';

export function SettingsPage() {
  const { user } = useAuthStore();
  const [settings, setSettings] = useState<UserSettings | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!user?.id) {
      setError('Vous devez être connecté pour accéder aux paramètres');
      setIsLoading(false);
      return;
    }

    const loadSettings = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const userSettings = await getSettings(user.id);
        setSettings(userSettings);
      } catch (err) {
        const errorMessage =
          err instanceof Error ? err.message : 'Erreur de chargement des paramètres';
        setError(errorMessage);
        toast.error(errorMessage);
      } finally {
        setIsLoading(false);
      }
    };

    loadSettings();
  }, [user?.id]);

  const handleSave = async () => {
    if (!user?.id || !settings) {
      return;
    }

    // Valider les settings avec le schéma Zod
    const validationResult = settingsSchema.safeParse(settings);
    if (!validationResult.success) {
      const errors = validationResult.error.errors
        .map((e) => `${e.path.join('.')}: ${e.message}`)
        .join(', ');
      toast.error(`Erreur de validation: ${errors}`);
      return;
    }

    try {
      setIsSaving(true);
      await updateSettings(user.id, settings);
      toast.success('Paramètres sauvegardés avec succès');
    } catch (err) {
      const errorMessage =
        err instanceof Error ? err.message : 'Erreur lors de la sauvegarde';
      toast.error(errorMessage);
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <LoadingSpinner />
      </div>
    );
  }

  if (error && !settings) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-2xl mx-auto">
          <h1 className="text-2xl font-bold mb-4">Paramètres</h1>
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
            {error}
          </div>
        </div>
      </div>
    );
  }

  // Si settings n'est pas chargé mais qu'il n'y a pas d'erreur, afficher un état de chargement
  // au lieu de retourner null (qui empêche la navigation de se terminer)
  if (!settings) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-2xl mx-auto">
          <h1 className="text-2xl font-bold mb-4">Paramètres</h1>
          <div className="flex items-center justify-center min-h-[200px]">
            <LoadingSpinner />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold mb-2">Paramètres</h1>
          <p className="text-muted-foreground">
            Gérez vos paramètres de compte et préférences
          </p>
        </div>

        <div className="bg-card rounded-lg border p-6">
          <SettingsTabs settings={settings} onChange={setSettings} />

          <div className="mt-6 flex justify-end">
            <Button
              onClick={handleSave}
              disabled={isSaving}
              className="min-w-[120px]"
            >
              {isSaving ? (
                <>
                  <LoadingSpinner className="mr-2 h-4 w-4" />
                  Sauvegarde...
                </>
              ) : (
                'Sauvegarder'
              )}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
