'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { Campaign } from '@/types';
import { campaignService, propositionService, settingsService } from '@/lib/services';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, FileText, User, Mail, CheckCircle, AlertCircle } from 'lucide-react';
import { MarkdownContent } from '@/components/MarkdownContent';
import { MarkdownEditor } from '@/components/MarkdownEditor';
import { PROJECT_CONFIG } from '@/lib/project.config';
import Footer from '@/components/Footer';

export const dynamic = 'force-dynamic';

export default function PublicProposePage() {
  const params = useParams();
  const campaignId = params.id as string;
  
  const [campaign, setCampaign] = useState<Campaign | null>(null);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [startTime] = useState(Date.now()); // Validation temporelle
  const [proposePageMessage, setProposePageMessage] = useState('');
  
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    author_first_name: '',
    author_last_name: '',
    author_email: '',
    website: '' // Honeypot field
  });

  useEffect(() => {
    if (campaignId) {
      loadCampaign();
    }
  }, [campaignId]);

  const loadCampaign = async () => {
    try {
      setLoading(true);
      const [campaigns, messageValue] = await Promise.all([
        campaignService.getAll(),
        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é.')
      ]);
      
      const campaignData = campaigns.find((c: Campaign) => c.id === campaignId);
      
      if (!campaignData) {
        setError('Campagne non trouvée');
        return;
      }
      
      if (campaignData.status !== 'deposit') {
        setError('Cette campagne n\'accepte plus de propositions');
        return;
      }
      
      setCampaign(campaignData);
      setProposePageMessage(messageValue);
    } catch (error) {
      console.error('Erreur lors du chargement de la campagne:', error);
      setError('Erreur lors du chargement de la campagne');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setError('');

    // Validation temporelle - détecte les soumissions trop rapides
    const timeSpent = Date.now() - startTime;
    if (timeSpent < 5000) { // Moins de 5 secondes
      setError('Veuillez prendre le temps de bien rédiger votre proposition');
      setSubmitting(false);
      return;
    }

    // Validation honeypot - détecte les bots
    if (formData.website) {
      setError('Soumission invalide');
      setSubmitting(false);
      return;
    }

    try {
      await propositionService.create({
        campaign_id: campaignId,
        title: formData.title,
        description: formData.description,
        author_first_name: formData.author_first_name,
        author_last_name: formData.author_last_name,
        author_email: formData.author_email
      });
      
      setSuccess(true);
      setFormData({
        title: '',
        description: '',
        author_first_name: '',
        author_last_name: '',
        author_email: '',
        website: ''
      });
    } catch (err: any) {
      const errorMessage = err?.message || err?.details || 'Erreur lors de la soumission de la proposition';
      setError(`Erreur lors de la soumission de la proposition: ${errorMessage}`);
    } finally {
      setSubmitting(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
        <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 de la campagne...</p>
        </div>
      </div>
    );
  }

  if (error && !campaign) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
        <div className="text-center">
          <Card className="max-w-md mx-auto">
            <CardContent className="p-8">
              <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
              </div>
              <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Erreur</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">{error}</p>
              <Button asChild>
                <Link href="/">Retour à l'accueil</Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  if (success) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
        <div className="text-center">
          <Card className="max-w-md mx-auto">
            <CardContent className="p-8">
              <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
              </div>
              <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Proposition soumise !</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                Votre proposition a été soumise avec succès. Merci pour votre participation !
              </p>
              <div className="space-y-3">
                <Button 
                  onClick={() => setSuccess(false)}
                  className="w-full"
                >
                  Soumettre une autre proposition
                </Button>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/">Retour à l'accueil</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <div className="text-center">
            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-4">
              {campaign?.title}
            </h1>
            <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
              {proposePageMessage}
            </p>
          </div>
        </div>

        {/* Campaign Description */}
        <div className="mb-8 max-w-3xl mx-auto">
          <MarkdownContent 
            content={campaign?.description || ''} 
            className="text-slate-700 dark:text-slate-300 text-base leading-relaxed"
          />
        </div>

        {/* Form */}
        <Card className="max-w-3xl mx-auto">
          <CardHeader className="text-center">
            <CardTitle className="text-2xl">Votre proposition</CardTitle>
          </CardHeader>

          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {error && (
                <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                  <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
                </div>
              )}

              {/* Honeypot field - caché pour détecter les bots */}
              <input
                type="text"
                name="website"
                value={formData.website}
                onChange={handleChange}
                style={{ 
                  position: 'absolute', 
                  left: '-9999px', 
                  width: '1px', 
                  height: '1px',
                  opacity: 0,
                  pointerEvents: 'none'
                }}
                tabIndex={-1}
                autoComplete="off"
                aria-hidden="true"
              />

              <div className="space-y-2">
                <label htmlFor="title" className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  Titre de la proposition *
                </label>
                <Input
                  id="title"
                  name="title"
                  value={formData.title}
                  onChange={handleChange}
                  placeholder="Titre de votre proposition"
                  required
                />
              </div>

              <MarkdownEditor
                value={formData.description}
                onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
                placeholder="Décrivez votre proposition en détail..."
                label="Description *"
                maxLength={2000}
              />

              <div className="border-t border-slate-200 dark:border-slate-700 pt-6">
                <h3 className="text-lg font-medium text-slate-900 dark:text-slate-100 mb-4 flex items-center gap-2">
                  <User className="w-5 h-5" />
                  Vos informations
                </h3>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label htmlFor="author_first_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
                      Prénom *
                    </label>
                    <Input
                      id="author_first_name"
                      name="author_first_name"
                      value={formData.author_first_name}
                      onChange={handleChange}
                      placeholder="Votre prénom"
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <label htmlFor="author_last_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
                      Nom *
                    </label>
                    <Input
                      id="author_last_name"
                      name="author_last_name"
                      value={formData.author_last_name}
                      onChange={handleChange}
                      placeholder="Votre nom"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-2 mt-4">
                  <label htmlFor="author_email" className="text-sm font-medium text-slate-700 dark:text-slate-300 flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    Email *
                  </label>
                  <Input
                    id="author_email"
                    name="author_email"
                    type="email"
                    value={formData.author_email}
                    onChange={handleChange}
                    placeholder="votre.email@exemple.com"
                    required
                  />
                </div>
              </div>

              <div className="flex items-center justify-end pt-6">
                <Button type="submit" disabled={submitting} size="lg">
                  {submitting ? 'Soumission...' : 'Soumettre la proposition'}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

        {/* Footer discret */}
        <Footer />
      </div>
    </div>
  );
}