"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { UserProfile, Team } from "@/lib/types";

interface ProfileFormProps {
  teams: Team[];
  initialProfile?: UserProfile;
  onSubmit: (profile: UserProfile) => void;
}

export function ProfileForm({
  teams,
  initialProfile,
  onSubmit,
}: ProfileFormProps) {
  const [firstName, setFirstName] = useState(initialProfile?.firstName || "");
  const [lastName, setLastName] = useState(initialProfile?.lastName || "");
  const [teamId, setTeamId] = useState(initialProfile?.teamId || "");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (firstName && lastName && teamId) {
      onSubmit({ firstName, lastName, teamId });
    }
  };

  const isValid =
    firstName.length > 0 && lastName.length > 0 && teamId.length > 0;

  // Group teams by direction
  const teamsByDirection = teams.reduce((acc, team) => {
    if (!acc[team.direction]) {
      acc[team.direction] = [];
    }
    acc[team.direction].push(team);
    return acc;
  }, {} as Record<string, Team[]>);

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Informations personnelles</CardTitle>
        <CardDescription>
          Renseignez vos informations pour commencer votre auto-évaluation
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="firstName">Prénom</Label>
            <Input
              id="firstName"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              placeholder="Votre prénom"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="lastName">Nom</Label>
            <Input
              id="lastName"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              placeholder="Votre nom"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="team">Équipe</Label>
            <Select value={teamId} onValueChange={setTeamId} required>
              <SelectTrigger>
                <SelectValue placeholder="Sélectionnez votre équipe" />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(teamsByDirection).map(
                  ([direction, directionTeams]) => (
                    <div key={direction}>
                      <div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
                        {direction}
                      </div>
                      {directionTeams.map((team) => (
                        <SelectItem key={team.id} value={team.id}>
                          {team.name}
                        </SelectItem>
                      ))}
                    </div>
                  )
                )}
              </SelectContent>
            </Select>
          </div>

          <Button type="submit" className="w-full" disabled={!isValid}>
            {initialProfile ? "Mettre à jour" : "Commencer l'évaluation"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}