'use client';
import { useState, useEffect } from 'react';
import { Setting } from '@/types';
import { settingsService } from '@/lib/services';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import Navigation from '@/components/Navigation';
import AuthGuard from '@/components/AuthGuard';
import SmtpSettingsForm from '@/components/SmtpSettingsForm';
import { Settings, Monitor, Save, CheckCircle, Mail, FileText, Download } from 'lucide-react';
import { ExportAnonymizationSelect, AnonymizationLevel } from '@/components/ExportAnonymizationSelect';

export const dynamic = 'force-dynamic';

function SettingsPageContent() {
  const [settings, setSettings] = useState<Setting[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [randomizePropositions, setRandomizePropositions] = useState(false);
  const [proposePageMessage, setProposePageMessage] = useState('');
  const [footerMessage, setFooterMessage] = useState('');
  const [exportAnonymization, setExportAnonymization] = useState<AnonymizationLevel>('full');

  useEffect(() => {
    // Vérifier la configuration Supabase
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
    
    // Si pas de configuration ou valeurs par défaut, rediriger vers setup
    if (!supabaseUrl || !supabaseAnonKey || 
        supabaseUrl === 'https://placeholder.supabase.co' || 
        supabaseAnonKey === 'your-anon-key') {
      console.log('🔧 Configuration Supabase manquante, redirection vers /setup');
      window.location.href = '/setup';
      return;
    }
    
    loadSettings();
  }, []);

  const loadSettings = async () => {
    try {
      setLoading(true);
      const settingsData = await settingsService.getAll();
      setSettings(settingsData);
      
      // Charger la valeur du paramètre d'ordre aléatoire
      const randomizeValue = await settingsService.getBooleanValue('randomize_propositions', false);
      setRandomizePropositions(randomizeValue);
      
      // Charger le message de la page de dépôt de propositions
      const messageValue = await settingsService.getStringValue('propose_page_message', 'Partagez votre vision et proposez des projets qui feront la différence dans votre collectif. Votre voix compte pour façonner l\'avenir de votre communauté.');
      setProposePageMessage(messageValue);
      
      // Charger le message du bas de page
      const footerValue = await settingsService.getStringValue('footer_message', 'Développé avec ❤️ pour faciliter la démocratie participative - [Logiciel libre et open source](GITURL) et transparent pour tous');
      setFooterMessage(footerValue);
      
      // Charger le niveau d'anonymisation des exports
      const anonymizationValue = await settingsService.getStringValue('export_anonymization', 'full') as AnonymizationLevel;
      setExportAnonymization(anonymizationValue);
    } catch (error) {
      console.error('Erreur lors du chargement des paramètres:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleRandomizeChange = async (checked: boolean) => {
    setRandomizePropositions(checked);
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      await settingsService.setBooleanValue('randomize_propositions', randomizePropositions);
      await settingsService.setStringValue('propose_page_message', proposePageMessage);
      await settingsService.setStringValue('footer_message', footerMessage);
      await settingsService.setStringValue('export_anonymization', exportAnonymization);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (error) {
      console.error('Erreur lors de la sauvegarde des paramètres:', error);
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
        <div className="container mx-auto px-4 py-8">
          <Navigation showBackButton={true} backUrl="/admin" />
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
              <p className="text-slate-600 dark:text-slate-300">Chargement des paramètres...</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <div className="container mx-auto px-4 py-8">
        <Navigation showBackButton={true} backUrl="/admin" />
        
        {/* Header */}
        <div className="mb-8">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Paramètres</h1>
              <p className="text-slate-600 dark:text-slate-300 mt-2">Configurez les paramètres de l'application</p>
            </div>
            <Button 
              onClick={handleSave} 
              disabled={saving}
              className="flex items-center gap-2"
            >
              {saving ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                  Sauvegarde...
                </>
              ) : saved ? (
                <>
                  <CheckCircle className="w-4 h-4" />
                  Sauvegardé
                </>
              ) : (
                <>
                  <Save className="w-4 h-4" />
                  Sauvegarder
                </>
              )}
            </Button>
          </div>
        </div>

        {/* Settings Categories */}
        <div className="space-y-8">
          {/* Affichage Category */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                  <Monitor className="w-5 h-5 text-blue-600 dark:text-blue-300" />
                </div>
                <div>
                  <CardTitle className="text-xl">Affichage</CardTitle>
                  <CardDescription>
                    Paramètres d'affichage de l'interface utilisateur
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Randomize Propositions Setting */}
              <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
                <div className="flex-1">
                  <Label htmlFor="randomize-propositions" className="text-base font-medium">
                    Afficher les propositions dans un ordre aléatoire lors du vote
                  </Label>
                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
                    Lorsque activé, les propositions seront affichées dans un ordre aléatoire pour chaque participant lors du vote.
                  </p>
                </div>
                <Switch
                  id="randomize-propositions"
                  checked={randomizePropositions}
                  onCheckedChange={handleRandomizeChange}
                  className="ml-4"
                />
              </div>
            </CardContent>
          </Card>

          {/* Textes Category */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
                  <FileText className="w-5 h-5 text-green-600 dark:text-green-300" />
                </div>
                <div>
                  <CardTitle className="text-xl">Textes</CardTitle>
                  <CardDescription>
                    Personnalisez les textes affichés dans l'application
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Propose Page Message Setting */}
              <div className="space-y-4">
                <div>
                  <Label htmlFor="propose-page-message" className="text-base font-medium">
                    Message d'invitation - Page de dépôt de propositions
                  </Label>
                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
                    Ce texte apparaît sous le titre de la campagne pour inviter les utilisateurs à déposer des propositions.
                  </p>
                </div>
                <textarea
                  id="propose-page-message"
                  value={proposePageMessage}
                  onChange={(e) => setProposePageMessage(e.target.value)}
                  className="w-full min-h-[100px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
                  placeholder="Entrez votre message d'invitation..."
                />
              </div>

              {/* Footer Message Setting */}
              <div className="space-y-4">
                <div>
                  <Label htmlFor="footer-message" className="text-base font-medium">
                    Message du bas de page
                  </Label>
                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
                    Ce texte apparaît en bas des pages publiques. Vous pouvez utiliser <code className="bg-slate-100 dark:bg-slate-700 px-1 rounded text-xs">[texte du lien](GITURL)</code> pour insérer un lien vers le repository Git.
                  </p>
                </div>
                                  <textarea
                    id="footer-message"
                    value={footerMessage}
                    onChange={(e) => setFooterMessage(e.target.value)}
                    className="w-full min-h-[80px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
                    placeholder="Entrez votre message de bas de page..."
                  />
              </div>
            </CardContent>
          </Card>

          {/* Exports Category */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
                  <Download className="w-5 h-5 text-purple-600 dark:text-purple-300" />
                </div>
                <div>
                  <CardTitle className="text-xl">Exports</CardTitle>
                  <CardDescription>
                    Paramètres de confidentialité pour les exports de données
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
                <ExportAnonymizationSelect
                  value={exportAnonymization}
                  onValueChange={setExportAnonymization}
                />
              </div>
            </CardContent>
          </Card>

          {/* Email Category */}
          <SmtpSettingsForm onSave={() => {
            setSaved(true);
            setTimeout(() => setSaved(false), 2000);
          }} />
        </div>
      </div>
    </div>
  );
}

export default function SettingsPage() {
  return (
    <AuthGuard>
      <SettingsPageContent />
    </AuthGuard>
  );
}