'use client';

import { useTranslations } from 'next-intl';
import {
  PieChart as RechartsPieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Legend,
  Tooltip,
} from 'recharts';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import type { S3StatusType } from '@/hooks/lean/use-s3-plans';

interface S3ProgressChartProps {
  /** Status counts */
  data: {
    green: number;
    yellow: number;
    red: number;
    notApplicable: number;
  };
  /** Chart title */
  title?: string;
  /** Whether data is loading */
  isLoading?: boolean;
  /** Chart height */
  height?: number;
  /** Additional CSS classes */
  className?: string;
}

/**
 * Status colors for the pie chart
 */
const STATUS_COLORS: Record<string, string> = {
  green: '#22c55e',
  yellow: '#eab308',
  red: '#ef4444',
  notApplicable: '#9ca3af',
};

/**
 * S3 Progress Chart Component
 * Displays a pie chart showing the distribution of status values
 */
export function S3ProgressChart({
  data,
  title,
  isLoading = false,
  height = 300,
  className,
}: S3ProgressChartProps) {
  const tS3 = useTranslations('lean.s3');

  const statusLabels: Record<string, string> = {
    green: tS3('status.completed'),
    yellow: tS3('status.in_progress'),
    red: tS3('status.issue'),
    notApplicable: tS3('status.not_started'),
  };

  const displayTitle = title ?? tS3('statusOverview');

  const chartData = [
    { name: 'green', value: data.green, label: statusLabels.green },
    { name: 'yellow', value: data.yellow, label: statusLabels.yellow },
    { name: 'red', value: data.red, label: statusLabels.red },
    { name: 'notApplicable', value: data.notApplicable, label: statusLabels.notApplicable },
  ].filter((item) => item.value > 0);

  const total = data.green + data.yellow + data.red + data.notApplicable;
  const completionRate = total > 0 ? Math.round((data.green / total) * 100) : 0;

  if (isLoading) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="text-base font-medium">{displayTitle}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center" style={{ height }}>
            <Skeleton className="h-48 w-48 rounded-full" />
          </div>
        </CardContent>
      </Card>
    );
  }

  if (total === 0) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="text-base font-medium">{displayTitle}</CardTitle>
        </CardHeader>
        <CardContent>
          <div
            className="flex items-center justify-center text-muted-foreground"
            style={{ height }}
          >
            {tS3('noDataAvailable')}
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-medium">{displayTitle}</CardTitle>
          <div className="text-right">
            <div className="text-2xl font-bold">{completionRate}%</div>
            <div className="text-xs text-muted-foreground">{tS3('completionRate')}</div>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div style={{ height }}>
          <ResponsiveContainer width="100%" height="100%">
            <RechartsPieChart>
              <Pie
                data={chartData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={90}
                paddingAngle={2}
                dataKey="value"
                nameKey="label"
              >
                {chartData.map((entry) => (
                  <Cell
                    key={entry.name}
                    fill={STATUS_COLORS[entry.name]}
                    stroke="none"
                  />
                ))}
              </Pie>
              <Tooltip
                formatter={(value: number, name: string) => [value, name]}
                contentStyle={{
                  backgroundColor: 'hsl(var(--popover))',
                  border: '1px solid hsl(var(--border))',
                  borderRadius: '0.5rem',
                  color: 'hsl(var(--popover-foreground))',
                }}
              />
              <Legend
                formatter={(value) => (
                  <span className="text-sm text-muted-foreground">{value}</span>
                )}
              />
            </RechartsPieChart>
          </ResponsiveContainer>
        </div>

        {/* Stats summary */}
        <div className="grid grid-cols-4 gap-2 mt-4 pt-4 border-t">
          <div className="text-center">
            <div className="text-lg font-semibold text-green-500">
              {data.green}
            </div>
            <div className="text-xs text-muted-foreground">{tS3('done')}</div>
          </div>
          <div className="text-center">
            <div className="text-lg font-semibold text-yellow-500">
              {data.yellow}
            </div>
            <div className="text-xs text-muted-foreground">{tS3('working')}</div>
          </div>
          <div className="text-center">
            <div className="text-lg font-semibold text-red-500">{data.red}</div>
            <div className="text-xs text-muted-foreground">{tS3('problems')}</div>
          </div>
          <div className="text-center">
            <div className="text-lg font-semibold text-gray-400">
              {data.notApplicable}
            </div>
            <div className="text-xs text-muted-foreground">{tS3('openStatus')}</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
