'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { StatusDot } from '@/components/status-badge';
import { ProgressRing } from '@/components/progress-ring';
import { useUser } from '@/components/user-context';
import { calculateProgress, getDaysRemaining, isKRActive } from '@/lib/kr-utils';
import { REASON_CODES, ROLE_LABELS } from '@/lib/constants';
import type { Project, KR, User } from '@/types/database';
import {
  FolderKanban,
  Target,
  AlertTriangle,
  Clock,
  ArrowRight,
  AlertCircle,
  HandHelping,
} from 'lucide-react';
import { fetchApi } from '@/lib/api-client';

interface ProjectWithRelations extends Project {
  owner: User | null;
  pm: User | null;
}

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

export default function DashboardPage() {
  const { currentUser } = useUser();
  const [projects, setProjects] = useState<ProjectWithRelations[]>([]);
  const [krs, setKRs] = useState<KRWithRelations[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const [projectsRes, krsRes] = await Promise.all([
          fetchApi('/api/projects'),
          fetchApi('/api/krs'),
        ]);

        if (projectsRes.ok) {
          const projectsData = await projectsRes.json();
          setProjects(projectsData);
        }

        if (krsRes.ok) {
          const krsData = await krsRes.json();
          setKRs(krsData);
        }
      } catch (error) {
        console.error('Failed to fetch data:', error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  const activeKRs = krs.filter(isKRActive);
  const redKRs = activeKRs.filter(kr => kr.status === 'red');
  const yellowKRs = activeKRs.filter(kr => kr.status === 'yellow');
  const helpNeededKRs = activeKRs.filter(kr => kr.need_owner_help);
  const urgentKRs = activeKRs.filter(kr => getDaysRemaining(kr.period_end) <= 3 && kr.status !== 'green');

  const stats = {
    totalProjects: projects.length,
    greenProjects: projects.filter(p => p.status === 'green').length,
    yellowProjects: projects.filter(p => p.status === 'yellow').length,
    redProjects: projects.filter(p => p.status === 'red').length,
    totalKRs: activeKRs.length,
    completedKRs: activeKRs.filter(kr => calculateProgress(kr) >= 1).length,
  };

  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-48" />
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {[1, 2, 3, 4].map(i => (
              <div key={i} className="h-32 bg-slate-200 rounded-lg" />
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-slate-800">目标总览</h1>
        <p className="text-muted-foreground mt-1">
          {currentUser?.role === 'owner' ? '全局视角 - 所有项目健康度一览' : `${ROLE_LABELS[currentUser?.role || 'member']}视角`}
        </p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">项目总数</p>
                <p className="text-3xl font-bold text-slate-800">{stats.totalProjects}</p>
              </div>
              <FolderKanban className="h-10 w-10 text-slate-300" />
            </div>
            <div className="flex gap-2 mt-3 text-xs">
              <span className="text-emerald-600">{stats.greenProjects} 正常</span>
              <span className="text-amber-600">{stats.yellowProjects} 警告</span>
              <span className="text-rose-600">{stats.redProjects} 风险</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">进行中 KR</p>
                <p className="text-3xl font-bold text-slate-800">{stats.totalKRs}</p>
              </div>
              <Target className="h-10 w-10 text-slate-300" />
            </div>
            <div className="flex gap-2 mt-3 text-xs">
              <span className="text-emerald-600">{stats.completedKRs} 已达标</span>
              <span className="text-slate-500">{stats.totalKRs - stats.completedKRs} 进行中</span>
            </div>
          </CardContent>
        </Card>

        <Card className={redKRs.length > 0 ? 'border-rose-200 bg-rose-50/50' : ''}>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">风险 KR</p>
                <p className="text-3xl font-bold text-rose-600">{redKRs.length}</p>
              </div>
              <AlertTriangle className={`h-10 w-10 ${redKRs.length > 0 ? 'text-rose-300' : 'text-slate-300'}`} />
            </div>
            <p className="text-xs text-muted-foreground mt-3">需要立即关注</p>
          </CardContent>
        </Card>

        <Card className={helpNeededKRs.length > 0 ? 'border-amber-200 bg-amber-50/50' : ''}>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">需要帮助</p>
                <p className="text-3xl font-bold text-amber-600">{helpNeededKRs.length}</p>
              </div>
              <HandHelping className={`h-10 w-10 ${helpNeededKRs.length > 0 ? 'text-amber-300' : 'text-slate-300'}`} />
            </div>
            <p className="text-xs text-muted-foreground mt-3">成员请求老板支援</p>
          </CardContent>
        </Card>
      </div>

      {(redKRs.length > 0 || urgentKRs.length > 0 || helpNeededKRs.length > 0) && (
        <Card className="mb-8 border-l-4 border-l-rose-500">
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <AlertCircle className="h-5 w-5 text-rose-500" />
              风险预警
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {redKRs.map(kr => (
              <Link key={kr.id} href={`/krs/${kr.id}`} className="block">
                <div className="flex items-center gap-4 p-3 bg-rose-50 rounded-lg hover:bg-rose-100 transition-colors">
                  <StatusDot status="red" pulse />
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-slate-800 truncate">{kr.title}</p>
                    <p className="text-sm text-muted-foreground">
                      {kr.project?.name} | {kr.owner?.name || '未分配'}
                      {kr.reason_code && ` | ${REASON_CODES[kr.reason_code]}`}
                    </p>
                  </div>
                  <ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
                </div>
              </Link>
            ))}

            {urgentKRs.filter(kr => kr.status !== 'red').map(kr => (
              <Link key={kr.id} href={`/krs/${kr.id}`} className="block">
                <div className="flex items-center gap-4 p-3 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors">
                  <Clock className="h-5 w-5 text-amber-500" />
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-slate-800 truncate">{kr.title}</p>
                    <p className="text-sm text-muted-foreground">
                      {kr.project?.name} | 剩余 {getDaysRemaining(kr.period_end)} 天
                    </p>
                  </div>
                  <ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
                </div>
              </Link>
            ))}

            {helpNeededKRs.filter(kr => kr.status === 'green').map(kr => (
              <Link key={kr.id} href={`/krs/${kr.id}`} className="block">
                <div className="flex items-center gap-4 p-3 bg-sky-50 rounded-lg hover:bg-sky-100 transition-colors">
                  <HandHelping className="h-5 w-5 text-sky-500" />
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-slate-800 truncate">{kr.title}</p>
                    <p className="text-sm text-muted-foreground">
                      {kr.owner?.name} 请求支援
                    </p>
                  </div>
                  <ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
                </div>
              </Link>
            ))}
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-lg">项目健康度</CardTitle>
            <Button variant="ghost" size="sm" asChild>
              <Link href="/projects" className="flex items-center gap-1">
                查看全部 <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </CardHeader>
          <CardContent className="space-y-3">
            {projects.slice(0, 5).map(project => {
              const projectKRs = krs.filter(kr => kr.project_id === project.id && isKRActive(kr));
              const completedCount = projectKRs.filter(kr => calculateProgress(kr) >= 1).length;

              return (
                <Link key={project.id} href={`/projects/${project.id}`} className="block">
                  <div className="flex items-center gap-4 p-3 rounded-lg hover:bg-slate-100 transition-colors">
                    <StatusDot status={project.status} size="lg" />
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-slate-800">{project.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {project.pm?.name || '未指定PM'} | {projectKRs.length} 个 KR
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-sm font-medium">
                        {completedCount}/{projectKRs.length}
                      </p>
                      <p className="text-xs text-muted-foreground">已达标</p>
                    </div>
                  </div>
                </Link>
              );
            })}

            {projects.length === 0 && (
              <p className="text-center text-muted-foreground py-8">暂无项目</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-lg">近期 KR 动态</CardTitle>
            <Button variant="ghost" size="sm" asChild>
              <Link href="/my-krs" className="flex items-center gap-1">
                我的 KR <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </CardHeader>
          <CardContent className="space-y-3">
            {activeKRs.slice(0, 5).map(kr => {
              const progress = calculateProgress(kr);
              const daysLeft = getDaysRemaining(kr.period_end);

              return (
                <Link key={kr.id} href={`/krs/${kr.id}`} className="block">
                  <div className="flex items-center gap-4 p-3 rounded-lg hover:bg-slate-100 transition-colors">
                    <ProgressRing progress={progress} status={kr.status} size={44} strokeWidth={3} />
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-slate-800 truncate">{kr.title}</p>
                      <p className="text-sm text-muted-foreground">
                        {kr.project?.name} | {kr.owner?.name || '未分配'}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-sm">
                        {kr.current_value}/{kr.target_value} {kr.unit}
                      </p>
                      <p className={`text-xs ${daysLeft <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}>
                        剩余 {daysLeft} 天
                      </p>
                    </div>
                  </div>
                </Link>
              );
            })}

            {activeKRs.length === 0 && (
              <p className="text-center text-muted-foreground py-8">暂无进行中的 KR</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}