import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { HiClock, HiChartBar, HiCalendar } from 'react-icons/hi';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { ReportPageLayout } from '@/features/projects/components/ReportPageLayout';
import { useProjectSprints } from '@/features/projects/hooks/useProjectSprints';
import { api } from '@/shared/utils/api';

interface BurndownReport {
  meta: {
    project_id: string;
    sprint_id?: string;
    sprint_name?: string;
    report_type: string;
  };
  summary: {
    sprint_name: string;
    start_date: string;
    due_date: string;
    current_remaining_md: number | null;
    expected_remaining_md: number | null;
    days_remaining: number;
  };
  chart: {
    labels: string[];
    datasets: Array<{
      label: string;
      data: (number | null)[];
      borderColor: string;
      borderDash?: number[];
      fill: boolean;
    }>;
  };
  table?: {
    headers: string[];
    rows: Array<Record<string, unknown>>;
  };
  error?: string;
}

async function fetchBurndownReport(
  projectId: string,
  sprintId?: string
): Promise<BurndownReport> {
  const params = sprintId ? `?sprint_id=${sprintId}` : '';
  const response = await api.get<{ data: BurndownReport }>(
    `/projects/${projectId}/reports/burndown${params}`
  );
  return (response as { data: BurndownReport }).data;
}

const BurndownReportPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const queryClient = useQueryClient();
  const [selectedSprint, setSelectedSprint] = useState('');

  const { data: sprints } = useProjectSprints(id);

  const { data, isLoading } = useQuery({
    queryKey: ['projects', id, 'reports', 'burndown', selectedSprint],
    queryFn: () => fetchBurndownReport(id!, selectedSprint || undefined),
    enabled: Boolean(id),
  });

  if (!id) return null;

  const sprintOptions = [
    { value: '', label: 'Active Sprint' },
    ...(sprints ?? []).map((s) => ({ value: s.id, label: s.name })),
  ];

  const variance =
    data?.summary?.current_remaining_md != null &&
    data?.summary?.expected_remaining_md != null &&
    data.summary.expected_remaining_md > 0
      ? Math.round(
          ((data.summary.current_remaining_md - data.summary.expected_remaining_md) /
            data.summary.expected_remaining_md) *
            100
        )
      : null;

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <ReportPageLayout
          title="Sprint Burndown Report"
          subtitle="Track remaining work throughout the sprint to ensure timely delivery"
          isLoading={isLoading}
          isEmpty={!data || data.error !== undefined || data.chart.labels.length === 0}
          emptyMessage={data?.error || 'Start a sprint to see burndown data'}
          filters={[
            {
              id: 'sprint',
              label: 'Sprint',
              value: selectedSprint,
              options: sprintOptions,
              onChange: setSelectedSprint,
            },
          ]}
          summaryMetrics={
            data?.summary
              ? [
                  {
                    label: 'Sprint',
                    value: data.summary.sprint_name,
                    icon: HiCalendar,
                  },
                  {
                    label: 'Remaining',
                    value: `${data.summary.current_remaining_md ?? '—'} MD`,
                    icon: HiChartBar,
                    accent:
                      variance != null && variance > 10
                        ? 'error'
                        : variance != null && variance < -10
                          ? 'success'
                          : undefined,
                  },
                  {
                    label: 'Expected',
                    value: `${data.summary.expected_remaining_md ?? '—'} MD`,
                  },
                  {
                    label: 'Days Left',
                    value: data.summary.days_remaining,
                    icon: HiClock,
                    accent: data.summary.days_remaining <= 2 ? 'warning' : undefined,
                  },
                ]
              : undefined
          }
          chartType="line"
          chartData={data?.chart}
          chartHeight={350}
          tableData={data?.table}
          onRefresh={() =>
            queryClient.invalidateQueries({
              queryKey: ['projects', id, 'reports', 'burndown', selectedSprint],
            })
          }
        />
      )}
    </ProjectPageShell>
  );
};

export default BurndownReportPage;