'use client';

import React, { useState, useEffect } from 'react';
import { useStore } from '@/lib/store';
import { useTranslation } from '@/lib/i18n';
import {
  Headphones,
  Mail,
  Lock,
  User,
  Phone,
  MapPin,
  Eye,
  EyeOff,
  Loader2,
  ArrowRight,
  Globe,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useToast } from '@/hooks/use-toast';

interface Area {
  id: string;
  name: string;
  code: string;
}

export default function ClientRegistration() {
  const login = useStore((s) => s.login);
  const language = useStore((s) => s.language);
  const setLanguage = useStore((s) => s.setLanguage);
  const { t } = useTranslation();
  const { toast } = useToast();

  const [mode, setMode] = useState<'login' | 'register'>('login');
  const [loading, setLoading] = useState(false);
  const [areas, setAreas] = useState<Area[]>([]);

  // Form state
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [areaId, setAreaId] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  // Form errors
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Fetch areas
  useEffect(() => {
    const fetchAreas = async () => {
      try {
        const res = await fetch('/api/areas?isActive=true');
        if (res.ok) {
          const data = await res.json();
          setAreas(data.areas || []);
        }
      } catch {
        // silently fail
      }
    };
    fetchAreas();
  }, []);

  const validate = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (mode === 'register') {
      if (!name.trim()) newErrors.name = t.form.requiredField;
      if (!phone.trim()) newErrors.phone = t.form.requiredField;
      if (!areaId) newErrors.area = t.form.requiredField;
      if (password !== confirmPassword) newErrors.confirmPassword = t.form.passwordMismatch;
      if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';
    }

    if (!email.trim()) newErrors.email = t.form.requiredField;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = t.form.invalidEmail;
    if (!password) newErrors.password = t.form.requiredField;

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

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

    setLoading(true);
    try {
      if (mode === 'register') {
        // Register the user
        const registerRes = await fetch('/api/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email,
            password,
            name,
            phone,
            role: 'user',
            areaId: areaId || undefined,
            language,
          }),
        });

        if (!registerRes.ok) {
          const data = await registerRes.json();
          toast({
            title: 'Registration Failed',
            description: data.error || t.messages.error.registerFailed,
            variant: 'destructive',
          });
          setLoading(false);
          return;
        }

        // Auto-login after registration
        const registerData = await registerRes.json();
        login({
          id: registerData.user.id,
          email: registerData.user.email,
          name: registerData.user.name,
          phone: registerData.user.phone,
          role: 'user',
          isActive: true,
          area: registerData.user.area?.name,
          avatar: registerData.user.avatar,
          createdAt: registerData.user.createdAt,
          updatedAt: new Date().toISOString(),
        });

        toast({
          title: t.messages.success.registerSuccess,
        });
      } else {
        // Login
        const loginRes = await fetch('/api/auth', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
        });

        if (!loginRes.ok) {
          const data = await loginRes.json();
          toast({
            title: 'Login Failed',
            description: data.error || t.messages.error.loginFailed,
            variant: 'destructive',
          });
          setLoading(false);
          return;
        }

        const loginData = await loginRes.json();
        login({
          id: loginData.user.id,
          email: loginData.user.email,
          name: loginData.user.name,
          phone: loginData.user.phone,
          role: loginData.user.role,
          isActive: loginData.user.isActive,
          area: loginData.user.area?.name,
          avatar: loginData.user.avatar,
          createdAt: loginData.user.createdAt,
          updatedAt: new Date().toISOString(),
        });

        toast({
          title: t.messages.success.loginSuccess,
        });
      }
    } catch {
      toast({
        title: 'Error',
        description: t.messages.error.networkError,
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  };

  const switchMode = () => {
    setMode(mode === 'login' ? 'register' : 'login');
    setErrors({});
    setPassword('');
    setConfirmPassword('');
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-emerald-50/50 p-4">
      <div className="w-full max-w-md">
        {/* Logo & Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-emerald-500 text-white shadow-lg shadow-emerald-200 mb-4">
            <Headphones className="w-8 h-8" />
          </div>
          <h1 className="text-2xl font-bold text-emerald-800">{t.common.appName}</h1>
          <p className="text-sm text-emerald-600/70 mt-1">{t.portal.tagline}</p>
        </div>

        {/* Language Switcher */}
        <div className="flex justify-center mb-4">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setLanguage(language === 'en' ? 'bn' : 'en')}
            className="text-emerald-600 hover:bg-emerald-50"
          >
            <Globe className="w-4 h-4 mr-1" />
            {language === 'en' ? 'বাংলা' : 'English'}
          </Button>
        </div>

        {/* Form Card */}
        <Card className="border-emerald-100 shadow-lg shadow-emerald-100/50 overflow-hidden">
          {/* Tab Switcher */}
          <div className="flex border-b border-emerald-100">
            <button
              onClick={() => { setMode('login'); setErrors({}); }}
              className={`flex-1 py-3 text-sm font-semibold transition-all ${
                mode === 'login'
                  ? 'text-emerald-700 border-b-2 border-emerald-500 bg-emerald-50/50'
                  : 'text-gray-400 hover:text-emerald-600'
              }`}
            >
              {t.portal.login}
            </button>
            <button
              onClick={() => { setMode('register'); setErrors({}); }}
              className={`flex-1 py-3 text-sm font-semibold transition-all ${
                mode === 'register'
                  ? 'text-emerald-700 border-b-2 border-emerald-500 bg-emerald-50/50'
                  : 'text-gray-400 hover:text-emerald-600'
              }`}
            >
              {t.portal.register}
            </button>
          </div>

          <CardContent className="p-6">
            <form onSubmit={handleSubmit} className="space-y-4">
              {/* Name (Register only) */}
              {mode === 'register' && (
                <div className="space-y-1.5">
                  <Label htmlFor="reg-name" className="text-emerald-700 text-sm">
                    {t.form.name} *
                  </Label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400" />
                    <Input
                      id="reg-name"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      placeholder="Enter your full name"
                      className={`pl-9 ${errors.name ? 'border-red-300 focus:border-red-400' : 'border-emerald-200 focus:border-emerald-400'} focus:ring-emerald-400`}
                    />
                  </div>
                  {errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
                </div>
              )}

              {/* Email */}
              <div className="space-y-1.5">
                <Label htmlFor="reg-email" className="text-emerald-700 text-sm">
                  {t.form.email} *
                </Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400" />
                  <Input
                    id="reg-email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="your@email.com"
                    className={`pl-9 ${errors.email ? 'border-red-300 focus:border-red-400' : 'border-emerald-200 focus:border-emerald-400'} focus:ring-emerald-400`}
                  />
                </div>
                {errors.email && <p className="text-xs text-red-500">{errors.email}</p>}
              </div>

              {/* Phone (Register only) */}
              {mode === 'register' && (
                <div className="space-y-1.5">
                  <Label htmlFor="reg-phone" className="text-emerald-700 text-sm">
                    {t.form.phone} *
                  </Label>
                  <div className="relative">
                    <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400" />
                    <Input
                      id="reg-phone"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      placeholder="+880 1XXX XXXXXX"
                      className={`pl-9 ${errors.phone ? 'border-red-300 focus:border-red-400' : 'border-emerald-200 focus:border-emerald-400'} focus:ring-emerald-400`}
                    />
                  </div>
                  {errors.phone && <p className="text-xs text-red-500">{errors.phone}</p>}
                </div>
              )}

              {/* Area (Register only) */}
              {mode === 'register' && (
                <div className="space-y-1.5">
                  <Label htmlFor="reg-area" className="text-emerald-700 text-sm">
                    {t.form.area}
                  </Label>
                  <Select value={areaId} onValueChange={setAreaId}>
                    <SelectTrigger
                      className={`border-emerald-200 focus:ring-emerald-400 ${errors.area ? 'border-red-300' : ''}`}
                    >
                      <MapPin className="w-4 h-4 mr-2 text-emerald-400" />
                      <SelectValue placeholder={t.form.selectPlaceholder} />
                    </SelectTrigger>
                    <SelectContent>
                      {areas.map((area) => (
                        <SelectItem key={area.id} value={area.id}>
                          {area.name} ({area.code})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.area && <p className="text-xs text-red-500">{errors.area}</p>}
                </div>
              )}

              {/* Password */}
              <div className="space-y-1.5">
                <Label htmlFor="reg-password" className="text-emerald-700 text-sm">
                  {t.form.password} *
                </Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400" />
                  <Input
                    id="reg-password"
                    type={showPassword ? 'text' : 'password'}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder={mode === 'register' ? 'Min. 6 characters' : 'Enter your password'}
                    className={`pl-9 pr-10 ${errors.password ? 'border-red-300 focus:border-red-400' : 'border-emerald-200 focus:border-emerald-400'} focus:ring-emerald-400`}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 text-gray-400"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </Button>
                </div>
                {errors.password && <p className="text-xs text-red-500">{errors.password}</p>}
              </div>

              {/* Confirm Password (Register only) */}
              {mode === 'register' && (
                <div className="space-y-1.5">
                  <Label htmlFor="reg-confirm-password" className="text-emerald-700 text-sm">
                    {t.form.confirmPassword} *
                  </Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400" />
                    <Input
                      id="reg-confirm-password"
                      type={showConfirmPassword ? 'text' : 'password'}
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      placeholder="Confirm your password"
                      className={`pl-9 pr-10 ${errors.confirmPassword ? 'border-red-300 focus:border-red-400' : 'border-emerald-200 focus:border-emerald-400'} focus:ring-emerald-400`}
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 text-gray-400"
                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    >
                      {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </Button>
                  </div>
                  {errors.confirmPassword && (
                    <p className="text-xs text-red-500">{errors.confirmPassword}</p>
                  )}
                </div>
              )}

              {/* Submit Button */}
              <Button
                type="submit"
                disabled={loading}
                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2.5"
              >
                {loading ? (
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                ) : (
                  <ArrowRight className="w-4 h-4 mr-2" />
                )}
                {mode === 'login' ? t.portal.login : t.portal.register}
              </Button>

              {/* Switch Mode Link */}
              <div className="text-center text-sm">
                <span className="text-muted-foreground">
                  {mode === 'login' ? "Don't have an account? " : 'Already have an account? '}
                </span>
                <button
                  type="button"
                  onClick={switchMode}
                  className="text-emerald-600 hover:text-emerald-700 font-semibold"
                >
                  {mode === 'login' ? t.portal.register : t.portal.login}
                </button>
              </div>
            </form>
          </CardContent>
        </Card>

        {/* Demo Credentials */}
        <div className="mt-6 text-center">
          <p className="text-xs text-muted-foreground mb-2">Demo credentials:</p>
          <div className="inline-flex flex-wrap justify-center gap-2">
            <Badge variant="outline" className="text-[10px] bg-emerald-50 text-emerald-700 border-emerald-200">
              User: user1@usd.com / admin123
            </Badge>
          </div>
        </div>

        {/* Footer */}
        <p className="text-center text-xs text-muted-foreground mt-8">
          {t.portal.copyright}
        </p>
      </div>
    </div>
  );
}