// entrypoints/popup/pages/Login.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@alifd/next';

export default function Login({ setIsLoggedIn }: { setIsLoggedIn: (loggedIn: boolean) => void }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    // 这里添加实际的登录逻辑
    if (username && password) {
      // 模拟登录成功
      // 你可以在这里保存用户信息到 localStorage 或 Chrome storage
      localStorage.setItem('isLoggedIn', 'true');
      setIsLoggedIn(true);
      // 跳转到首页
      navigate('/');
    }
  };

  return (
    <div className="p-4">
        <Button type="primary">Fusion Design Button</Button>
      <h1 className="text-xl mb-4">登录</h1>
      <form onSubmit={handleLogin}>
        <div className="mb-3">
          <input
            type="text"
            placeholder="用户名"
            className="w-full p-2 border rounded"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="mb-3">
          <input
            type="password"
            placeholder="密码"
            className="w-full p-2 border rounded"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button 
          type="submit" 
          className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
        >
          登录
        </button>
      </form>
    </div>
  );
}