import React, { useState } from 'react';
import { Brain, Users, Calendar, TrendingUp, X, User, Lock } from 'lucide-react';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import './HomePage.css';

const HomePage = ({ onLogin }) => {
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loginForm, setLoginForm] = useState({ username: '', password: '' });
  const [loginError, setLoginError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setLoginError('');

    try {
      const response = await apiClient.post(buildApiUrl(API_ENDPOINTS.AUTH.LOGIN), loginForm);
      onLogin(response.data);
      setShowLoginModal(false);
    } catch (error) {
      setLoginError(error.response?.data?.detail || '登录失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (e) => {
    setLoginForm({
      ...loginForm,
      [e.target.name]: e.target.value
    });
  };

  const closeModal = () => {
    setShowLoginModal(false);
    setLoginForm({ username: '', password: '' });
    setLoginError('');
  };

  return (
    <div className="homepage">
      {/* Header */}
      <header className="homepage-header">
        <div className="header-content">
          <div className="logo">
            <Brain className="logo-icon" />
            <span className="logo-text-white">iMeeting</span>
          </div>
          <button 
            className="login-btn"
            onClick={() => setShowLoginModal(true)}
          >
            登录
          </button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <h1 className="hero-title">智慧会议，让会议更高效</h1>
          <p className="hero-subtitle">
            通过AI技术，将会议音视频转化为结构化信息，提升团队协作效率
          </p>
          <button 
            className="cta-button"
            onClick={() => setShowLoginModal(true)}
          >
            开始使用
          </button>
        </div>
      </section>

      {/* Features Section */}
      <section className="features">
        <div className="features-container">
          <h2 className="features-title">核心功能</h2>
          <div className="features-grid">
            <div className="feature-card">
              <Brain className="feature-icon" />
              <h3>AI智能转录</h3>
              <p>自动将会议音频转为文字，并识别不同发言人</p>
            </div>
            <div className="feature-card">
              <Users className="feature-icon" />
              <h3>参会人管理</h3>
              <p>轻松管理会议参与者，追踪会议参与情况</p>
            </div>
            <div className="feature-card">
              <Calendar className="feature-icon" />
              <h3>时间轴视图</h3>
              <p>按时间顺序展示所有会议，快速回顾历史记录</p>
            </div>
            <div className="feature-card">
              <TrendingUp className="feature-icon" />
              <h3>智能摘要</h3>
              <p>AI自动生成会议摘要，提取关键信息和决策</p>
            </div>
          </div>
        </div>
      </section>

      

      {/* Footer */}
      <footer className="homepage-footer">
        <p>© 2025 紫光汇智信息技术有限公司. All rights reserved.</p>
        <p>备案号：渝ICP备2023007695号-11</p>
      </footer>

      {/* Login Modal */}
      {showLoginModal && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="login-modal" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h2>登录到iMeeting</h2>
              <button className="close-btn" onClick={closeModal}>
                <X size={20} />
              </button>
            </div>
            
            <form className="login-form" onSubmit={handleLogin}>
              <div className="form-group">
                <label htmlFor="username">
                  <User size={18} />
                  用户名
                </label>
                <input
                  type="text"
                  id="username"
                  name="username"
                  value={loginForm.username}
                  onChange={handleInputChange}
                  placeholder="请输入用户名"
                  required
                />
              </div>
              
              <div className="form-group">
                <label htmlFor="password">
                  <Lock size={18} />
                  密码
                </label>
                <input
                  type="password"
                  id="password"
                  name="password"
                  value={loginForm.password}
                  onChange={handleInputChange}
                  placeholder="请输入密码"
                  required
                />
              </div>

              {loginError && (
                <div className="error-message">{loginError}</div>
              )}

              <button 
                type="submit" 
                className="submit-btn"
                disabled={isLoading}
              >
                {isLoading ? '登录中...' : '登录'}
              </button>
            </form>

            <div className="demo-info">
              <p>开通业务账号：</p>
              <p>请联系平台管理员</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default HomePage;