'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Input } from '@/components/ui';
import { Textarea } from '@/components/ui';
import { Button } from '@/components/ui';
import { Card } from '@/components/ui';

export default function NewTeamPage() {
  const router = useRouter();
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!name.trim()) {
      alert('Le nom de l\'équipe est requis');
      return;
    }

    setSubmitting(true);
    try {
      const response = await fetch('/api/teams', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), description: description.trim() || null }),
      });

      if (!response.ok) {
        const error = await response.json();
        alert(error.error || 'Erreur lors de la création de l\'équipe');
        return;
      }

      const team = await response.json();
      router.push(`/teams/${team.id}`);
      router.refresh();
    } catch (error) {
      console.error('Error creating team:', error);
      alert('Erreur lors de la création de l\'équipe');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main className="mx-auto max-w-2xl px-4 py-8">
      <div className="mb-6">
        <Link href="/teams" className="text-muted hover:text-foreground">
          ← Retour aux équipes
        </Link>
      </div>

      <Card className="p-6">
        <h1 className="text-2xl font-bold text-foreground mb-6">Créer une équipe</h1>
        <form onSubmit={handleSubmit} className="space-y-4">
          <Input
            label="Nom de l'équipe *"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Ex: Équipe Produit"
            required
          />
          <Textarea
            label="Description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Description de l'équipe..."
            rows={3}
          />
          <div className="flex justify-end gap-3">
            <Button type="button" onClick={() => router.back()} variant="outline">
              Annuler
            </Button>
            <Button
              type="submit"
              disabled={submitting}
              className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
            >
              {submitting ? 'Création...' : 'Créer l\'équipe'}
            </Button>
          </div>
        </form>
      </Card>
    </main>
  );
}