"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 [selectedTeamId, setSelectedTeamId] = 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={selectedTeamId}
            onChange={setSelectedTeamId}
            className="w-[200px]"
            variant="surface"
            color="blue"
          />
          <DateRangePicker
            value={dateRange}
            onChange={setDateRange}
          />
        </div>
      </div>

      {/* 如果没有选择团队，显示提示信息 */}
      {!selectedTeamId && (
        <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
          <p className="text-gray-500">
            Please select a team to view analytics
          </p>
        </div>
      )}

      {/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
      {selectedTeamId && (
        <div className="space-y-6">
          {/* 这里添加实际的分析数据组件 */}
        </div>
      )}
    </div>
  );
}