import { useRef, useState } from "react";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useTrips } from "@/contexts/TripContext";
import { useAuth } from "@/contexts/AuthContext";
import { inviteTraveler } from "@/services/invitationService";
import type { TripInvitation, TripMember } from "@/types";

const invitationSchema = z.object({
  travelerName: z.string().trim().min(2, "Indiquez le nom du Voyageur."),
  email: z.string().trim().email("Saisissez une adresse email valide."),
});

export function InvitationStatus({ tripId, invitations, members }: {
  tripId: string;
  invitations: TripInvitation[];
  members: TripMember[];
}) {
  const { refetchTrips } = useTrips();
  const { currentUser } = useAuth();
  const submittingRef = useRef(false);
  const [travelerName, setTravelerName] = useState("");
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  const pendingInvitations = invitations.filter((invitation) => invitation.status === "pending");

  const invite = async () => {
    if (submittingRef.current) return;
    const parsed = invitationSchema.safeParse({ travelerName, email });
    if (!parsed.success) {
      toast.error(parsed.error.issues[0]?.message || "Vérifiez les informations du Voyageur.");
      return;
    }

    const normalizedEmail = parsed.data.email.toLowerCase();
    if (currentUser?.email.toLowerCase() === normalizedEmail) {
      toast.error("Utilisez une adresse Voyageur différente de votre compte Planner.");
      return;
    }
    if (members.some((member) => member.email.toLowerCase() === normalizedEmail)) {
      toast.error("Ce Voyageur est déjà membre de ce voyage.");
      return;
    }
    if (pendingInvitations.some((invitation) => invitation.email.toLowerCase() === normalizedEmail)) {
      toast.error("Une invitation est déjà en attente pour cette adresse.");
      return;
    }

    submittingRef.current = true;
    setLoading(true);
    try {
      const data = await inviteTraveler({
        tripId,
        email: normalizedEmail,
        travelerName: parsed.data.travelerName,
      });
      toast.success(data?.associated ? "Voyageur existant associé." : "Invitation envoyée.");
      setTravelerName("");
      setEmail("");
      refetchTrips();
    } catch (error) {
      const message = error instanceof Error ? error.message : "Impossible d’envoyer l’invitation.";
      toast.error(message);
    } finally {
      submittingRef.current = false;
      setLoading(false);
    }
  };

  return (
    <section className="mt-4 rounded-lg border bg-background/90 p-4" aria-labelledby="invite-traveler-title">
      <h2 id="invite-traveler-title" className="font-semibold">Inviter un Voyageur</h2>
      <p className="mt-1 text-sm text-muted-foreground">Chaque invitation ajoute un accès individuel sans remplacer les autres Voyageurs.</p>
      <div className="mt-4 grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
        <div className="space-y-2">
          <Label htmlFor="traveler-name">Nom</Label>
          <Input id="traveler-name" value={travelerName} onChange={(event) => setTravelerName(event.target.value)} placeholder="Prénom et nom" disabled={loading} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="traveler-email">Email</Label>
          <Input id="traveler-email" type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="voyageur@exemple.com" disabled={loading} />
        </div>
        <Button type="button" onClick={() => void invite()} disabled={loading}>
          {loading ? "Envoi…" : "Inviter"}
        </Button>
      </div>
      {pendingInvitations.length > 0 && (
        <div className="mt-4" aria-live="polite">
          <p className="text-sm font-medium">Invitations en attente</p>
          <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
            {pendingInvitations.map((invitation) => (
              <li key={invitation.email}>{invitation.email} · en attente d’acceptation</li>
            ))}
          </ul>
        </div>
      )}
    </section>
  );
}