import React, { useState } from 'react';
import { Button, Input, Label } from 'xertica-ui/ui';
import { XerticaLogo } from 'xertica-ui/brand';
import { ArrowLeft, CheckCircle2, AlertCircle } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { AuthPageShell } from './AuthPageShell';
import { useTranslation } from 'react-i18next';

export function ResetPasswordContent() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [passwordStrength, setPasswordStrength] = useState<'weak' | 'medium' | 'strong' | null>(
    null
  );

  const checkPasswordStrength = (pwd: string) => {
    if (pwd.length === 0) {
      setPasswordStrength(null);
      return;
    }
    if (pwd.length < 6) setPasswordStrength('weak');
    else if (pwd.length < 10) setPasswordStrength('medium');
    else setPasswordStrength('strong');
  };

  const handlePasswordChange = (value: string) => {
    setPassword(value);
    checkPasswordStrength(value);
    setError('');
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (password.length < 6) {
      setError(t('resetPassword.errorMinLength'));
      return;
    }
    if (password !== confirmPassword) {
      setError(t('resetPassword.errorMismatch'));
      return;
    }
    setIsLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1500));
    navigate('/login', { state: { resetSuccess: true } });
    setIsLoading(false);
  };

  const getStrengthColor = () => {
    switch (passwordStrength) {
      case 'weak':
        return 'text-destructive';
      case 'medium':
        return 'text-[var(--chart-3)]';
      case 'strong':
        return 'text-[var(--chart-2)]';
      default:
        return 'text-muted-foreground';
    }
  };

  const getStrengthText = () => {
    switch (passwordStrength) {
      case 'weak':
        return t('resetPassword.strengthWeak');
      case 'medium':
        return t('resetPassword.strengthMedium');
      case 'strong':
        return t('resetPassword.strengthStrong');
      default:
        return '';
    }
  };

  return (
    <AuthPageShell
      imageSrc="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format"
      imageAlt={t('resetPassword.heroImageAlt')}
    >
      <button
        onClick={() => navigate('/login')}
        className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
      >
        <ArrowLeft className="w-4 h-4" />
        <span className="text-small">{t('resetPassword.backToLogin')}</span>
      </button>

      <div className="text-center">
        <div className="flex items-center justify-center mb-4">
          <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
        </div>
        <h2 className="text-sm text-muted-foreground">{t('resetPassword.heading')}</h2>
        <p className="mt-2 text-muted-foreground">{t('resetPassword.subheading')}</p>
      </div>

      <form className="space-y-6" onSubmit={handleSubmit}>
        <div className="space-y-2">
          <Label htmlFor="password">{t('resetPassword.newPasswordLabel')}</Label>
          <Input
            id="password"
            name="password"
            type="password"
            required
            className="w-full"
            placeholder="••••••••"
            value={password}
            onChange={e => handlePasswordChange(e.target.value)}
          />
          {passwordStrength && (
            <div className="flex items-center gap-2">
              <div className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
                <div
                  className={`h-full transition-all duration-300 ${
                    passwordStrength === 'weak'
                      ? 'w-1/3 bg-destructive'
                      : passwordStrength === 'medium'
                        ? 'w-2/3 bg-[var(--chart-3)]'
                        : 'w-full bg-[var(--chart-2)]'
                  }`}
                />
              </div>
              <span className={`text-small ${getStrengthColor()}`}>{getStrengthText()}</span>
            </div>
          )}
        </div>

        <div className="space-y-2">
          <Label htmlFor="confirmPassword">{t('resetPassword.confirmPasswordLabel')}</Label>
          <Input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            required
            className="w-full"
            placeholder="••••••••"
            value={confirmPassword}
            onChange={e => {
              setConfirmPassword(e.target.value);
              setError('');
            }}
          />
        </div>

        <div className="bg-accent rounded-[var(--radius)] p-4 space-y-2">
          <p className="text-sm">{t('resetPassword.requirements')}</p>
          <div className="space-y-1">
            <div className="flex items-center gap-2">
              <CheckCircle2
                className={`w-4 h-4 ${password.length >= 6 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`}
              />
              <span className="text-sm text-muted-foreground">
                {t('resetPassword.requirementMinChars')}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2
                className={`w-4 h-4 ${password === confirmPassword && password.length > 0 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`}
              />
              <span className="text-sm text-muted-foreground">
                {t('resetPassword.requirementMatch')}
              </span>
            </div>
          </div>
        </div>

        {error && (
          <div className="flex items-center gap-2 text-destructive bg-destructive/10 rounded-[var(--radius)] p-3">
            <AlertCircle className="w-4 h-4 flex-shrink-0" />
            <span className="text-sm">{error}</span>
          </div>
        )}

        <Button type="submit" className="w-full" disabled={isLoading}>
          {isLoading ? t('resetPassword.submitting') : t('resetPassword.submit')}
        </Button>
      </form>
    </AuthPageShell>
  );
}