path: root/lib/dashboard/dashboard-overview-chart.tsx

"use client";

import { TrendingUp, BarChart3, PieChart } from "lucide-react";
import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Pie, PieChart as RechartsPieChart, Cell, ResponsiveContainer, LabelList } from "recharts";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { DashboardStats } from "@/lib/dashboard/service";

interface DashboardOverviewChartProps {
  data: DashboardStats[];
  title: string;
  description?: string;
}

// 차트 설정
const chartConfig = {
  pending: {
    label: "대기",
    color: "hsl(var(--chart-1))", // 회색 계열
  },
  inProgress: {
    label: "진행중",
    color: "hsl(var(--chart-2))", // 파란색 계열
  },
  completed: {
    label: "완료",
    color: "hsl(var(--chart-3))", // 초록색 계열
  },
} satisfies ChartConfig;

// 파이 차트용 색상
const PIE_COLORS = {
  pending: "#6b7280",
  inProgress: "#3b82f6", 
  completed: "#10b981"
};

export function DashboardOverviewChart({ data, title, description }: DashboardOverviewChartProps) {
  // 바 차트용 데이터 변환
  const barChartData = data.map(item => ({
    name: item.displayName.length > 10 ? 
      item.displayName.substring(0, 10) + "..." : 
      item.displayName,
    fullName: item.displayName,
    pending: item.pending,
    inProgress: item.inProgress,
    completed: item.completed,
    total: item.total
  }));

  // 파이 차트용 데이터 (전체 요약)
  const totalPending = data.reduce((sum, item) => sum + item.pending, 0);
  const totalInProgress = data.reduce((sum, item) => sum + item.inProgress, 0);
  const totalCompleted = data.reduce((sum, item) => sum + item.completed, 0);
  const totalTasks = totalPending + totalInProgress + totalCompleted;

  const pieChartData = [
    { name: "대기", value: totalPending, color: PIE_COLORS.pending },
    { name: "진행중", value: totalInProgress, color: PIE_COLORS.inProgress },
    { name: "완료", value: totalCompleted, color: PIE_COLORS.completed }
  ].filter(item => item.value > 0);

  // 완료율 계산
  const completionRate = totalTasks > 0 ? Math.round((totalCompleted / totalTasks) * 100) : 0;
  const isImproving = completionRate > 50; // 50% 이상이면 개선으로 간주

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* 바 차트 - 2/3 너비 */}
      <Card className="md:col-span-2">
        <CardHeader className="pb-4">
          <CardTitle className="flex items-center gap-2 text-lg">
            <BarChart3 className="h-5 w-5" />
            {title} - 업무별 현황
          </CardTitle>
          {description && <CardDescription className="text-sm">{description}</CardDescription>}
        </CardHeader>
        <CardContent className="pb-2">
          <ChartContainer 
            config={chartConfig}
            className="max-h-[200px] w-full" // 고정 높이로 바 차트 크기 제한
          >
            <BarChart 
              accessibilityLayer 
              data={barChartData}
              margin={{ top: 30, right: 15, left: 10, bottom: 5 }} // top margin 증가로 라벨 공간 확보
            >
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="name"
                tickLine={false}
                tickMargin={10}
                axisLine={false}
                fontSize={12}
                interval={0}
                // angle={-45}
                textAnchor="end"
                height={60}
              />
              <YAxis 
                tickLine={false}
                axisLine={false}
                fontSize={12}
              />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent 
                  indicator="dashed"
                  labelFormatter={(label, payload) => {
                    const item = barChartData.find(d => d.name === label);
                    return item?.fullName || label;
                  }}
                />}
              />
              <Bar 
                dataKey="pending" 
                fill="var(--color-pending)" 
                radius={[0, 0, 4, 4]}
                stackId="status"
              />
              <Bar 
                dataKey="inProgress" 
                fill="var(--color-inProgress)" 
                radius={[0, 0, 0, 0]}
                stackId="status"
              />
              <Bar 
                dataKey="completed" 
                fill="var(--color-completed)" 
                radius={[4, 4, 0, 0]}
                stackId="status"
              >
                <LabelList
                  dataKey="total"
                  position="top"
                  offset={8}
                  className="fill-foreground"
                  fontSize={12}
                  formatter={(value: number) => value > 0 ? value : ''}
                />
              </Bar>
            </BarChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="flex-col items-start gap-1 text-sm pt-2">
          <div className="flex gap-2 items-center leading-none font-medium">
            {totalTasks > 0 && (
              <>
                <TrendingUp className={`h-4 w-4 ${isImproving ? 'text-green-600' : 'text-orange-600'}`} />
                <span>완료율 {completionRate}% - {isImproving ? '순조롭게 진행중' : '진행 필요'}</span>
              </>
            )}
          </div>
          <div className="text-muted-foreground leading-none">
            총 {totalTasks}건의 업무 현황
          </div>
        </CardFooter>
      </Card>

      {/* 파이 차트 - 1/3 너비 */}
      <Card className="md:col-span-1">
        <CardHeader className="pb-4">
          <CardTitle className="flex items-center gap-2 text-lg">
            <PieChart className="h-5 w-5" />
            업무 분포
          </CardTitle>
          <CardDescription className="text-sm">상태별 비율</CardDescription>
        </CardHeader>
        <CardContent className="pb-2">
          <ChartContainer 
            config={chartConfig}
            className="max-h-[200px] w-full" // 고정 높이로 바 차트 크기 제한
          >
            <RechartsPieChart>
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent 
                  hideLabel
                  formatter={(value, name) => [
                    `${value}건 (${Math.round((Number(value) / totalTasks) * 100)}%)`,
                    name
                  ]}
                />}
              />
              <Pie
                data={pieChartData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={({ name, percent }) => 
                  percent > 0.1 ? `${(percent * 100).toFixed(0)}%` : ''
                }
                outerRadius={70} // 작은 공간에 맞게 더 작게 조정
                fill="#8884d8"
                dataKey="value"
              >
                {pieChartData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
            </RechartsPieChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="pt-2">
          <div className="grid grid-cols-1 gap-1 w-full text-center">
            <div className="text-xs space-y-1">
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">대기</span>
                <span className="font-medium text-gray-600">{totalPending}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">진행</span>
                <span className="font-medium text-blue-600">{totalInProgress}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">완료</span>
                <span className="font-medium text-green-600">{totalCompleted}</span>
              </div>
            </div>
          </div>
        </CardFooter>
      </Card>
    </div>
  );
}

// 더 컴팩트한 버전 (높이를 더 많이 줄이고 싶은 경우)
export function CompactDashboardChart({ data, title, description }: DashboardOverviewChartProps) {
  const totalPending = data.reduce((sum, item) => sum + item.pending, 0);
  const totalInProgress = data.reduce((sum, item) => sum + item.inProgress, 0);
  const totalCompleted = data.reduce((sum, item) => sum + item.completed, 0);
  const totalTasks = totalPending + totalInProgress + totalCompleted;

  const pieChartData = [
    { name: "대기", value: totalPending, color: PIE_COLORS.pending },
    { name: "진행중", value: totalInProgress, color: PIE_COLORS.inProgress },
    { name: "완료", value: totalCompleted, color: PIE_COLORS.completed }
  ].filter(item => item.value > 0);

  const completionRate = totalTasks > 0 ? Math.round((totalCompleted / totalTasks) * 100) : 0;

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
      {/* 요약 통계 */}
      <Card className="flex items-center p-4">
        <div className="flex-1">
          <h3 className="text-sm font-medium text-muted-foreground">완료율</h3>
          <div className="text-2xl font-bold">{completionRate}%</div>
          <p className="text-xs text-muted-foreground">총 {totalTasks}건</p>
        </div>
        <TrendingUp className={`h-8 w-8 ${completionRate > 50 ? 'text-green-600' : 'text-orange-600'}`} />
      </Card>

      {/* 컴팩트 파이 차트 */}
      <Card className="col-span-2">
        <CardHeader className="pb-3">
          <CardTitle className="text-lg">{title}</CardTitle>
        </CardHeader>
        <CardContent className="pb-3">
          <div className="flex items-center gap-6">
            {/* 작은 파이 차트 */}
            <div className="flex-shrink-0">
              <ChartContainer 
                config={chartConfig}
                className="h-[120px] w-[120px]"
              >
                <RechartsPieChart>
                  <ChartTooltip
                    cursor={false}
                    content={<ChartTooltipContent 
                      hideLabel
                      formatter={(value, name) => [`${value}건`, name]}
                    />}
                  />
                  <Pie
                    data={pieChartData}
                    cx="50%"
                    cy="50%"
                    outerRadius={50}
                    innerRadius={20} // 도넛 차트로 만들어 공간 절약
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {pieChartData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                </RechartsPieChart>
              </ChartContainer>
            </div>
            
            {/* 통계 목록 */}
            <div className="flex-1 grid grid-cols-1 gap-3">
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 rounded-full bg-gray-500"></div>
                <span className="text-sm">대기: {totalPending}건</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                <span className="text-sm">진행중: {totalInProgress}건</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                <span className="text-sm">완료: {totalCompleted}건</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}