'use client';

import { useState } from 'react';
import Link from 'next/link';
import {
  Eye,
  EyeOff,
  Mail,
  Lock,
  ArrowRight,
  Loader2,
  CheckCircle,
  AlertTriangle,
  UserPlus,
  Languages,
  User,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useRegister } from './useRegister';
import { cn } from '@/lib/utils';

function validateEmail(email: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function validatePassword(password: string) {
  return password.length >= 8;
}

function getPasswordStrength(password: string) {
  if (password.length === 0) return { score: 0, label: '', color: '' };
  let score = 0;
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[a-z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  if (score <= 2) return { score, label: 'Faible', color: 'bg-destructive' };
  if (score <= 4) return { score, label: 'Moyen', color: 'bg-yellow-500' };
  return { score, label: 'Fort', color: 'bg-green-500' };
}

function PasswordToggleIcon({ visible, onToggle, label }: { visible: boolean; onToggle: () => void; label: string }) {
  return (
    <button
      type="button"
      onClick={onToggle}
      className="text-muted-foreground hover:text-foreground transition-colors duration-200 pointer-events-auto"
      tabIndex={-1}
      aria-label={label}
    >
      {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
    </button>
  );
}

export function RegisterForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [touched, setTouched] = useState({ name: false, email: false, password: false, confirmPassword: false });

  const registerMutation = useRegister();

  const nameError = touched.name && name.length > 0 && name.length < 2
    ? 'Le nom doit contenir au moins 2 caractères'
    : undefined;

  const emailError = touched.email && email.length > 0 && !validateEmail(email)
    ? 'Adresse email invalide'
    : undefined;

  const passwordError = touched.password && password.length > 0 && !validatePassword(password)
    ? 'Mot de passe trop court (minimum 8 caractères)'
    : undefined;

  const confirmError = touched.confirmPassword && confirmPassword.length > 0 && password !== confirmPassword
    ? 'Les mots de passe ne correspondent pas'
    : undefined;

  const passwordStrength = getPasswordStrength(password);

  const isFormValid =
    name.length >= 2 &&
    validateEmail(email) &&
    validatePassword(password) &&
    password === confirmPassword;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setTouched({ name: true, email: true, password: true, confirmPassword: true });
    if (!isFormValid) return;
    registerMutation.mutate({ name, email, password });
  };

  const getConfirmRightIcon = () => {
    if (touched.confirmPassword && confirmPassword.length > 0 && password === confirmPassword) {
      return <CheckCircle className="h-4 w-4 text-green-500" />;
    }
    return (
      <PasswordToggleIcon
        visible={showConfirm}
        onToggle={() => setShowConfirm(!showConfirm)}
        label={showConfirm ? 'Masquer' : 'Afficher'}
      />
    );
  };

  return (
    <Card variant="elevated" className="w-full max-w-md mx-auto" hover={false}>
      <CardHeader className="text-center pb-6">
        <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg group-hover:shadow-xl group-hover:shadow-primary/25 transition-all duration-300 group-hover:-translate-y-0.5">
            <Languages className="h-6 w-6" />
          </div>
          <span className="text-2xl font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
            Office Translator
          </span>
        </Link>

        <CardTitle className="text-2xl font-bold">Créer un compte</CardTitle>
        <CardDescription>Commencez à traduire gratuitement</CardDescription>
      </CardHeader>

      <CardContent className="space-y-5">
        {registerMutation.isError && (
          <div className="rounded-lg bg-destructive/10 border border-destructive/30 p-4">
            <div className="flex items-start gap-3">
              <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
              <p className="text-sm text-destructive">
                {registerMutation.error?.message || "L'inscription a échoué"}
              </p>
            </div>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Nom</Label>
            <Input
              id="name"
              type="text"
              placeholder="Votre nom"
              value={name}
              onChange={(e) => setName(e.target.value)}
              onBlur={() => setTouched((t) => ({ ...t, name: true }))}
              leftIcon={<User className="h-4 w-4" />}
              rightIcon={
                touched.name && name.length > 0
                  ? name.length >= 2
                    ? <CheckCircle className="h-4 w-4 text-green-500" />
                    : <AlertTriangle className="h-4 w-4 text-destructive" />
                  : undefined
              }
              error={nameError}
              required
              autoComplete="name"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="email">Adresse email</Label>
            <Input
              id="email"
              type="email"
              placeholder="vous@exemple.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              onBlur={() => setTouched((t) => ({ ...t, email: true }))}
              leftIcon={<Mail className="h-4 w-4" />}
              rightIcon={
                touched.email && email.length > 0
                  ? validateEmail(email)
                    ? <CheckCircle className="h-4 w-4 text-green-500" />
                    : <AlertTriangle className="h-4 w-4 text-destructive" />
                  : undefined
              }
              error={emailError}
              required
              autoComplete="email"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="password">Mot de passe</Label>
            <Input
              id="password"
              type={showPassword ? 'text' : 'password'}
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              onBlur={() => setTouched((t) => ({ ...t, password: true }))}
              leftIcon={<Lock className="h-4 w-4" />}
              rightIcon={
                <PasswordToggleIcon
                  visible={showPassword}
                  onToggle={() => setShowPassword(!showPassword)}
                  label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
                />
              }
              error={passwordError}
              required
              minLength={8}
              autoComplete="new-password"
            />
            {password.length > 0 && (
              <div className="space-y-1 pt-1">
                <div className="flex gap-1">
                  {[1, 2, 3, 4].map((level) => (
                    <div
                      key={level}
                      className={cn(
                        'h-1 flex-1 rounded-full transition-all duration-300',
                        level <= Math.ceil((passwordStrength.score / 6) * 4)
                          ? passwordStrength.color
                          : 'bg-border'
                      )}
                    />
                  ))}
                </div>
                <p className={cn('text-xs', passwordStrength.score <= 2 ? 'text-destructive' : passwordStrength.score <= 4 ? 'text-muted-foreground' : 'text-green-500')}>
                  Force : {passwordStrength.label}
                </p>
              </div>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
            <Input
              id="confirmPassword"
              type={showConfirm ? 'text' : 'password'}
              placeholder="••••••••"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              onBlur={() => setTouched((t) => ({ ...t, confirmPassword: true }))}
              leftIcon={<Lock className="h-4 w-4" />}
              rightIcon={getConfirmRightIcon()}
              error={confirmError}
              required
              autoComplete="new-password"
            />
          </div>

          <Button
            type="submit"
            variant="premium"
            size="lg"
            className="w-full"
            disabled={registerMutation.isPending}
            loading={registerMutation.isPending}
          >
            {registerMutation.isPending ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Création du compte...
              </>
            ) : (
              <>
                <UserPlus className="mr-2 h-4 w-4" />
                Créer mon compte
                <ArrowRight className="ml-2 h-4 w-4" />
              </>
            )}
          </Button>
        </form>

        <p className="text-center text-sm text-muted-foreground">
          Vous avez déjà un compte ?{' '}
          <Link href="/auth/login" className="text-primary hover:underline font-medium">
            Se connecter
          </Link>
        </p>

        <p className="text-center text-xs text-muted-foreground">
          En créant un compte, vous acceptez notre{' '}
          <span className="text-muted-foreground">
            utilisation du service
          </span>
          .
        </p>
      </CardContent>
    </Card>
  );
}