"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';

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[]>([]);

  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}
          />
          <DateRangePicker
            value={dateRange}
            onChange={setDateRange}
          />
        </div>
      </div>

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

      {/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
      {selectedTeamIds.length > 0 && (
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              Analytics for {selectedTeamIds.length} selected {selectedTeamIds.length === 1 ? 'team' : 'teams'}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* You can map through selectedTeamIds and display data for each team */}
              {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>
        </div>
      )}
    </div>
  );
}