"use client";

import React, { useMemo } from 'react';
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from 'recharts';
import {
  CalendarDays,
  Clock3,
  Loader2,
  Sparkles,
  WandSparkles
} from 'lucide-react';
import { ScreenTimeResponse } from '../types';
import { formatDuration, getLocalDateInputValue } from '../utils';

interface ScreenTimeOverviewChartProps {
  data: ScreenTimeResponse | null;
  unit: 'day' | 'week';
  loading: boolean;
  refreshing: boolean;
  onSelectDate: (date: string, nextUnit?: 'day' | 'week') => void;
  onSpotlightAppClick: (processId: string) => void;
}

interface WeekChartDatum {
  date: string;
  label: string;
  totalDurationSeconds: number;
  mutedDuration: number;
  selectedRemainder: number;
  spotlight_0: number;
  spotlight_1: number;
  spotlight_2: number;
  isSelected: boolean;
}

interface HourChartDatum {
  hour: number;
  label: string;
  totalDurationSeconds: number;
  spotlight_0: number;
  spotlight_1: number;
  spotlight_2: number;
  otherDurationSeconds: number;
}

interface TooltipPayloadRow<T> {
  payload: T;
}

interface RoundedBarShapeProps {
  fill?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  payload?: Record<string, unknown>;
}

const SPOTLIGHT_COLORS = ['#2f7cff', '#17c3d1', '#ff9f43'];
const OTHER_COLOR = '#d4d7df';
const MUTED_BAR_COLOR = '#cfd3dc';
const WEEK_STACK_KEYS = ['mutedDuration', 'spotlight_0', 'spotlight_1', 'spotlight_2', 'selectedRemainder'] as const;
const HOUR_STACK_KEYS = ['spotlight_0', 'spotlight_1', 'spotlight_2', 'otherDurationSeconds'] as const;

const getNumericValue = (value: unknown) => {
  return typeof value === 'number' && Number.isFinite(value) ? value : 0;
};

const getRoundedTopBarPath = (x: number, y: number, width: number, height: number, radius: number) => {
  const safeRadius = Math.max(0, Math.min(radius, width / 2, height));

  return [
    `M${x},${y + height}`,
    `L${x},${y + safeRadius}`,
    `Q${x},${y} ${x + safeRadius},${y}`,
    `L${x + width - safeRadius},${y}`,
    `Q${x + width},${y} ${x + width},${y + safeRadius}`,
    `L${x + width},${y + height}`,
    'Z'
  ].join(' ');
};

const createRoundedTopShape = (
  dataKey: string,
  stackKeys: readonly string[],
  radius: number
) => {
  return ({ fill, x, y, width, height, payload }: RoundedBarShapeProps) => {
    if (
      typeof x !== 'number' ||
      typeof y !== 'number' ||
      typeof width !== 'number' ||
      typeof height !== 'number' ||
      width <= 0 ||
      height <= 0
    ) {
      return null;
    }

    const currentValue = getNumericValue(payload?.[dataKey]);
    if (currentValue <= 0) {
      return null;
    }

    const currentIndex = stackKeys.indexOf(dataKey);
    const isTopMostSegment = currentIndex === -1 || stackKeys
      .slice(currentIndex + 1)
      .every((key) => getNumericValue(payload?.[key]) <= 0);

    if (!isTopMostSegment) {
      return <rect x={x} y={y} width={width} height={height} fill={fill} />;
    }

    return <path d={getRoundedTopBarPath(x, y, width, height, radius)} fill={fill} />;
  };
};

const formatAxisDuration = (durationSeconds: number) => {
  if (durationSeconds <= 0) return '0';
  if (durationSeconds >= 3600) {
    const hours = durationSeconds / 3600;
    return `${hours >= 10 ? Math.round(hours) : hours.toFixed(hours >= 2 ? 0 : 1)}h`;
  }

  return `${Math.round(durationSeconds / 60)}m`;
};

const formatSelectedDateHeadline = (dateString: string) => {
  const [year, month, day] = dateString.split('-').map(Number);
  const target = new Date(year, month - 1, day);
  const today = getLocalDateInputValue();
  const label = `${target.getMonth() + 1}月${target.getDate()}日`;

  if (dateString === today) {
    return `${label} 今天`;
  }

  return label;
};

const formatUpdateTime = (value: string | null) => {
  if (!value) return '暂无记录';

  const date = new Date(value);
  return `更新于 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

const OverviewSkeleton = () => {
  return (
    <div className="rounded-[2rem] border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
      <div className="screen-time-skeleton h-6 w-36 rounded-full" />
      <div className="mt-4 screen-time-skeleton h-14 w-56 rounded-2xl" />
      <div className="mt-8 rounded-[1.75rem] bg-gray-50 p-5 dark:bg-gray-900/60">
        <div className="flex h-40 items-end gap-3">
          {[56, 88, 62, 76, 50, 68, 18].map((height, index) => (
            <div key={index} className="flex flex-1 flex-col items-center gap-3">
              <div className="screen-time-skeleton w-full rounded-t-2xl" style={{ height }} />
              <div className="screen-time-skeleton h-4 w-4 rounded-full" />
            </div>
          ))}
        </div>
        <div className="mt-8 flex h-32 items-end gap-2">
          {Array.from({ length: 18 }).map((_, index) => (
            <div
              key={index}
              className="screen-time-skeleton flex-1 rounded-t-xl"
              style={{ height: `${20 + (index % 6) * 12}px` }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

function WeekTooltip({
  active,
  payload
}: {
  active?: boolean;
  payload?: Array<TooltipPayloadRow<WeekChartDatum>>;
}) {
  if (!active || !payload || payload.length === 0) return null;

  const datum = payload[0].payload;

  return (
    <div className="rounded-2xl border border-gray-200 bg-white/95 px-4 py-3 shadow-xl backdrop-blur dark:border-gray-700 dark:bg-gray-900/95">
      <div className="text-xs font-medium text-gray-500 dark:text-gray-400">{datum.date}</div>
      <div className="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
        {formatDuration(datum.totalDurationSeconds)}
      </div>
      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
        {datum.isSelected ? '当前选中日，点击其他日期可跳转' : '点击查看这一天'}
      </div>
    </div>
  );
}

function HourTooltip({
  active,
  payload,
  spotlightNames
}: {
  active?: boolean;
  payload?: Array<TooltipPayloadRow<HourChartDatum>>;
  spotlightNames: string[];
}) {
  if (!active || !payload || payload.length === 0) return null;

  const datum = payload[0].payload;
  const rows = [0, 1, 2]
    .map((index) => ({
      label: spotlightNames[index],
      value: datum[`spotlight_${index}` as keyof HourChartDatum] as number,
      color: SPOTLIGHT_COLORS[index]
    }))
    .filter((row) => row.label && row.value > 0);

  if (datum.otherDurationSeconds > 0) {
    rows.push({
      label: '其他',
      value: datum.otherDurationSeconds,
      color: OTHER_COLOR
    });
  }

  return (
    <div className="min-w-44 rounded-2xl border border-gray-200 bg-white/95 px-4 py-3 shadow-xl backdrop-blur dark:border-gray-700 dark:bg-gray-900/95">
      <div className="text-xs font-medium text-gray-500 dark:text-gray-400">{datum.label}</div>
      <div className="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
        总计 {formatDuration(datum.totalDurationSeconds)}
      </div>
      <div className="mt-3 space-y-2">
        {rows.map((row) => (
          <div key={row.label} className="flex items-center justify-between gap-4 text-xs">
            <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
              <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: row.color }} />
              <span className="truncate">{row.label}</span>
            </div>
            <span className="font-medium text-gray-900 dark:text-white">{formatDuration(row.value)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function ScreenTimeOverviewChart({
  data,
  unit,
  loading,
  refreshing,
  onSelectDate,
  onSpotlightAppClick
}: ScreenTimeOverviewChartProps) {
  const weekChartData = useMemo(() => {
    if (!data) return [] as WeekChartDatum[];

    const spotlightTotal = data.overview.selectedDay.spotlightApps
      .reduce((sum, app) => sum + app.durationSeconds, 0);

    return data.overview.week.days.map((day) => ({
      date: day.date,
      label: day.weekdayLabel,
      totalDurationSeconds: day.totalDurationSeconds,
      mutedDuration: day.isSelected ? 0 : day.totalDurationSeconds,
      selectedRemainder: day.isSelected ? Math.max(day.totalDurationSeconds - spotlightTotal, 0) : 0,
      spotlight_0: day.isSelected ? (data.overview.selectedDay.spotlightApps[0]?.durationSeconds ?? 0) : 0,
      spotlight_1: day.isSelected ? (data.overview.selectedDay.spotlightApps[1]?.durationSeconds ?? 0) : 0,
      spotlight_2: day.isSelected ? (data.overview.selectedDay.spotlightApps[2]?.durationSeconds ?? 0) : 0,
      isSelected: day.isSelected
    }));
  }, [data]);

  const hourChartData = useMemo(() => {
    if (!data) return [] as HourChartDatum[];

    const spotlightApps = data.overview.selectedDay.spotlightApps;
    return data.overview.selectedDay.hours.map((hour) => ({
      hour: hour.hour,
      label: hour.label,
      totalDurationSeconds: hour.totalDurationSeconds,
      spotlight_0: spotlightApps[0] ? hour.spotlightDurations[spotlightApps[0].processId] ?? 0 : 0,
      spotlight_1: spotlightApps[1] ? hour.spotlightDurations[spotlightApps[1].processId] ?? 0 : 0,
      spotlight_2: spotlightApps[2] ? hour.spotlightDurations[spotlightApps[2].processId] ?? 0 : 0,
      otherDurationSeconds: hour.otherDurationSeconds
    }));
  }, [data]);

  const spotlightNames = data?.overview.selectedDay.spotlightApps.map((app) => app.processName) ?? [];
  const maxWeekDuration = useMemo(() => {
    if (!data) return 0;
    return Math.max(...data.overview.week.days.map((day) => day.totalDurationSeconds), 0);
  }, [data]);

  if (loading && !data) {
    return <OverviewSkeleton />;
  }

  if (!data) return null;

  return (
    <div className="relative overflow-hidden rounded-[2rem] border border-gray-200 bg-[radial-gradient(circle_at_top_left,rgba(59,130,246,0.10),transparent_28%),linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] p-6 shadow-sm dark:border-gray-700 dark:bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_28%),linear-gradient(180deg,#111827_0%,#0f172a_100%)]">
      {refreshing && (
        <div className="absolute inset-0 z-20 flex items-start justify-end bg-white/35 p-4 backdrop-blur-[2px] dark:bg-gray-950/25">
          <div className="inline-flex items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-medium text-gray-700 shadow-lg dark:bg-gray-900/90 dark:text-gray-200">
            <Loader2 className="h-3.5 w-3.5 animate-spin" />
            正在刷新统计
          </div>
        </div>
      )}

      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <div className="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-300">
            <CalendarDays className="h-4 w-4" />
            {formatSelectedDateHeadline(data.overview.selectedDay.date)}
          </div>
          <div className="mt-2 text-4xl font-semibold tracking-tight text-gray-950 dark:text-white sm:text-5xl">
            {formatDuration(data.totalDurationSeconds)}
          </div>
          <div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
            {unit === 'week' ? '本周总屏幕时间' : '当天总屏幕时间'}
            <span className="mx-2 text-gray-300 dark:text-gray-600">•</span>
            选中日 {formatDuration(data.overview.selectedDay.totalDurationSeconds)}
          </div>
        </div>

        <div className="grid gap-3 sm:grid-cols-3 lg:min-w-[22rem]">
          <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-sm ring-1 ring-black/5 backdrop-blur dark:bg-gray-900/70 dark:ring-white/10">
            <div className="text-xs text-gray-500 dark:text-gray-400">周平均</div>
            <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
              {formatDuration(data.overview.week.averageDurationSeconds)}
            </div>
          </div>
          <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-sm ring-1 ring-black/5 backdrop-blur dark:bg-gray-900/70 dark:ring-white/10">
            <div className="text-xs text-gray-500 dark:text-gray-400">活跃应用</div>
            <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
              {data.apps.length}
            </div>
          </div>
          <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-sm ring-1 ring-black/5 backdrop-blur dark:bg-gray-900/70 dark:ring-white/10">
            <div className="text-xs text-gray-500 dark:text-gray-400">采样节奏</div>
            <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
              {formatDuration(data.estimatedSampleSeconds)}
            </div>
          </div>
        </div>
      </div>

      <div className="mt-6 rounded-[1.75rem] border border-white/70 bg-white/70 p-5 shadow-inner shadow-white/40 backdrop-blur dark:border-gray-700/70 dark:bg-gray-900/60 dark:shadow-black/20">
        <div className="flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium text-gray-700 dark:text-gray-200">周概览</div>
            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              点击任意一天可以直接跳到该日期
            </div>
          </div>
          <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
            <Sparkles className="h-3.5 w-3.5" />
            选中日已高亮
          </div>
        </div>

        <div className="mt-4 h-48">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={weekChartData} barCategoryGap="20%">
              <CartesianGrid vertical={false} strokeDasharray="4 4" stroke="#d9dde5" />
              <XAxis axisLine={false} tickLine={false} dataKey="label" tick={{ fill: '#94a3b8', fontSize: 12 }} />
              <YAxis
                axisLine={false}
                tickLine={false}
                orientation="right"
                tick={{ fill: '#b0b7c3', fontSize: 12 }}
                tickFormatter={formatAxisDuration}
              />
              <ReferenceLine y={data.overview.week.averageDurationSeconds} stroke="#94a3b8" strokeDasharray="4 6" />
              <Tooltip content={<WeekTooltip />} cursor={{ fill: 'rgba(148, 163, 184, 0.08)' }} />

              <Bar dataKey="mutedDuration" stackId="week" shape={createRoundedTopShape('mutedDuration', WEEK_STACK_KEYS, 12)} onClick={(_, index) => {
                const day = data.overview.week.days[index];
                if (day) {
                  onSelectDate(day.date, unit === 'week' ? 'day' : undefined);
                }
              }}>
                {weekChartData.map((entry) => (
                  <Cell
                    key={`muted-${entry.date}`}
                    cursor="pointer"
                    fill={entry.isSelected ? 'transparent' : MUTED_BAR_COLOR}
                  />
                ))}
              </Bar>
              {[0, 1, 2].map((index) => (
                <Bar
                  key={`spotlight-${index}`}
                  dataKey={`spotlight_${index}`}
                  stackId="week"
                  shape={createRoundedTopShape(`spotlight_${index}`, WEEK_STACK_KEYS, 12)}
                  onClick={(_, clickedIndex) => {
                    const day = data.overview.week.days[clickedIndex];
                    if (day) {
                      onSelectDate(day.date, unit === 'week' ? 'day' : undefined);
                    }
                  }}
                >
                  {weekChartData.map((entry) => (
                    <Cell
                      key={`spotlight-cell-${index}-${entry.date}`}
                      cursor="pointer"
                      fill={entry.isSelected ? SPOTLIGHT_COLORS[index] : 'transparent'}
                    />
                  ))}
                </Bar>
              ))}
              <Bar dataKey="selectedRemainder" stackId="week" shape={createRoundedTopShape('selectedRemainder', WEEK_STACK_KEYS, 12)} onClick={(_, index) => {
                const day = data.overview.week.days[index];
                if (day) {
                  onSelectDate(day.date, unit === 'week' ? 'day' : undefined);
                }
              }}>
                {weekChartData.map((entry) => (
                  <Cell
                    key={`remainder-${entry.date}`}
                    cursor="pointer"
                    fill={entry.isSelected ? OTHER_COLOR : 'transparent'}
                  />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span>周总计 {formatDuration(data.overview.week.totalDurationSeconds)}</span>
          <span>最高 {formatDuration(maxWeekDuration)}</span>
        </div>

        <div className="mt-7 flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium text-gray-700 dark:text-gray-200">当日分布</div>
            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              24 小时内按主应用堆叠，帮你快速定位高强度时段
            </div>
          </div>
          <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300">
            <Clock3 className="h-3.5 w-3.5" />
            {formatDuration(data.overview.selectedDay.totalDurationSeconds)}
          </div>
        </div>

        <div className="mt-4 h-52">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={hourChartData} barCategoryGap={2}>
              <CartesianGrid vertical={false} strokeDasharray="4 4" stroke="#d9dde5" />
              <XAxis
                axisLine={false}
                tickLine={false}
                dataKey="label"
                interval={2}
                tick={{ fill: '#94a3b8', fontSize: 12 }}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                orientation="right"
                tick={{ fill: '#b0b7c3', fontSize: 12 }}
                tickFormatter={formatAxisDuration}
              />
              <Tooltip content={<HourTooltip spotlightNames={spotlightNames} />} cursor={{ fill: 'rgba(148, 163, 184, 0.08)' }} />
              {[0, 1, 2].map((index) => (
                <Bar
                  key={`hour-spotlight-${index}`}
                  dataKey={`spotlight_${index}`}
                  stackId="hours"
                  fill={SPOTLIGHT_COLORS[index]}
                  shape={createRoundedTopShape(`spotlight_${index}`, HOUR_STACK_KEYS, 10)}
                />
              ))}
              <Bar
                dataKey="otherDurationSeconds"
                stackId="hours"
                fill={OTHER_COLOR}
                shape={createRoundedTopShape('otherDurationSeconds', HOUR_STACK_KEYS, 10)}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="mt-5 flex flex-wrap gap-3">
          {data.overview.selectedDay.spotlightApps.length > 0 ? data.overview.selectedDay.spotlightApps.map((app, index) => (
            <button
              key={app.processId}
              onClick={() => onSpotlightAppClick(app.processId)}
              className="flex min-w-36 flex-1 items-start gap-3 rounded-2xl bg-white/80 px-4 py-3 text-left shadow-sm ring-1 ring-black/5 transition-transform hover:-translate-y-0.5 dark:bg-gray-900/70 dark:ring-white/10"
            >
              <span className="mt-1 h-3 w-3 rounded-full" style={{ backgroundColor: SPOTLIGHT_COLORS[index] }} />
              <span className="min-w-0 flex-1">
                <span className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
                  <WandSparkles className="h-3.5 w-3.5" />
                  Focus {index + 1}
                </span>
                <span className="mt-1 block truncate text-sm font-semibold text-gray-900 dark:text-white" title={app.processName}>
                  {app.processName}
                </span>
                <span className="mt-1 block text-xs text-gray-500 dark:text-gray-400">
                  {formatDuration(app.durationSeconds)} · {app.percentage}%
                </span>
              </span>
            </button>
          )) : (
            <div className="rounded-2xl bg-gray-50 px-4 py-3 text-sm text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
              当前日期没有足够的活跃应用数据来展示聚焦图例。
            </div>
          )}
        </div>
      </div>

      <div className="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <span>{formatUpdateTime(data.lastRecordedAt)}</span>
        <span>周柱状图可点击跳转，Focus 卡片可直接展开对应应用</span>
      </div>
    </div>
  );
}