import { Link, useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { useWalletStore } from '../store/wallet';

export default function WelcomePage() {
  const { hasWallet, unlock, isLoading, error, clearError } = useWalletStore();
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleUnlock = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await unlock(password);
      navigate('/wallet');
    } catch {
      // Error is handled by store
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        {/* Logo & Title */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-synor-400 to-synor-600 flex items-center justify-center">
            <span className="text-4xl">◈</span>
          </div>
          <h1 className="text-3xl font-bold mb-2">Synor Wallet</h1>
          <p className="text-slate-400">Quantum-secure cryptocurrency wallet</p>
        </div>

        {hasWallet ? (
          /* Unlock existing wallet */
          <div className="card">
            <h2 className="text-xl font-semibold mb-4">Welcome Back</h2>
            <form onSubmit={handleUnlock} className="space-y-4">
              <div>
                <label className="block text-sm text-slate-400 mb-2">
                  Password
                </label>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="input"
                  placeholder="Enter your password"
                  autoFocus
                />
              </div>

              {error && (
                <div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
                  {error}
                  <button
                    type="button"
                    onClick={clearError}
                    className="ml-2 text-red-400 hover:text-red-200"
                  >
                    ×
                  </button>
                </div>
              )}

              <button
                type="submit"
                disabled={isLoading || !password}
                className="w-full btn btn-primary py-3"
              >
                {isLoading ? 'Unlocking...' : 'Unlock Wallet'}
              </button>
            </form>

            <div className="mt-4 text-center">
              <Link
                to="/recover"
                className="text-sm text-synor-400 hover:text-synor-300"
              >
                Recover with different phrase
              </Link>
            </div>
          </div>
        ) : (
          /* Create or recover wallet */
          <div className="card space-y-4">
            <Link
              to="/create"
              className="block w-full btn btn-primary py-4 text-center"
            >
              Create New Wallet
            </Link>
            <Link
              to="/recover"
              className="block w-full btn btn-secondary py-4 text-center"
            >
              Recover Existing Wallet
            </Link>
          </div>
        )}

        {/* Network indicator */}
        <div className="mt-6 text-center text-sm text-slate-500">
          <span className="inline-flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-yellow-500"></span>
            Testnet
          </span>
        </div>
      </div>
    </div>
  );
}
