'use client';

import { useState, useEffect, useCallback } from 'react';
import { useTranslations } from 'next-intl';
import { Alert, Button } from 'react-bootstrap';
import { useAuth } from '@/contexts/AuthContext';
import { getCarpoolsByEvenement, createCarpool, deleteCarpool, updateCarpool, sendCarpoolContactMessage, Carpool } from '@/services/covoiturageService';
import ContactModal from '@/components/community/ContactModal';
import CarpoolForm, { SAISIE_VIDE, type CarpoolSaisie } from '@/components/community/carpool/CarpoolForm';
import CarpoolItem from '@/components/community/carpool/CarpoolItem';
import Link from 'next/link';

interface CarpoolSectionProps {
  evenementId: number;
}

/** Covoiturages d'un événement : dépôt, correction et suppression par l'auteur, contact des autres membres. */
export default function CarpoolSection({ evenementId }: CarpoolSectionProps) {
  const t = useTranslations('Carpool');
  const { isAuthenticated, user } = useAuth();

  const [carpools, setCarpools] = useState<Carpool[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const [showForm, setShowForm] = useState(false);

  const [saisie, setSaisie] = useState<CarpoolSaisie>(SAISIE_VIDE);
  const [editing, setEditing] = useState<Carpool | null>(null);
  const [contactCarpoolId, setContactCarpoolId] = useState<number | null>(null);
  const [contactRecipient, setContactRecipient] = useState('');

  const loadCarpools = useCallback(async () => {
    try {
      setLoading(true);
      const data = await getCarpoolsByEvenement(evenementId);
      setCarpools(data);
    } catch {
      setError(t('error_load'));
    } finally {
      setLoading(false);
    }
  }, [evenementId, t]);

  useEffect(() => {
    loadCarpools();
  }, [loadCarpools]);

  const fermerFormulaire = () => {
    setShowForm(false);
    setEditing(null);
    setSaisie(SAISIE_VIDE);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!saisie.ville.trim()) return;

    setSubmitting(true);
    setError('');

    try {
      const carpool = await createCarpool({
        evenementId,
        ville: saisie.ville.trim(),
        nombre: saisie.nombre,
        heure: saisie.heure || undefined,
        propose: saisie.propose,
      });
      setCarpools(prev => [carpool, ...prev]);
      fermerFormulaire();
    } catch {
      setError(t('error_create'));
    } finally {
      setSubmitting(false);
    }
  };

  const startEdit = (carpool: Carpool) => {
    setEditing(carpool);
    setSaisie({ ville: carpool.ville, nombre: carpool.nombre, heure: carpool.heure ?? '', propose: carpool.propose });
    setShowForm(true);
  };

  const handleUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editing || !saisie.ville.trim()) return;
    setSubmitting(true);
    setError('');
    try {
      const updated = await updateCarpool(editing.id, {
        ville: saisie.ville.trim(),
        nombre: saisie.nombre,
        heure: saisie.heure || null,
        propose: saisie.propose,
      });
      setCarpools(prev => prev.map(c => (c.id === updated.id ? updated : c)));
      fermerFormulaire();
    } catch {
      setError(t('error_update'));
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm(t('delete_confirm'))) return;

    try {
      await deleteCarpool(id);
      setCarpools(prev => prev.filter(c => c.id !== id));
    } catch {
      setError(t('error_delete'));
    }
  };

  const estAuteur = (carpool: Carpool) => isAuthenticated && user?.username === carpool.auteur?.pseudo;

  return (
    <>
    <div className="carpool-section mt-4">
      <h3>{t('title')}</h3>

      {error && <Alert variant="danger" dismissible onClose={() => setError('')}>{error}</Alert>}

      {isAuthenticated ? (
        showForm ? (
          <CarpoolForm
            saisie={saisie}
            onChange={setSaisie}
            onSubmit={editing ? handleUpdate : handleSubmit}
            onCancel={fermerFormulaire}
            submitting={submitting}
            editing={editing !== null}
          />
        ) : (
          <Button variant="outline-primary" className="mb-4" onClick={() => setShowForm(true)}>
            {t('add')}
          </Button>
        )
      ) : (
        <p className="text-muted mb-4">
          <Link href="/connexion">
            {t('login_to_carpool')}
          </Link>
        </p>
      )}

      {loading ? (
        <p className="text-muted">...</p>
      ) : carpools.length === 0 ? (
        <p className="text-muted">{t('empty')}</p>
      ) : (
        <div className="carpools-list">
          {carpools.map((carpool) => (
            <CarpoolItem
              key={carpool.id}
              carpool={carpool}
              isOwner={estAuteur(carpool)}
              canContact={isAuthenticated && !estAuteur(carpool)}
              onContact={(c) => {
                setContactCarpoolId(c.id);
                setContactRecipient(c.auteur?.pseudo || '');
              }}
              onEdit={startEdit}
              onDelete={handleDelete}
            />
          ))}
        </div>
      )}
    </div>

    <ContactModal
      show={contactCarpoolId !== null}
      onHide={() => setContactCarpoolId(null)}
      onSend={async (message) => {
        if (contactCarpoolId) {
          await sendCarpoolContactMessage(contactCarpoolId, message);
        }
      }}
      recipientName={contactRecipient}
    />
    </>
  );
}