import React, { useState, useEffect, useRef } from 'react';
import { LogOut, User, Calendar, Users, TrendingUp, Clock, MessageSquare, Plus, ChevronDown, KeyRound, Shield } from 'lucide-react';
import apiClient from '../utils/apiClient';
import { Link } from 'react-router-dom';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import MeetingTimeline from '../components/MeetingTimeline';
import './Dashboard.css';

const Dashboard = ({ user, onLogout }) => {
  const [userInfo, setUserInfo] = useState(null);
  const [meetings, setMeetings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordChangeError, setPasswordChangeError] = useState('');
  const [passwordChangeSuccess, setPasswordChangeSuccess] = useState('');
  const dropdownRef = useRef(null);

  useEffect(() => {
    fetchUserData();
  }, [user.user_id]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setDropdownOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [dropdownRef]);

  const fetchUserData = async () => {
    try {
      setLoading(true);
      console.log('Fetching user data for user_id:', user.user_id);
      
      const userResponse = await apiClient.get(buildApiUrl(API_ENDPOINTS.USERS.DETAIL(user.user_id)));
      console.log('User response:', userResponse.data);
      setUserInfo(userResponse.data);
      
      const meetingsResponse = await apiClient.get(buildApiUrl(`${API_ENDPOINTS.MEETINGS.LIST}?user_id=${user.user_id}`));
      console.log('Meetings response:', meetingsResponse.data);
      setMeetings(meetingsResponse.data);
      
    } catch (err) {
      console.error('Error fetching data:', err);
      setError('获取数据失败，请刷新重试');
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteMeeting = async (meetingId) => {
    try {
      await apiClient.delete(buildApiUrl(API_ENDPOINTS.MEETINGS.DELETE(meetingId)));
      // Refresh meetings list
      const meetingsResponse = await apiClient.get(buildApiUrl(`${API_ENDPOINTS.MEETINGS.LIST}?user_id=${user.user_id}`));
      setMeetings(meetingsResponse.data);
    } catch (err) {
      console.error('Error deleting meeting:', err);
      // You might want to show an error message to the user here
    }
  };

  const handlePasswordChange = async (e) => {
    e.preventDefault();
    if (newPassword !== confirmPassword) {
      setPasswordChangeError('新密码不匹配');
      return;
    }
    if (newPassword.length < 6) {
      setPasswordChangeError('新密码长度不能少于6位');
      return;
    }

    setPasswordChangeError('');
    setPasswordChangeSuccess('');

    try {
      await apiClient.put(buildApiUrl(API_ENDPOINTS.USERS.UPDATE_PASSWORD(user.user_id)), {
        old_password: oldPassword,
        new_password: newPassword,
      });
      setPasswordChangeSuccess('密码修改成功！');
      // 清空输入框并准备关闭模态框
      setOldPassword('');
      setNewPassword('');
      setConfirmPassword('');
      setTimeout(() => {
        setShowChangePasswordModal(false);
        setPasswordChangeSuccess('');
      }, 2000);
    } catch (err) {
      setPasswordChangeError(err.response?.data?.detail || '密码修改失败');
    }
  };

  const groupMeetingsByDate = (meetings) => {
    return meetings.reduce((acc, meeting) => {
      const date = new Date(meeting.meeting_time || meeting.created_at).toISOString().split('T')[0];
      if (!acc[date]) {
        acc[date] = [];
      }
      acc[date].push(meeting);
      return acc;
    }, {});
  };

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  if (loading) {
    return (
      <div className="dashboard">
        <div className="loading-container">
          <div className="loading-spinner"></div>
          <p>加载中...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="dashboard">
        <div className="error-container">
          <p>{error}</p>
          <button onClick={fetchUserData} className="retry-btn">重试</button>
        </div>
      </div>
    );
  }

  const groupedMeetings = groupMeetingsByDate(meetings);

  return (
    <div className="dashboard">

      {/* Header */}
      <header className="dashboard-header">
        <div className="header-content">
          <div className="logo">
            <MessageSquare className="logo-icon" />
            <span className="logo-text">iMeeting</span>
          </div>
          <div className="user-actions">
            <div className="user-menu-container" ref={dropdownRef}>
              <div className="user-menu-trigger" onClick={() => setDropdownOpen(!dropdownOpen)}>
                <span className="welcome-text">欢迎，{userInfo?.caption}</span>
                <ChevronDown size={20} />
              </div>
              {dropdownOpen && (
                <div className="dropdown-menu">
                  <button onClick={() => { setShowChangePasswordModal(true); setDropdownOpen(false); }}><KeyRound size={16} /> 修改密码</button>
                  {user.role_id === 1 && (
                    <Link to="/admin/management" onClick={() => setDropdownOpen(false)}><Shield size={16} /> 平台管理</Link>
                  )}
                  <button onClick={onLogout}><LogOut size={16} /> 退出</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>

      <div className="dashboard-content">
        {/* User Info Section */}
        <section className="user-info-section">
          <div className="user-card">
            <div className="user-avatar">
              <User size={32} />
            </div>
            <div className="user-details">
              <h2>{userInfo?.caption}</h2>
              <p className="user-email">{userInfo?.email}</p>
              <p className="join-date">加入时间：{formatDate(userInfo?.created_at)}</p>
            </div>
          </div>

          {/* Stats Cards */}
          <div className="stats-grid">
            <div className="stat-card">
              <div className="stat-icon">
                <Calendar className="icon" />
              </div>
              <div className="stat-info">
                <h3>{userInfo?.meetings_created}</h3>
                <p>发起的会议</p>
              </div>
            </div>
            
            <div className="stat-card">
              <div className="stat-icon">
                <Users className="icon" />
              </div>
              <div className="stat-info">
                <h3>{userInfo?.meetings_attended}</h3>
                <p>参加的会议</p>
              </div>
            </div>
            
            <div className="stat-card">
              <div className="stat-icon">
                <TrendingUp className="icon" />
              </div>
              <div className="stat-info">
                <h3>{meetings.length}</h3>
                <p>相关会议总数</p>
              </div>
            </div>
          </div>
        </section>

        {/* Meetings Timeline Section */}
        <section className="meetings-section">
          <div className="section-header">
            <div className="section-title">
              <h2>
                <Clock size={24} />
                会议时间轴
              </h2>
              <p>按时间顺序展示您参与的所有会议</p>
            </div>
            <Link to="/meetings/create">
              <span className="create-meeting-btn">
                <Plus size={20} />
                新建会议纪要
              </span>
            </Link>
          </div>
          
          <MeetingTimeline 
            meetingsByDate={groupedMeetings} 
            currentUser={user} 
            onDeleteMeeting={handleDeleteMeeting}
          />
        </section>
      </div>

      {showChangePasswordModal && (
        <div className="modal-overlay">
          <div className="modal-content">
            <form onSubmit={handlePasswordChange}>
              <h2>修改密码</h2>
              {passwordChangeError && <p className="error-message">{passwordChangeError}</p>}
              {passwordChangeSuccess && <p className="success-message">{passwordChangeSuccess}</p>}
              <div className="form-group">
                <label>旧密码</label>
                <input type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} required />
              </div>
              <div className="form-group">
                <label>新密码</label>
                <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
              </div>
              <div className="form-group">
                <label>确认新密码</label>
                <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required />
              </div>
              <div className="modal-actions">
                <button type="button" className="btn btn-secondary" onClick={() => setShowChangePasswordModal(false)}>取消</button>
                <button type="submit" className="btn btn-primary">确认修改</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default Dashboard;