import React from 'react';
import { useParams } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { HiTrendingUp, HiCheckCircle, HiCollection } from 'react-icons/hi';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { ReportPageLayout } from '@/features/projects/components/ReportPageLayout';
import { api } from '@/shared/utils/api';

interface VelocityReport {
  meta: {
    project_id: string;
    project_name: string;
    report_type: string;
    generated_at: string;
  };
  summary: {
    total_sprints: number;
    average_velocity_md: number;
    trend: string;
    total_completed_items: number;
  };
  chart: {
    labels: string[];
    datasets: Array<{
      label: string;
      data: number[];
      borderColor: string;
      backgroundColor: string;
    }>;
  };
  table: {
    headers: string[];
    rows: Array<Record<string, unknown>>;
  };
}

async function fetchVelocityReport(projectId: string): Promise<VelocityReport> {
  const response = await api.get<{ data: VelocityReport }>(
    `/projects/${projectId}/reports/velocity`
  );
  return (response as { data: VelocityReport }).data;
}

const VelocityReportPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery({
    queryKey: ['projects', id, 'reports', 'velocity'],
    queryFn: () => fetchVelocityReport(id!),
    enabled: Boolean(id),
  });

  const handleExportCsv = () => {
    window.open(`/api/v1/projects/${id}/reports/export/velocity`, '_blank');
  };

  if (!id) return null;

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <ReportPageLayout
          title="Velocity Trend Report"
          subtitle="Track team velocity across sprints to understand delivery capacity"
          isLoading={isLoading}
          isEmpty={!data || data.chart.labels.length === 0}
          emptyMessage="Complete at least one sprint to see velocity data"
          summaryMetrics={
            data
              ? [
                  {
                    label: 'Avg Velocity',
                    value: `${data.summary.average_velocity_md} MD`,
                    icon: HiTrendingUp,
                    accent:
                      data.summary.trend === 'up'
                        ? 'success'
                        : data.summary.trend === 'down'
                          ? 'error'
                          : undefined,
                  },
                  {
                    label: 'Trend',
                    value: data.summary.trend.charAt(0).toUpperCase() + data.summary.trend.slice(1),
                    accent:
                      data.summary.trend === 'up'
                        ? 'success'
                        : data.summary.trend === 'down'
                          ? 'error'
                          : undefined,
                  },
                  {
                    label: 'Total Sprints',
                    value: data.summary.total_sprints,
                    icon: HiCollection,
                  },
                  {
                    label: 'Total Completed',
                    value: data.summary.total_completed_items,
                    icon: HiCheckCircle,
                  },
                ]
              : undefined
          }
          chartType="line"
          chartData={data?.chart}
          chartHeight={350}
          tableData={data?.table}
          onRefresh={() =>
            queryClient.invalidateQueries({ queryKey: ['projects', id, 'reports', 'velocity'] })
          }
          onExportCsv={handleExportCsv}
        />
      )}
    </ProjectPageShell>
  );
};

export default VelocityReportPage;