/**
 * Wallet Import Component
 * Import existing wallet with seed phrase
 */

import { useState } from 'react';
import { Eye, EyeOff, ArrowLeft, ArrowRight, Check, AlertTriangle } from 'lucide-react';
import { useWallet } from '@/contexts/WalletContext';
import { useTelegram } from '@/hooks/useTelegram';
import { validatePassword } from '@/lib/crypto';
import { useTranslation } from '@/i18n';

interface Props {
  onComplete: () => void;
  onBack: () => void;
}

export function WalletImport({ onComplete, onBack }: Props) {
  const { importWallet } = useWallet();
  const { hapticImpact, hapticNotification } = useTelegram();
  const { t } = useTranslation();

  const [mnemonic, setMnemonic] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  // Password strength validation rules (must match crypto.ts validatePassword)
  const passwordRules = {
    minLength: password.length >= 12,
    hasLowercase: /[a-z]/.test(password),
    hasUppercase: /[A-Z]/.test(password),
    hasNumber: /[0-9]/.test(password),
    hasSpecialChar: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
    passwordsMatch: password === confirmPassword && password.length > 0,
  };

  const allPasswordRulesPass =
    passwordRules.minLength &&
    passwordRules.hasLowercase &&
    passwordRules.hasUppercase &&
    passwordRules.hasNumber &&
    passwordRules.hasSpecialChar &&
    passwordRules.passwordsMatch;

  const handleImport = async () => {
    setError('');

    // Validate mnemonic
    const words = mnemonic.trim().split(/\s+/);
    if (words.length !== 12 && words.length !== 24) {
      setError(t('walletImport.seedPhraseInvalid'));
      return;
    }

    // Validate password using crypto.ts rules
    const passwordValidation = validatePassword(password);
    if (!passwordValidation.valid) {
      setError(passwordValidation.message || t('walletImport.passwordInvalid'));
      return;
    }
    if (password !== confirmPassword) {
      setError(t('walletImport.passwordsMismatch'));
      return;
    }

    setIsLoading(true);
    hapticImpact('medium');

    try {
      await importWallet(mnemonic.trim().toLowerCase(), password);
      hapticNotification('success');
      onComplete();
    } catch (err) {
      setError(err instanceof Error ? err.message : t('walletImport.importFailed'));
      hapticNotification('error');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="p-4 space-y-6">
      <button onClick={onBack} className="flex items-center gap-2 text-muted-foreground">
        <ArrowLeft className="w-4 h-4" />
        <span>{t('common.back')}</span>
      </button>

      <div className="text-center">
        <h2 className="text-xl font-semibold mb-2">{t('walletImport.title')}</h2>
        <p className="text-muted-foreground text-sm">{t('walletImport.description')}</p>
      </div>

      <div className="space-y-4">
        <div className="space-y-2">
          <label className="text-sm text-muted-foreground">
            {t('walletImport.seedPhraseLabel')}
          </label>
          <textarea
            value={mnemonic}
            onChange={(e) => setMnemonic(e.target.value)}
            className="w-full px-4 py-3 bg-muted rounded-xl resize-none h-28 font-mono text-sm"
            placeholder={t('walletImport.seedPhrasePlaceholder')}
          />
          <p className="text-xs text-muted-foreground">
            {mnemonic.trim().split(/\s+/).filter(Boolean).length} / 12 peyv
          </p>
        </div>

        <div className="space-y-2">
          <label className="text-sm text-muted-foreground">{t('walletImport.newPassword')}</label>
          <div className="relative">
            <input
              type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-3 bg-muted rounded-xl pr-12"
              placeholder={t('walletCreate.passwordPlaceholder')}
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground"
            >
              {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
            </button>
          </div>
        </div>

        <div className="space-y-2">
          <label className="text-sm text-muted-foreground">
            {t('walletCreate.confirmPasswordLabel')}
          </label>
          <input
            type={showPassword ? 'text' : 'password'}
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            className="w-full px-4 py-3 bg-muted rounded-xl"
            placeholder={t('walletCreate.confirmPasswordPlaceholder')}
          />
        </div>

        {/* Real-time password strength indicator */}
        {password.length > 0 && (
          <div className="p-3 bg-muted/50 rounded-xl space-y-2">
            <p className="text-xs text-muted-foreground font-medium">
              {t('walletCreate.passwordRequirements')}
            </p>
            <div className="grid grid-cols-1 gap-1.5 text-xs">
              <div
                className={`flex items-center gap-2 ${passwordRules.minLength ? 'text-green-400' : 'text-red-400'}`}
              >
                {passwordRules.minLength ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <AlertTriangle className="w-3 h-3" />
                )}
                <span>{t('walletCreate.ruleMinLength')}</span>
              </div>
              <div
                className={`flex items-center gap-2 ${passwordRules.hasLowercase ? 'text-green-400' : 'text-red-400'}`}
              >
                {passwordRules.hasLowercase ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <AlertTriangle className="w-3 h-3" />
                )}
                <span>{t('walletCreate.ruleLowercase')}</span>
              </div>
              <div
                className={`flex items-center gap-2 ${passwordRules.hasUppercase ? 'text-green-400' : 'text-red-400'}`}
              >
                {passwordRules.hasUppercase ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <AlertTriangle className="w-3 h-3" />
                )}
                <span>{t('walletCreate.ruleUppercase')}</span>
              </div>
              <div
                className={`flex items-center gap-2 ${passwordRules.hasNumber ? 'text-green-400' : 'text-red-400'}`}
              >
                {passwordRules.hasNumber ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <AlertTriangle className="w-3 h-3" />
                )}
                <span>{t('walletCreate.ruleNumber')}</span>
              </div>
              <div
                className={`flex items-center gap-2 ${passwordRules.hasSpecialChar ? 'text-green-400' : 'text-red-400'}`}
              >
                {passwordRules.hasSpecialChar ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <AlertTriangle className="w-3 h-3" />
                )}
                <span>{t('walletCreate.ruleSpecialChar')}</span>
              </div>
              {confirmPassword.length > 0 && (
                <div
                  className={`flex items-center gap-2 ${passwordRules.passwordsMatch ? 'text-green-400' : 'text-red-400'}`}
                >
                  {passwordRules.passwordsMatch ? (
                    <Check className="w-3 h-3" />
                  ) : (
                    <AlertTriangle className="w-3 h-3" />
                  )}
                  <span>{t('walletCreate.rulePasswordsMatch')}</span>
                </div>
              )}
            </div>
          </div>
        )}

        {error && (
          <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
            {error}
          </div>
        )}

        <button
          onClick={handleImport}
          disabled={isLoading || !mnemonic || !allPasswordRulesPass}
          className="w-full py-3 bg-primary text-primary-foreground rounded-xl font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
        >
          {isLoading
            ? t('walletImport.importing')
            : allPasswordRulesPass
              ? t('walletImport.importButton')
              : t('walletCreate.meetPasswordRequirements')}
          {!isLoading && allPasswordRulesPass && <ArrowRight className="w-4 h-4" />}
        </button>
      </div>
    </div>
  );
}
