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

export function ResetPasswordContent() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { currentTheme } = useBrandColors();
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const passwordStrength = usePasswordStrength(password);

  const handlePasswordChange = (value: string) => {
    setPassword(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 content = (
    <>
      <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)}
          />
          <PasswordStrengthMeter strength={passwordStrength} />
        </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>
    </>
  );

  return currentTheme === 'xertica' ? (
    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
  ) : (
    <AuthPageShell
      imageSrc="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format"
      imageAlt={t('resetPassword.heroImageAlt')}
    >
      {content}
    </AuthPageShell>
  );
}