ok_r/app/analysis/page.tsx

'use client';

import { useEffect, useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ProgressRing } from '@/components/progress-ring';
import { calculateProgress, isKRActive } from '@/lib/kr-utils';
import { REASON_CODES } from '@/lib/constants';
import type { Project, KR, User, Checkin } from '@/types/database';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
  Legend,
} from 'recharts';
import { BarChart3, PieChart as PieChartIcon, TrendingUp, Users, Target } from 'lucide-react';
import { fetchApi } from '@/lib/api-client';

interface KRWithRelations extends KR {
  owner: User | null;
  project: { id: string; name: string } | null;
}

interface CheckinWithRelations extends Checkin {
  user: User | null;
  kr: { id: string; title: string } | null;
}

const COLORS = ['#10b981', '#f59e0b', '#ef4444', '#6366f1', '#8b5cf6', '#ec4899'];

export default function AnalysisPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [krs, setKRs] = useState<KRWithRelations[]>([]);
  const [checkins, setCheckins] = useState<CheckinWithRelations[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const [projectsRes, krsRes, checkinsRes, usersRes] = await Promise.all([
          fetchApi('/api/projects'),
          fetchApi('/api/krs'),
          fetchApi('/api/checkins?limit=100'),
          fetchApi('/api/users'),
        ]);

        if (projectsRes.ok) setProjects(await projectsRes.json());
        if (krsRes.ok) setKRs(await krsRes.json());
        if (checkinsRes.ok) setCheckins(await checkinsRes.json());
        if (usersRes.ok) setUsers(await usersRes.json());
      } catch (error) {
        console.error('Failed to fetch data:', error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  const filteredKRs = useMemo(() => {
    if (selectedProjectId === 'all') return krs;
    return krs.filter(kr => kr.project_id === selectedProjectId);
  }, [krs, selectedProjectId]);

  const activeKRs = filteredKRs.filter(isKRActive);

  const statusDistribution = useMemo(() => {
    const green = activeKRs.filter(kr => kr.status === 'green').length;
    const yellow = activeKRs.filter(kr => kr.status === 'yellow').length;
    const red = activeKRs.filter(kr => kr.status === 'red').length;

    return [
      { name: '正常', value: green, color: '#10b981' },
      { name: '警告', value: yellow, color: '#f59e0b' },
      { name: '风险', value: red, color: '#ef4444' },
    ].filter(item => item.value > 0);
  }, [activeKRs]);

  const reasonDistribution = useMemo(() => {
    const reasons: Record<string, number> = {};

    activeKRs
      .filter(kr => kr.reason_code)
      .forEach(kr => {
        const code = kr.reason_code!;
        reasons[code] = (reasons[code] || 0) + 1;
      });

    return Object.entries(reasons).map(([code, count]) => ({
      name: REASON_CODES[code as keyof typeof REASON_CODES],
      value: count,
    }));
  }, [activeKRs]);

  const userPerformance = useMemo(() => {
    const userMap: Record<string, { name: string; total: number; completed: number }> = {};

    users.forEach(user => {
      userMap[user.id] = { name: user.name, total: 0, completed: 0 };
    });

    activeKRs.forEach(kr => {
      if (kr.owner_user_id && userMap[kr.owner_user_id]) {
        userMap[kr.owner_user_id].total++;
        if (calculateProgress(kr) >= 1) {
          userMap[kr.owner_user_id].completed++;
        }
      }
    });

    return Object.values(userMap)
      .filter(u => u.total > 0)
      .map(u => ({
        name: u.name,
        total: u.total,
        completed: u.completed,
        rate: Math.round((u.completed / u.total) * 100),
      }))
      .sort((a, b) => b.rate - a.rate);
  }, [activeKRs, users]);

  const projectHealth = useMemo(() => {
    return projects.map(project => {
      const projectKRs = krs.filter(kr => kr.project_id === project.id && isKRActive(kr));
      const completed = projectKRs.filter(kr => calculateProgress(kr) >= 1).length;
      const total = projectKRs.length;

      return {
        name: project.name.length > 10 ? project.name.substring(0, 10) + '...' : project.name,
        fullName: project.name,
        total,
        completed,
        rate: total > 0 ? Math.round((completed / total) * 100) : 0,
        status: project.status,
      };
    });
  }, [projects, krs]);

  const checkinTrend = useMemo(() => {
    const last7Days: Record<string, number> = {};

    for (let i = 6; i >= 0; i--) {
      const date = new Date();
      date.setDate(date.getDate() - i);
      const dateStr = date.toISOString().split('T')[0];
      last7Days[dateStr] = 0;
    }

    checkins.forEach(checkin => {
      const dateStr = checkin.date;
      if (last7Days[dateStr] !== undefined) {
        last7Days[dateStr]++;
      }
    });

    return Object.entries(last7Days).map(([date, count]) => ({
      date: new Date(date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }),
      count,
    }));
  }, [checkins]);

  if (isLoading) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="animate-pulse space-y-6">
          <div className="h-8 bg-slate-200 rounded w-32" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {[1, 2, 3, 4].map(i => (
              <div key={i} className="h-64 bg-slate-200 rounded-lg" />
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
            <BarChart3 className="h-6 w-6 text-teal-600" />
            数据分析
          </h1>
          <p className="text-muted-foreground mt-1">KR 执行情况分析与洞察</p>
        </div>
        <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
          <SelectTrigger className="w-48">
            <SelectValue placeholder="选择项目" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">所有项目</SelectItem>
            {projects.map(project => (
              <SelectItem key={project.id} value={project.id}>
                {project.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <Card>
          <CardContent className="pt-6 text-center">
            <Target className="h-8 w-8 text-slate-300 mx-auto mb-2" />
            <p className="text-3xl font-bold text-slate-800">{activeKRs.length}</p>
            <p className="text-sm text-muted-foreground">进行中 KR</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6 text-center">
            <TrendingUp className="h-8 w-8 text-emerald-300 mx-auto mb-2" />
            <p className="text-3xl font-bold text-emerald-600">
              {activeKRs.filter(kr => calculateProgress(kr) >= 1).length}
            </p>
            <p className="text-sm text-muted-foreground">已达标</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6 text-center">
            <Users className="h-8 w-8 text-sky-300 mx-auto mb-2" />
            <p className="text-3xl font-bold text-sky-600">{userPerformance.length}</p>
            <p className="text-sm text-muted-foreground">参与人数</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6 text-center">
            <BarChart3 className="h-8 w-8 text-amber-300 mx-auto mb-2" />
            <p className="text-3xl font-bold text-amber-600">
              {activeKRs.length > 0
                ? Math.round(
                    (activeKRs.filter(kr => calculateProgress(kr) >= 1).length / activeKRs.length) * 100
                  )
                : 0}%
            </p>
            <p className="text-sm text-muted-foreground">整体完成率</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <PieChartIcon className="h-5 w-5" />
              KR 状态分布
            </CardTitle>
          </CardHeader>
          <CardContent>
            {statusDistribution.length > 0 ? (
              <ResponsiveContainer width="100%" height={250}>
                <PieChart>
                  <Pie
                    data={statusDistribution}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={100}
                    paddingAngle={2}
                    dataKey="value"
                    label={({ name, value }) => `${name}: ${value}`}
                  >
                    {statusDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-center text-muted-foreground py-12">暂无数据</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">问题原因分布</CardTitle>
          </CardHeader>
          <CardContent>
            {reasonDistribution.length > 0 ? (
              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={reasonDistribution} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis type="category" dataKey="name" width={80} />
                  <Tooltip />
                  <Bar dataKey="value" fill="#f59e0b" radius={[0, 4, 4, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-center text-muted-foreground py-12">暂无问题记录</p>
            )}
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">项目完成率</CardTitle>
          </CardHeader>
          <CardContent>
            {projectHealth.length > 0 ? (
              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={projectHealth}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip
                    content={({ active, payload }) => {
                      if (active && payload && payload.length) {
                        const data = payload[0].payload;
                        return (
                          <div className="bg-white p-3 border rounded shadow-lg">
                            <p className="font-medium">{data.fullName}</p>
                            <p className="text-sm text-muted-foreground">
                              完成: {data.completed}/{data.total} ({data.rate}%)
                            </p>
                          </div>
                        );
                      }
                      return null;
                    }}
                  />
                  <Bar dataKey="rate" fill="#10b981" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-center text-muted-foreground py-12">暂无数据</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">打卡趋势 (近7天)</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={250}>
              <LineChart data={checkinTrend}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Line
                  type="monotone"
                  dataKey="count"
                  stroke="#0d9488"
                  strokeWidth={2}
                  dot={{ fill: '#0d9488' }}
                />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">成员完成率排行</CardTitle>
        </CardHeader>
        <CardContent>
          {userPerformance.length > 0 ? (
            <div className="space-y-4">
              {userPerformance.map((user, index) => (
                <div key={user.name} className="flex items-center gap-4">
                  <span className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                    index === 0 ? 'bg-amber-100 text-amber-700' :
                    index === 1 ? 'bg-slate-200 text-slate-700' :
                    index === 2 ? 'bg-orange-100 text-orange-700' :
                    'bg-slate-100 text-slate-600'
                  }`}>
                    {index + 1}
                  </span>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <span className="font-medium">{user.name}</span>
                      <span className="text-sm text-muted-foreground">
                        {user.completed}/{user.total} ({user.rate}%)
                      </span>
                    </div>
                    <div className="w-full bg-slate-100 rounded-full h-2">
                      <div
                        className="bg-teal-500 h-2 rounded-full transition-all"
                        style={{ width: `${user.rate}%` }}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">暂无数据</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}