src/components/Records.jsx

import React, { useState, useEffect, useRef } from 'react';

function Records() {
  const [filter, setFilter] = useState('all');
  const [sessions, setSessions] = useState([]);
  const [loading, setLoading] = useState(false);
  const chartRef = useRef(null);

  // 格式化时间
  const formatDuration = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}m ${secs}s`;
  };

  // 格式化日期
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // 加载会话数据
  const loadSessions = async (filterType) => {
    setLoading(true);
    try {
      const response = await fetch(`/api/sessions?filter=${filterType}&limit=50`);
      const data = await response.json();
      setSessions(data);
      drawChart(data);
    } catch (error) {
      console.error('Failed to load sessions:', error);
    } finally {
      setLoading(false);
    }
  };

  // 绘制图表
  const drawChart = (data) => {
    const canvas = chartRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    const width = canvas.width = canvas.offsetWidth;
    const height = canvas.height = 300;

    // 清空画布
    ctx.clearRect(0, 0, width, height);

    if (data.length === 0) {
      ctx.fillStyle = '#999';
      ctx.font = '16px Nunito';
      ctx.textAlign = 'center';
      ctx.fillText('No data available', width / 2, height / 2);
      return;
    }

    // 准备数据 (最多显示最近20个会话)
    const displayData = data.slice(0, 20).reverse();
    const padding = 50;
    const chartWidth = width - padding * 2;
    const chartHeight = height - padding * 2;
    const barWidth = chartWidth / displayData.length;

    // 找到最大值用于缩放
    const maxScore = 1.0;

    // 绘制坐标轴
    ctx.strokeStyle = '#E0E0E0';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(padding, padding);
    ctx.lineTo(padding, height - padding);
    ctx.lineTo(width - padding, height - padding);
    ctx.stroke();

    // 绘制Y轴刻度
    ctx.fillStyle = '#666';
    ctx.font = '12px Nunito';
    ctx.textAlign = 'right';
    for (let i = 0; i <= 4; i++) {
      const y = height - padding - (chartHeight * i / 4);
      const value = (maxScore * i / 4 * 100).toFixed(0);
      ctx.fillText(value + '%', padding - 10, y + 4);

      // 绘制网格线
      ctx.strokeStyle = '#F0F0F0';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(padding, y);
      ctx.lineTo(width - padding, y);
      ctx.stroke();
    }

    // 绘制柱状图
    displayData.forEach((session, index) => {
      const barHeight = (session.focus_score / maxScore) * chartHeight;
      const x = padding + index * barWidth + barWidth * 0.1;
      const y = height - padding - barHeight;
      const barActualWidth = barWidth * 0.8;

      // 根据分数设置颜色 - 使用蓝色主题
      const score = session.focus_score;
      let color;
      if (score >= 0.8) color = '#4A90E2';
      else if (score >= 0.6) color = '#5DADE2';
      else if (score >= 0.4) color = '#85C1E9';
      else color = '#AED6F1';

      ctx.fillStyle = color;
      ctx.fillRect(x, y, barActualWidth, barHeight);

      // 绘制边框
      ctx.strokeStyle = color;
      ctx.lineWidth = 1;
      ctx.strokeRect(x, y, barActualWidth, barHeight);
    });

    // 绘制图例
    ctx.textAlign = 'left';
    ctx.font = 'bold 14px Nunito';
    ctx.fillStyle = '#4A90E2';
    ctx.fillText('Focus Score by Session', padding, 30);
  };

  // 初始加载
  useEffect(() => {
    loadSessions(filter);
  }, [filter]);

  // 处理筛选按钮点击
  const handleFilterClick = (filterType) => {
    setFilter(filterType);
  };

  // 查看详情
  const handleViewDetails = (sessionId) => {
    // 这里可以实现查看详情的功能，比如弹窗显示该会话的详细信息
    alert(`View details for session ${sessionId}\n(Feature can be extended later)`);
  };

  return (
    <main id="page-d" className="page">
      <h1 className="page-title">My Records</h1>

      <div className="records-controls" style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '30px' }}>
        <button
          id="filter-today"
          onClick={() => handleFilterClick('today')}
          style={{
            padding: '10px 30px',
            borderRadius: '8px',
            border: filter === 'today' ? 'none' : '2px solid #4A90E2',
            background: filter === 'today' ? '#4A90E2' : 'transparent',
            color: filter === 'today' ? 'white' : '#4A90E2',
            fontSize: '14px',
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'all 0.3s'
          }}
        >
          Today
        </button>
        <button
          id="filter-week"
          onClick={() => handleFilterClick('week')}
          style={{
            padding: '10px 30px',
            borderRadius: '8px',
            border: filter === 'week' ? 'none' : '2px solid #4A90E2',
            background: filter === 'week' ? '#4A90E2' : 'transparent',
            color: filter === 'week' ? 'white' : '#4A90E2',
            fontSize: '14px',
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'all 0.3s'
          }}
        >
          This Week
        </button>
        <button
          id="filter-month"
          onClick={() => handleFilterClick('month')}
          style={{
            padding: '10px 30px',
            borderRadius: '8px',
            border: filter === 'month' ? 'none' : '2px solid #4A90E2',
            background: filter === 'month' ? '#4A90E2' : 'transparent',
            color: filter === 'month' ? 'white' : '#4A90E2',
            fontSize: '14px',
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'all 0.3s'
          }}
        >
          This Month
        </button>
        <button
          id="filter-all"
          onClick={() => handleFilterClick('all')}
          style={{
            padding: '10px 30px',
            borderRadius: '8px',
            border: filter === 'all' ? 'none' : '2px solid #4A90E2',
            background: filter === 'all' ? '#4A90E2' : 'transparent',
            color: filter === 'all' ? 'white' : '#4A90E2',
            fontSize: '14px',
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'all 0.3s'
          }}
        >
          All Time
        </button>
      </div>

      <div className="chart-container" style={{
        background: 'white',
        padding: '20px',
        borderRadius: '10px',
        marginBottom: '30px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <canvas ref={chartRef} id="focus-chart" style={{ width: '100%', height: '300px' }}></canvas>
      </div>

      <div className="sessions-list" style={{
        background: 'white',
        padding: '20px',
        borderRadius: '10px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h2 style={{ color: '#333', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Recent Sessions</h2>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
            Loading sessions...
          </div>
        ) : sessions.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
            No sessions found for this period.
          </div>
        ) : (
          <table id="sessions-table" style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '10px', overflow: 'hidden' }}>
            <thead>
              <tr style={{ background: '#4A90E2' }}>
                <th style={{ padding: '15px', textAlign: 'left', color: 'white', fontWeight: '600', fontSize: '14px' }}>Date</th>
                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Duration</th>
                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Focus Score</th>
                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Action</th>
              </tr>
            </thead>
            <tbody id="sessions-tbody">
              {sessions.map((session, index) => (
                <tr key={session.id} style={{
                  background: index % 2 === 0 ? '#f8f9fa' : 'white',
                  borderBottom: '1px solid #e9ecef'
                }}>
                  <td style={{ padding: '15px', color: '#333', fontSize: '13px' }}>{formatDate(session.start_time)}</td>
                  <td style={{ padding: '15px', textAlign: 'center', color: '#333', fontSize: '13px' }}>{formatDuration(session.duration_seconds)}</td>
                  <td style={{ padding: '15px', textAlign: 'center' }}>
                    <span
                      style={{
                        color:
                          session.focus_score >= 0.8
                            ? '#28a745'
                            : session.focus_score >= 0.6
                            ? '#ffc107'
                            : session.focus_score >= 0.4
                            ? '#fd7e14'
                            : '#dc3545',
                        fontWeight: '600',
                        fontSize: '13px'
                      }}
                    >
                      {(session.focus_score * 100).toFixed(1)}%
                    </span>
                  </td>
                  <td style={{ padding: '15px', textAlign: 'center' }}>
                    <button
                      onClick={() => handleViewDetails(session.id)}
                      style={{
                        padding: '6px 20px',
                        background: '#4A90E2',
                        border: 'none',
                        color: 'white',
                        borderRadius: '6px',
                        cursor: 'pointer',
                        fontSize: '12px',
                        fontWeight: '500',
                        transition: 'background 0.3s'
                      }}
                      onMouseOver={(e) => e.target.style.background = '#357ABD'}
                      onMouseOut={(e) => e.target.style.background = '#4A90E2'}
                    >
                      View
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </main>
  );
}

export default Records;