'use client';

/**
 * Dashboard de métricas por projeto (`/projetos/[id]/dashboard-metricas`). FRONT-S2-02.
 */

import { BarChart3, CheckCircle2, CirclePlay, Clock, Gauge, History, ListChecks, PieChart, TriangleAlert, Users } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo } from 'react';
import {
    Row,
    Col,
    Table,
    Button,
    Space,
    Tooltip,
} from 'antd';
import { useParams, useRouter } from 'next/navigation';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { LazyPieChart, LazyBarChart, LazyLineChart } from '@/components/lazy';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { QueryDataStates } from '@/components/shared';
import type { DashboardMetricasData } from './types';
import {
    DASHBOARD_METRICAS_CHART_COLORS,
    buildDashboardMetricasTarefasColumns} from './dashboardMetricasDisplay';
import { routeProjetoId } from '@/features/projetos/feira-list';


export function ProjetoDashboardMetricasScreen() {
    const params = useParams();
    const router = useRouter();
    const projetoId = routeProjetoId(params);

    const {
        data: metricasData,
        isLoading,
        isError,
        error: metricasError,
        refetch,
    } = useQueryCache<DashboardMetricasData>({
        queryKey: queryKeys.projetos.dashboardMetricas(projetoId),
        endpoint: API_ENDPOINTS.projetos.dashboardMetricas(projetoId),
        staleTime: 2 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: !!projetoId});

    const tarefasColumns = useMemo(() => buildDashboardMetricasTarefasColumns(), []);

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle={isLoading && !metricasData ? 'Carregando...' : 'Dashboard de Métricas'}
            pageIcon={isLoading && !metricasData ? 'spinner' : 'chart-line'}
            titleSection="Métricas"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: metricasData?.projeto.nome || 'Projeto' },
                { title: 'Métricas' },
            ]}
        >
            <QueryDataStates
                isLoading={isLoading && !metricasData}
                isError={isError}
                error={metricasError}
                onRetry={() => void refetch()}
                isEmpty={false}
                loadingTip="Carregando métricas do projeto…"
                errorTitle="Não foi possível carregar as métricas"
            >
                {metricasData ? (
                    <>
            <OperativeRouteHint
                message="Leitura analítica"
                description="Use os cartões e gráficos como recorte rápido; quando identificar desvio, salte para execução ou planejamento."
            >
                <Space wrap size={8} align="center">
                    <Tooltip title="Abrir quadro Kanban do projeto">
                        <span style={{ display: 'inline-block' }}>
                            <Button type="primary" onClick={() => router.push(`/projetos/${projetoId}/kanban`)}>
                                Abrir Kanban
                            </Button>
                        </span>
                    </Tooltip>
                    <Tooltip title="Abrir backlog de planejamento">
                        <span style={{ display: 'inline-block' }}>
                            <Button onClick={() => router.push(`/projetos/${projetoId}/planejamento/backlog`)}>
                                Backlog de planejamento
                            </Button>
                        </span>
                    </Tooltip>
                    <Tooltip title="Abrir dashboard de desenvolvimento">
                        <span style={{ display: 'inline-block' }}>
                            <Button
                                onClick={() => router.push(`/projetos/${projetoId}/desenvolvimento/dashboard`)}
                            >
                                Dashboard desenvolvimento
                            </Button>
                        </span>
                    </Tooltip>
                </Space>
            </OperativeRouteHint>
            <MetricsGrid columns={4} style={{ marginBottom: 24 }}>
                <MetricCard
                    icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}
                    label="Total de Tarefas"
                    value={metricasData?.kpis.total_tarefas || 0}
                    variant="emAndamento"
                />
                <MetricCard
                    icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                    label="Concluídas"
                    value={metricasData?.kpis.tarefas_concluidas || 0}
                    variant="concluidos"
                />
                <MetricCard
                    icon={<CirclePlay size={ICON_SIZE_MD} aria-hidden />}
                    label="Em Andamento"
                    value={metricasData?.kpis.tarefas_andamento || 0}
                    variant="emAndamento"
                />
                <MetricCard
                    icon={<Clock size={ICON_SIZE_MD} aria-hidden />}
                    label="Pendentes"
                    value={metricasData?.kpis.tarefas_pendentes || 0}
                    variant="gradientRed"
                />
            </MetricsGrid>

            <MetricsGrid columns={3} style={{ marginBottom: 24 }}>
                <MetricCard
                    icon={<PieChart size={ICON_SIZE_MD} aria-hidden />}
                    label="Progresso Geral"
                    value={`${metricasData?.kpis.progresso_geral || 0}%`}
                    variant="projetos"
                />
                <MetricCard
                    icon={<Gauge size={ICON_SIZE_MD} aria-hidden />}
                    label="Velocidade Média"
                    value={`${metricasData?.kpis.velocidade_media || 0} tarefas/semana`}
                    variant="concluidos"
                />
                <MetricCard
                    icon={<History size={ICON_SIZE_MD} aria-hidden />}
                    label="Tempo Médio Conclusão"
                    value={`${metricasData?.kpis.tempo_medio_conclusao || 0} dias`}
                    variant="planejamento"
                />
            </MetricsGrid>

            <Row gutter={16} style={{ marginBottom: 24 }}>
                <Col xs={24} md={12}>
                    <ContentCard
                        title="Tarefas por Status"
                        icon={<PieChart size={ICON_SIZE_MD} aria-hidden />}
                    >
                        <LazyPieChart
                            data={(metricasData?.tarefas_por_status || []).map((item, index) => ({
                                name: item.status,
                                value: item.quantidade,
                                color:
                                    DASHBOARD_METRICAS_CHART_COLORS[
                                        index % DASHBOARD_METRICAS_CHART_COLORS.length
                                    ]}))}
                            height={300}
                        />
                    </ContentCard>
                </Col>
                <Col xs={24} md={12}>
                    <ContentCard
                        title="Tarefas por Prioridade"
                        icon={<BarChart3 size={ICON_SIZE_MD} aria-hidden />}
                    >
                        <LazyBarChart
                            data={metricasData?.tarefas_por_prioridade || []}
                            dataKey="prioridade"
                            bars={[{ key: 'quantidade', name: 'Quantidade', color: '#27132e' }]}
                            height={300}
                        />
                    </ContentCard>
                </Col>
            </Row>

            <Row gutter={16} style={{ marginBottom: 24 }}>
                <Col xs={24} md={12}>
                    <ContentCard
                        title="Evolução no Tempo"
                        icon={<BarChart3 size={ICON_SIZE_MD} aria-hidden />}
                    >
                        <LazyLineChart
                            data={metricasData?.evolucao_tempo || []}
                            dataKey="periodo"
                            lines={[
                                { key: 'concluidas', name: 'Concluídas', color: '#27ae60' },
                                { key: 'criadas', name: 'Criadas', color: '#27132e' },
                            ]}
                            height={300}
                        />
                    </ContentCard>
                </Col>
                <Col xs={24} md={12}>
                    <ContentCard
                        title="Tarefas por Responsável"
                        icon={<Users size={ICON_SIZE_MD} aria-hidden />}
                    >
                        <LazyBarChart
                            data={metricasData?.tarefas_por_responsavel || []}
                            dataKey="responsavel"
                            bars={[{ key: 'quantidade', name: 'Quantidade', color: '#27132e' }]}
                            height={300}
                        />
                    </ContentCard>
                </Col>
            </Row>

            <ContentCard
                title="Tarefas Recentes"
                icon={<Clock size={ICON_SIZE_MD} aria-hidden />}
                style={{ marginBottom: 24 }}
            >
                <Table
                    columns={tarefasColumns}
                    dataSource={metricasData?.tarefas_recentes || []}
                    rowKey="id"
                    pagination={{ pageSize: 5 }}
                />
            </ContentCard>

            {metricasData?.tarefas_atrasadas && metricasData.tarefas_atrasadas.length > 0 && (
                <ContentCard
                    title="Tarefas Atrasadas"
                    icon={
                        <TriangleAlert size={ICON_SIZE_MD} style={{ color: '#f5222d' }} aria-hidden />
                    }
                >
                    <Table
                        columns={tarefasColumns}
                        dataSource={metricasData.tarefas_atrasadas}
                        rowKey="id"
                        pagination={{ pageSize: 5 }}
                    />
                </ContentCard>
            )}
                    </>
                ) : null}
            </QueryDataStates>
        </ProjetoLayout>
    );
}