"use client";

import { useState } from 'react';
import { subDays } from 'date-fns';
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
import { TeamSelector } from '@/app/components/ui/TeamSelector';
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';

export default function AnalyticsPage() {
  // 默认日期范围为最近7天
  const today = new Date();
  const [dateRange, setDateRange] = useState({
    from: subDays(today, 7), // 7天前
    to: today // 今天
  });

  // 添加团队选择状态 - 使用数组支持多选
  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
  
  // 添加项目选择状态 - 使用数组支持多选
  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
        <h1 className="text-xl font-bold text-gray-900">Analytics</h1>
        
        <div className="flex flex-col gap-4 md:flex-row md:items-center">
          <TeamSelector
            value={selectedTeamIds}
            onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
            className="w-[250px]"
            multiple={true}
          />
          <ProjectSelector
            value={selectedProjectIds}
            onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
            className="w-[250px]"
            multiple={true}
            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
          />
          <DateRangePicker
            value={dateRange}
            onChange={setDateRange}
          />
        </div>
      </div>

      {/* 如果没有选择团队或项目，显示提示信息 */}
      {selectedTeamIds.length === 0 && selectedProjectIds.length === 0 && (
        <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
          <p className="text-gray-500">
            Please select teams or projects to view analytics
          </p>
        </div>
      )}

      {/* 显示团队相关的分析数据 */}
      {selectedTeamIds.length > 0 && (
        <div className="bg-white rounded-lg shadow p-6 mb-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            Team Analytics ({selectedTeamIds.length} selected)
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {selectedTeamIds.map((teamId) => (
              <div key={teamId} className="p-4 border rounded-md">
                <h3 className="font-medium text-gray-800">Team ID: {teamId}</h3>
                <p className="text-gray-500 mt-2">Team analytics will appear here</p>
              </div>
            ))}
          </div>
        </div>
      )}
      
      {/* 显示项目相关的分析数据 */}
      {selectedProjectIds.length > 0 && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            Project Analytics ({selectedProjectIds.length} selected)
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {selectedProjectIds.map((projectId) => (
              <div key={projectId} className="p-4 border rounded-md">
                <h3 className="font-medium text-gray-800">Project ID: {projectId}</h3>
                <p className="text-gray-500 mt-2">Project analytics will appear here</p>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}