'use client';

import * as React from 'react';
import { useQuery } from '@tanstack/react-query';
import {
  Database,
  Files,
  HardDrive,
  Info,
  Loader2,
  TrendingUp,
  Upload,
} from 'lucide-react';
import {
  Area,
  AreaChart,
  CartesianGrid,
  Cell,
  Pie,
  PieChart,
  XAxis,
  YAxis,
} from 'recharts';

import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@/components/ui/chart';
import services, { formatFileSize } from '@/lib/services';

const categoryMap: Record<string, string> = {
  图片: 'images',
  视频: 'videos',
  音频: 'audio',
  文档: 'documents',
  压缩包: 'archives',
  其他: 'others',
};

const statsChartConfig = {
  images: {
    label: '图片',
    color: 'hsl(var(--chart-1))',
  },
  videos: {
    label: '视频',
    color: 'hsl(var(--chart-2))',
  },
  audio: {
    label: '音频',
    color: 'hsl(var(--chart-3))',
  },
  documents: {
    label: '文档',
    color: 'hsl(var(--chart-4))',
  },
  archives: {
    label: '压缩包',
    color: 'hsl(var(--chart-5))',
  },
  others: {
    label: '其他',
    color: 'hsl(var(--chart-6))',
  },
  count: {
    label: '新增文件数',
    color: 'hsl(var(--primary))',
  },
  size: {
    label: '新增大小',
    color: 'hsl(var(--chart-2))',
  },
} satisfies ChartConfig;

export function FileStats() {
  const [trendMetric, setTrendMetric] = React.useState<'count' | 'size'>(
    'count',
  );

  const statsQuery = useQuery({
    queryKey: ['files', 'stats'],
    queryFn: () => services.adminUpload.getFileStats(),
    staleTime: 0,
    refetchOnMount: 'always',
  });

  const stats = statsQuery.data;

  const trendData = React.useMemo(() => {
    if (!stats?.trend) return [];
    return stats.trend.map((item) => ({
      ...item,
      formattedDate: item.date.substring(5), // YYYY-MM-DD -> MM-DD
      value: trendMetric === 'count' ? item.count : item.size,
    }));
  }, [stats?.trend, trendMetric]);

  const categoryCountData = React.useMemo(() => {
    if (!stats?.categories) return [];
    return stats.categories
      .filter((c) => c.count > 0)
      .map((c) => {
        const key = categoryMap[c.name] || 'others';
        return {
          name: key,
          value: c.count,
          fill: `var(--color-${key})`,
        };
      });
  }, [stats?.categories]);

  const categorySizeData = React.useMemo(() => {
    if (!stats?.categories) return [];
    return stats.categories
      .filter((c) => c.size > 0)
      .map((c) => {
        const key = categoryMap[c.name] || 'others';
        return {
          name: key,
          value: c.size,
          fill: `var(--color-${key})`,
        };
      });
  }, [stats?.categories]);

  const maxStats = React.useMemo(() => {
    if (!stats?.categories || stats.categories.length === 0) {
      return { maxCountName: '无', maxCount: 0, maxSizeName: '无', maxSize: 0 };
    }
    let maxCountName = '无';
    let maxCount = 0;
    let maxSizeName = '无';
    let maxSize = 0;

    stats.categories.forEach((cat) => {
      if (cat.count > maxCount) {
        maxCount = cat.count;
        maxCountName = cat.name;
      }
      if (cat.size > maxSize) {
        maxSize = cat.size;
        maxSizeName = cat.name;
      }
    });

    return { maxCountName, maxCount, maxSizeName, maxSize };
  }, [stats?.categories]);

  const trendSummary = React.useMemo(() => {
    if (!stats?.trend) return { count: 0, size: 0 };
    return stats.trend.reduce(
      (acc, curr) => ({
        count: acc.count + curr.count,
        size: acc.size + curr.size,
      }),
      { count: 0, size: 0 },
    );
  }, [stats?.trend]);

  if (statsQuery.isLoading) {
    return (
      <div className='flex items-center justify-center py-32'>
        <Loader2 className='size-8 animate-spin text-sky-500' />
      </div>
    );
  }

  if (!stats || stats.total_count === 0) {
    return (
      <div className='flex flex-col items-center justify-center py-24 border border-dashed rounded-xl bg-card text-muted-foreground gap-4'>
        <Upload className='size-14 text-muted-foreground/25' />
        <div className='text-center space-y-1'>
          <p className='font-medium'>暂无上传数据</p>
          <p className='text-xs text-muted-foreground'>
            上传文件后即可在此查看容量与文件分布分析。
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className='space-y-6'>
      {/* 四个指标卡片 */}
      <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
              总文件数
            </CardTitle>
            <Files className='size-4 text-sky-500' />
          </CardHeader>
          <CardContent>
            <div className='text-2xl font-bold font-mono text-sky-500'>
              {stats.total_count.toLocaleString()}{' '}
              <span className='text-xs font-normal text-muted-foreground'>
                个
              </span>
            </div>
            <p className='text-[10px] text-muted-foreground mt-1'>
              您上传的可用文件数量汇总
            </p>
          </CardContent>
        </Card>

        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
              占用存储容量
            </CardTitle>
            <Database className='size-4 text-emerald-500' />
          </CardHeader>
          <CardContent>
            <div className='text-2xl font-bold font-mono text-emerald-500'>
              {formatFileSize(stats.total_size)}
            </div>
            <p className='text-[10px] text-muted-foreground mt-1'>
              文件实际在磁盘/S3中占用的总空间
            </p>
          </CardContent>
        </Card>

        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
              近 7 天新增文件
            </CardTitle>
            <TrendingUp className='size-4 text-indigo-500' />
          </CardHeader>
          <CardContent>
            <div className='text-2xl font-bold font-mono text-indigo-500'>
              +{trendSummary.count.toLocaleString()}{' '}
              <span className='text-xs font-normal text-muted-foreground'>
                个
              </span>
            </div>
            <p className='text-[10px] text-muted-foreground mt-1'>
              最近 7 天上传成功的文件总数
            </p>
          </CardContent>
        </Card>

        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
              近 7 天新增大小
            </CardTitle>
            <HardDrive className='size-4 text-amber-500' />
          </CardHeader>
          <CardContent>
            <div className='text-2xl font-bold font-mono text-amber-500'>
              +{formatFileSize(trendSummary.size)}
            </div>
            <p className='text-[10px] text-muted-foreground mt-1'>
              最近 7 天上传所消耗的存储带宽
            </p>
          </CardContent>
        </Card>
      </div>

      {/* 7 天新增趋势折线图 */}
      <Card className='bg-card/20 border-border/40'>
        <CardHeader className='flex flex-row items-center justify-between'>
          <div>
            <CardTitle className='text-sm font-bold'>
              最近 7 天新增趋势
            </CardTitle>
            <CardDescription className='text-xs'>
              按日统计近一周期内的上传波动
            </CardDescription>
          </div>
          <div className='flex items-center gap-1 border rounded-lg p-0.5 bg-muted/30'>
            <Button
              size='sm'
              variant={trendMetric === 'count' ? 'secondary' : 'ghost'}
              className='h-7 text-xs px-2.5 rounded-md'
              onClick={() => setTrendMetric('count')}
            >
              新增数量 (个)
            </Button>
            <Button
              size='sm'
              variant={trendMetric === 'size' ? 'secondary' : 'ghost'}
              className='h-7 text-xs px-2.5 rounded-md'
              onClick={() => setTrendMetric('size')}
            >
              新增大小 (MB)
            </Button>
          </div>
        </CardHeader>
        <CardContent className='pl-2 pr-4 pt-2'>
          <div className='h-[280px] w-full'>
            <ChartContainer config={statsChartConfig} className='w-full h-full'>
              <AreaChart
                data={trendData}
                margin={{ top: 10, right: 10, left: 10, bottom: 0 }}
              >
                <defs>
                  <linearGradient id='colorCount' x1='0' y1='0' x2='0' y2='1'>
                    <stop
                      offset='5%'
                      stopColor='var(--color-count)'
                      stopOpacity={0.3}
                    />
                    <stop
                      offset='95%'
                      stopColor='var(--color-count)'
                      stopOpacity={0.01}
                    />
                  </linearGradient>
                  <linearGradient id='colorSize' x1='0' y1='0' x2='0' y2='1'>
                    <stop
                      offset='5%'
                      stopColor='var(--color-size)'
                      stopOpacity={0.3}
                    />
                    <stop
                      offset='95%'
                      stopColor='var(--color-size)'
                      stopOpacity={0.01}
                    />
                  </linearGradient>
                </defs>
                <CartesianGrid
                  strokeDasharray='3 3'
                  vertical={false}
                  stroke='hsl(var(--border)/40)'
                />
                <XAxis
                  dataKey='formattedDate'
                  tickLine={false}
                  axisLine={false}
                  tickMargin={8}
                  style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
                />
                <YAxis
                  tickLine={false}
                  axisLine={false}
                  tickMargin={8}
                  style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
                  tickFormatter={(v) =>
                    trendMetric === 'size' ? formatFileSize(v) : v.toString()
                  }
                />
                <ChartTooltip
                  cursor={false}
                  content={
                    <ChartTooltipContent
                      hideLabel
                      formatter={(value) => {
                        const label =
                          trendMetric === 'count' ? '新增文件数' : '新增大小';
                        const formattedValue =
                          trendMetric === 'size'
                            ? formatFileSize(Number(value))
                            : `${value} 个`;
                        return (
                          <>
                            <div className='flex items-center gap-1.5'>
                              <span
                                className='size-2 rounded-full animate-pulse'
                                style={{
                                  backgroundColor:
                                    trendMetric === 'count'
                                      ? 'var(--color-count)'
                                      : 'var(--color-size)',
                                }}
                              />
                              <span className='text-muted-foreground'>
                                {label}
                              </span>
                            </div>
                            <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                              {formattedValue}
                            </span>
                          </>
                        );
                      }}
                    />
                  }
                />
                <Area
                  type='monotone'
                  dataKey='value'
                  stroke={
                    trendMetric === 'count'
                      ? 'var(--color-count)'
                      : 'var(--color-size)'
                  }
                  strokeWidth={2.5}
                  fillOpacity={1}
                  fill={
                    trendMetric === 'count'
                      ? 'url(#colorCount)'
                      : 'url(#colorSize)'
                  }
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </CardContent>
      </Card>

      {/* 两个饼图分布 */}
      <div className='grid gap-6 md:grid-cols-2'>
        {/* 饼图 1: 格式数量分布 */}
        <Card className='bg-card/20 border-border/40 flex flex-col'>
          <CardHeader>
            <CardTitle className='text-sm font-bold'>
              文件格式数量分布
            </CardTitle>
            <CardDescription className='text-xs'>
              各种格式类型的文件个数占比
            </CardDescription>
          </CardHeader>
          <CardContent className='flex-1 flex flex-col justify-between gap-4'>
            {categoryCountData.length === 0 ? (
              <div className='h-[240px] flex items-center justify-center text-xs text-muted-foreground'>
                暂无分类数据
              </div>
            ) : (
              <div className='h-[240px] w-full'>
                <ChartContainer
                  config={statsChartConfig}
                  className='w-full h-full'
                >
                  <PieChart>
                    <Pie
                      data={categoryCountData}
                      cx='50%'
                      cy='50%'
                      innerRadius={60}
                      outerRadius={80}
                      paddingAngle={3}
                      dataKey='value'
                    >
                      {categoryCountData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.fill} />
                      ))}
                    </Pie>
                    <ChartTooltip
                      cursor={false}
                      content={
                        <ChartTooltipContent
                          hideLabel
                          formatter={(value, name) => {
                            const configObj =
                              statsChartConfig[
                                name as keyof typeof statsChartConfig
                              ];
                            const label = configObj?.label || name;
                            const color =
                              configObj?.color || 'hsl(var(--muted))';
                            return (
                              <>
                                <div className='flex items-center gap-1.5'>
                                  <span
                                    className='size-2 rounded-full'
                                    style={{ backgroundColor: color }}
                                  />
                                  <span className='text-muted-foreground'>
                                    {label}
                                  </span>
                                </div>
                                <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                                  {value} 个
                                </span>
                              </>
                            );
                          }}
                        />
                      }
                    />
                    <ChartLegend
                      content={<ChartLegendContent nameKey='name' />}
                      className='flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4'
                    />
                  </PieChart>
                </ChartContainer>
              </div>
            )}
            <div className='bg-sky-500/5 border border-sky-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-sky-600 dark:text-sky-400'>
              <Info className='size-4 shrink-0 mt-0.5' />
              <p className='leading-normal'>
                文件类型中数量最多的是{' '}
                <strong className='font-bold'>
                  「{maxStats.maxCountName}」
                </strong>
                ，累计上传了{' '}
                <strong className='font-mono font-bold'>
                  {maxStats.maxCount}
                </strong>{' '}
                个文件。
              </p>
            </div>
          </CardContent>
        </Card>

        {/* 饼图 2: 格式容量分布 */}
        <Card className='bg-card/20 border-border/40 flex flex-col'>
          <CardHeader>
            <CardTitle className='text-sm font-bold'>
              文件占用容量分布
            </CardTitle>
            <CardDescription className='text-xs'>
              各种格式类型的文件大小占比
            </CardDescription>
          </CardHeader>
          <CardContent className='flex-1 flex flex-col justify-between gap-4'>
            {categorySizeData.length === 0 ? (
              <div className='h-[240px] flex items-center justify-center text-xs text-muted-foreground'>
                暂无容量数据
              </div>
            ) : (
              <div className='h-[240px] w-full'>
                <ChartContainer
                  config={statsChartConfig}
                  className='w-full h-full'
                >
                  <PieChart>
                    <Pie
                      data={categorySizeData}
                      cx='50%'
                      cy='50%'
                      innerRadius={60}
                      outerRadius={80}
                      paddingAngle={3}
                      dataKey='value'
                    >
                      {categorySizeData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.fill} />
                      ))}
                    </Pie>
                    <ChartTooltip
                      cursor={false}
                      content={
                        <ChartTooltipContent
                          hideLabel
                          formatter={(value, name) => {
                            const configObj =
                              statsChartConfig[
                                name as keyof typeof statsChartConfig
                              ];
                            const label = configObj?.label || name;
                            const color =
                              configObj?.color || 'hsl(var(--muted))';
                            return (
                              <>
                                <div className='flex items-center gap-1.5'>
                                  <span
                                    className='size-2 rounded-full'
                                    style={{ backgroundColor: color }}
                                  />
                                  <span className='text-muted-foreground'>
                                    {label}
                                  </span>
                                </div>
                                <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                                  {formatFileSize(Number(value))}
                                </span>
                              </>
                            );
                          }}
                        />
                      }
                    />
                    <ChartLegend
                      content={<ChartLegendContent nameKey='name' />}
                      className='flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4'
                    />
                  </PieChart>
                </ChartContainer>
              </div>
            )}
            <div className='bg-emerald-500/5 border border-emerald-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-emerald-600 dark:text-emerald-400'>
              <Info className='size-4 shrink-0 mt-0.5' />
              <p className='leading-normal'>
                文件类型中占用存储最大的是{' '}
                <strong className='font-bold'>
                  「{maxStats.maxSizeName}」
                </strong>
                ，共消耗了{' '}
                <strong className='font-mono font-bold'>
                  {formatFileSize(maxStats.maxSize)}
                </strong>{' '}
                存储容量。
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}