views/LoginView.tsx

import React, { useState, useContext } from 'react';
import { SparklesIcon } from '../components/icons';
import { AuthContext } from '../context/AuthContext';
import { KOFI_PAGE_URL } from '../config';

const LoginView: React.FC = () => {
    const { login } = useContext(AuthContext);
    const [name, setName] = useState('');
    const [secret, setSecret] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleLogin = (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setIsLoading(true);

        setTimeout(() => {
            const success = login(name, secret);
            if (!success) {
                setError('Invalid credentials. Please check your login name and secret password.');
            }
            // On success, the App component will automatically switch views.
            setIsLoading(false);
        }, 500); // Artificial delay for better UX
    };

    return (
        <div className="flex items-center justify-center h-screen bg-stone-100">
            <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-2xl shadow-xl text-center border border-stone-200">
                <div className="flex flex-col items-center">
                    <SparklesIcon className="h-16 w-16 text-green-700" />
                    <h1 className="mt-4 text-3xl font-bold text-stone-800">Welcome to Yuki</h1>
                    <p className="mt-2 text-stone-600">Enter the credentials you received after your purchase.</p>
                </div>
                
                <form onSubmit={handleLogin} className="space-y-4">
                    <div>
                        <input
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
                            placeholder="Login Name"
                            required
                        />
                    </div>
                     <div>
                        <input
                            type="password"
                            value={secret}
                            onChange={(e) => setSecret(e.target.value)}
                            className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
                            placeholder="Secret Password"
                            required
                        />
                    </div>

                    {error && <p className="text-sm text-red-600">{error}</p>}
                    
                    <button 
                        type="submit"
                        disabled={isLoading}
                        className="w-full bg-green-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-600 transition-colors shadow-lg hover:shadow-xl disabled:bg-stone-400"
                    >
                        {isLoading ? 'Unlocking...' : 'Unlock'}
                    </button>
                </form>

                 <p className="text-xs text-stone-500">
                    Don't have access?{' '}
                    <a 
                        href={KOFI_PAGE_URL} 
                        target="_blank" 
                        rel="noopener noreferrer" 
                        className="font-semibold hover:underline text-green-700"
                    >
                        Purchase on Ko-fi
                    </a>.
                </p>
            </div>
        </div>
    );
};

export default LoginView;