'use client';

/**
 * Gantt / cronograma do projeto (métricas, tabela, timeline simplificada).
 * FRONT-S2-02 — extraído de `app/(dashboard)/projetos/[id]/planejamento/gantt/page.tsx`.
 */

import { ChartGantt, CheckCircle2, ChevronLeft, CirclePlay, Info, List, ListChecks, RefreshCw } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo } from 'react';
import { useIsMobile } from '@/hooks/useIsMobile';
import {
    Col,
    Row,
    Space,
    Spin,
    Table,
    Tag,
    Tooltip,
    Typography,
} from 'antd';
import { useRouter, useParams } from 'next/navigation';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import type { ColumnsType } from 'antd/es/table';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import PageHeaderPagina from '@/components/layouts/PageHeaderPagina';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import type { GanttData, TarefaGantt } from './types';
import { ganttStatusBarColor, ganttStatusToTagColor } from './ganttDisplay';
import { GanttMobileTaskList } from './GanttMobileTaskList';

const { Text } = Typography;

function routeSegmentId(params: ReturnType<typeof useParams>): string {
    const raw = params?.id;
    if (typeof raw === 'string') return raw;
    if (Array.isArray(raw)) return raw[0] ?? '';
    return '';
}

export function ProjetoPlanejamentoGanttScreen() {
    const router = useRouter();
    const params = useParams();
    const projetoId = routeSegmentId(params);
    const isMobile = useIsMobile();

    const {
        data: ganttData,
        isLoading,
        refetch} = useQueryCache<GanttData>({
        queryKey: queryKeys.projetos.gantt(projetoId),
        endpoint: API_ENDPOINTS.projetos.gantt(projetoId),
        staleTime: 2 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: !!projetoId});

    const formatarData = (data?: string) => {
        if (!data) return '-';
        const parsed = dayjs(data);
        return parsed.isValid() ? parsed.locale('pt-br').format('DD/MM/YYYY') : data;
    };

    const tarefasPorStatus = useMemo(
        () =>
            ganttData?.tarefas.reduce(
                (acc, tarefa) => {
                    acc[tarefa.status] = (acc[tarefa.status] || 0) + 1;
                    return acc;
                },
                {} as Record<string, number>
            ) || {},
        [ganttData?.tarefas]
    );

    const tarefasAtrasoCount = useMemo(() => {
        const list = ganttData?.tarefas ?? [];
        return list.filter((t) => {
            if (!t.data_fim) return false;
            if ((t.progresso_percentual ?? 0) >= 100) return false;
            if (t.status === 'concluida') return false;
            return dayjs(t.data_fim).endOf('day').isBefore(dayjs());
        }).length;
    }, [ganttData?.tarefas]);

    const columns: ColumnsType<TarefaGantt> = [
        {
            title: 'Tarefa',
            dataIndex: 'titulo',
            key: 'titulo',
            sorter: (a, b) => String(a.titulo ?? '').localeCompare(String(b.titulo ?? ''), 'pt'),
            render: (text: string, record: TarefaGantt) => (
                <Space>
                    <Text strong>{text}</Text>
                    <Tag color={ganttStatusToTagColor(record.status)}>
                        {record.status.replace('_', ' ').toUpperCase()}
                    </Tag>
                </Space>
            )},
        {
            title: 'Início',
            dataIndex: 'data_inicio',
            key: 'data_inicio',
            sorter: (a, b) => dayjs(a.data_inicio).valueOf() - dayjs(b.data_inicio).valueOf(),
            render: (data: string) => formatarData(data)},
        {
            title: 'Fim',
            dataIndex: 'data_fim',
            key: 'data_fim',
            sorter: (a, b) => dayjs(a.data_fim).valueOf() - dayjs(b.data_fim).valueOf(),
            render: (data: string) => formatarData(data)},
        {
            title: 'Progresso',
            key: 'progresso',
            sorter: (a, b) =>
                (a.progresso_percentual ?? 0) - (b.progresso_percentual ?? 0),
            render: (_: unknown, record: TarefaGantt) => (
                <div>
                    <div style={{ marginBottom: '4px' }}>{record.progresso_percentual || 0}%</div>
                    <div
                        style={{
                            width: '100px',
                            height: '8px',
                            background: '#f0f0f0',
                            borderRadius: '4px',
                            overflow: 'hidden'}}
                    >
                        <div
                            style={{
                                width: `${record.progresso_percentual || 0}%`,
                                height: '100%',
                                background:
                                    record.progresso_percentual === 100 ? '#52c41a' : '#1890ff',
                                transition: 'width 0.3s'}}
                        />
                    </div>
                </div>
            )},
        {
            title: 'Duração',
            dataIndex: 'duracao_dias',
            key: 'duracao_dias',
            sorter: (a, b) => (a.duracao_dias ?? 0) - (b.duracao_dias ?? 0),
            render: (dias: number) => (dias ? `${dias} dias` : '-')},
        {
            title: 'Responsável',
            key: 'responsavel',
            sorter: (a, b) =>
                String(a.responsavel?.nome ?? '').localeCompare(
                    String(b.responsavel?.nome ?? ''),
                    'pt'
                ),
            render: (_: unknown, record: TarefaGantt) => record.responsavel?.nome || '-'},
    ];

    if (!projetoId) {
        return (
            <ProjetoLayout
                projetoId=""
                pageTitle="Gantt"
                pageIcon="project-diagram"
                titleSection="Gantt"
            >
                <ContentCard>
                    <Text type="secondary">Projeto inválido.</Text>
                </ContentCard>
            </ProjetoLayout>
        );
    }

    if (isLoading) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Carregando..."
                pageIcon="spinner"
                titleSection="Gantt"
            >
                <div style={{ padding: '24px', textAlign: 'center' }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Gantt"
            pageIcon="project-diagram"
            titleSection="Gantt"
        >
            <PageHeaderPagina
                title="Gráfico de Gantt"
                actions={
                    <Space wrap size={8} align="center">
                        <Tooltip title="Recarregar cronograma">
                            <span style={{ display: 'inline-block' }}>
                                <ButtonHeaderIcon
                                    icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                                    title="Atualizar"
                                    onClick={() => refetch()}
                                />
                            </span>
                        </Tooltip>
                        <Tooltip title="Voltar ao projeto">
                            <span style={{ display: 'inline-block' }}>
                                <ButtonHeaderIcon
                                    icon={<ChevronLeft size={ICON_SIZE_MD} aria-hidden />}
                                    title="Voltar"
                                    onClick={() => router.push(`/projetos/${projetoId}`)}
                                />
                            </span>
                        </Tooltip>
                    </Space>
                }
            />

            <OperativeRouteHint
                type={tarefasAtrasoCount > 0 ? 'warning' : 'info'}
                message="Cronograma e caminho crítico"
                description={
                    tarefasAtrasoCount > 0
                        ? `${tarefasAtrasoCount} tarefa(s) com data de fim ultrapassada e progresso incompleto — priorize replaneamento ou desbloqueio. Compare com o Kanban para ver dependências em execução.`
                        : 'Agrupe mentalmente por status; use a data de fim e o progresso para antecipar desvios antes que impactem o prazo global.'
                }
            />

            <Row gutter={16} style={{ marginBottom: 24 }}>
                <Col xs={24} md={6}>
                    <ContentCard title="Visão Geral" icon={<Info size={ICON_SIZE_MD} aria-hidden />}>
                        <Space direction="vertical" style={{ width: '100%' }} size="middle">
                            <div>
                                <Text type="secondary">Projeto</Text>
                                <div>
                                    <Text strong>{ganttData?.projeto.nome}</Text>
                                </div>
                            </div>
                            <div>
                                <Text type="secondary">Início</Text>
                                <div>{formatarData(ganttData?.projeto.data_inicio)}</div>
                            </div>
                            <div>
                                <Text type="secondary">Fim Previsto</Text>
                                <div>{formatarData(ganttData?.projeto.data_fim_prevista)}</div>
                            </div>
                            <div>
                                <Text type="secondary">Progresso</Text>
                                <div>
                                    <Text strong style={{ fontSize: '18px' }}>
                                        {ganttData?.projeto.progresso_percentual || 0}%
                                    </Text>
                                </div>
                            </div>
                        </Space>
                    </ContentCard>
                </Col>

                <Col xs={24} md={6}>
                    <ContentCard title="Tarefas por Status" icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}>
                        <Space direction="vertical" style={{ width: '100%' }}>
                            {Object.entries(tarefasPorStatus).map(([status, count]) => (
                                <div
                                    key={status}
                                    style={{ display: 'flex', justifyContent: 'space-between' }}
                                >
                                    <Tag color={ganttStatusToTagColor(status)}>
                                        {status.replace('_', ' ').toUpperCase()}
                                    </Tag>
                                    <Text strong>{count}</Text>
                                </div>
                            ))}
                            {Object.keys(tarefasPorStatus).length === 0 && (
                                <Text type="secondary">Nenhuma tarefa</Text>
                            )}
                        </Space>
                    </ContentCard>
                </Col>

                <Col xs={24} md={12}>
                    <MetricsGrid columns={isMobile ? 1 : 3}>
                        <MetricCard
                            icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}
                            label="Total de Tarefas"
                            value={ganttData?.tarefas.length || 0}
                            variant="projetos"
                        />
                        <MetricCard
                            icon={<CirclePlay size={ICON_SIZE_MD} aria-hidden />}
                            label="Em Andamento"
                            value={tarefasPorStatus.em_andamento || 0}
                            variant="emAndamento"
                        />
                        <MetricCard
                            icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                            label="Concluídas"
                            value={tarefasPorStatus.concluida || 0}
                            variant="concluidos"
                        />
                    </MetricsGrid>
                </Col>
            </Row>

            <ContentCard
                title="Lista de Tarefas"
                icon={<List size={ICON_SIZE_MD} aria-hidden />}
                style={{ marginBottom: 24 }}
            >
                {isMobile ? (
                    <GanttMobileTaskList
                        tarefas={ganttData?.tarefas ?? []}
                        formatarData={formatarData}
                    />
                ) : (
                    <Table
                        columns={columns}
                        dataSource={ganttData?.tarefas || []}
                        rowKey="id"
                        pagination={{
                            pageSize: 10,
                            showSizeChanger: true,
                            showTotal: (total) => `Total: ${total} tarefas`}}
                        onRow={(record) => {
                            const atraso =
                                record.data_fim &&
                                (record.progresso_percentual ?? 0) < 100 &&
                                record.status !== 'concluida' &&
                                dayjs(record.data_fim).endOf('day').isBefore(dayjs());
                            return {
                                style: atraso
                                    ? { backgroundColor: 'rgba(255, 77, 79, 0.06)' }
                                    : undefined};
                        }}
                    />
                )}
            </ContentCard>

            <ContentCard title="Timeline do Projeto" icon={<ChartGantt size={ICON_SIZE_MD} />}>
                <div style={{ padding: '20px', background: '#f5f5f5', borderRadius: '8px' }}>
                    <Text type="secondary">
                        Visualização completa do Gantt será implementada com biblioteca
                        especializada (ex: DHTMLX Gantt, React Gantt Chart, etc.)
                    </Text>
                    <div style={{ marginTop: '20px' }}>
                        {ganttData?.tarefas.map((tarefa) => {
                            const tagColor = ganttStatusToTagColor(tarefa.status);
                            return (
                                <div
                                    key={tarefa.id}
                                    style={{
                                        marginBottom: '8px',
                                        padding: '8px',
                                        background: 'white',
                                        borderRadius: '4px',
                                        borderLeft: `4px solid ${ganttStatusBarColor(tagColor)}`}}
                                >
                                    <Space>
                                        <Text strong>{tarefa.titulo}</Text>
                                        <Tag color={tagColor}>
                                            {tarefa.status.replace('_', ' ').toUpperCase()}
                                        </Tag>
                                        {tarefa.data_inicio && tarefa.data_fim && (
                                            <Text type="secondary" style={{ fontSize: '12px' }}>
                                                {formatarData(tarefa.data_inicio)} -{' '}
                                                {formatarData(tarefa.data_fim)}
                                            </Text>
                                        )}
                                        {tarefa.progresso_percentual !== undefined && (
                                            <Text type="secondary" style={{ fontSize: '12px' }}>
                                                {tarefa.progresso_percentual}%
                                            </Text>
                                        )}
                                    </Space>
                                </div>
                            );
                        })}
                        {(!ganttData?.tarefas || ganttData.tarefas.length === 0) && (
                            <Text type="secondary">Nenhuma tarefa para exibir</Text>
                        )}
                    </div>
                </div>
            </ContentCard>
        </ProjetoLayout>
    );
}