'use client';

/**
 * Épicos cross-programa (`GET …/epicos/cross-programa`) — ADR-0040 Fase 3.
 */

import { Layers, Plus } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React, { useMemo } from 'react';
import { Alert, Button, Collapse, Progress, Table, Tag, Typography } from 'antd';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import ContentCard from '@/components/layouts/ContentCard';
import { projetoDetalhesStatusColor } from '../projeto-detalhes/projetoDetalhesUtils';

const { Text } = Typography;

export type EpicoCrossSuperficie = {
    projeto_id: number;
    projeto_nome?: string;
    codigo_superficie?: string | null;
    total_tarefas: number;
    tarefas_concluidas: number;
    progresso: number;
};

export type EpicoCrossItem = {
    id: number;
    codigo: string;
    nome: string;
    status?: string;
    progresso?: number;
    progresso_cross?: {
        total_tarefas?: number;
        tarefas_concluidas?: number;
        tarefas_em_andamento?: number;
    };
    por_superficie?: EpicoCrossSuperficie[];
};

type EpicosCrossApiResponse = {
    data: EpicoCrossItem[];
    meta: { total: number };
};

export function projetoEpicosCrossQueryKey(projetoId: string) {
    return ['projetos', 'epicos-cross', projetoId] as const;
}

type ProjetoEpicosCrossPanelProps = {
    programaId: string;
    programaNome?: string;
};

export function ProjetoEpicosCrossPanel({ programaId, programaNome }: ProjetoEpicosCrossPanelProps) {
    const router = useRouter();

    const { data, isLoading, isError, refetch } = useQueryCache<EpicosCrossApiResponse>({
        queryKey: projetoEpicosCrossQueryKey(programaId),
        endpoint: API_ENDPOINTS.epicos.crossPrograma(programaId),
        enabled: Boolean(programaId),
        staleTime: 2 * 60 * 1000,
    });

    const epicos = data?.data ?? [];

    const columns = useMemo(
        () => [
            {
                title: 'Código',
                dataIndex: 'codigo',
                key: 'codigo',
                width: 110,
                render: (codigo: string) => <Tag>{codigo}</Tag>,
            },
            {
                title: 'Épico',
                dataIndex: 'nome',
                key: 'nome',
                render: (nome: string, row: EpicoCrossItem) => (
                    <Link href={`/projetos/${programaId}/epicos/${row.id}`}>{nome}</Link>
                ),
            },
            {
                title: 'Status',
                dataIndex: 'status',
                key: 'status',
                width: 120,
                render: (status: string | undefined) =>
                    status ? <Tag color={projetoDetalhesStatusColor(status)}>{status}</Tag> : '—',
            },
            {
                title: 'Tarefas (todas superfícies)',
                key: 'tarefas',
                width: 140,
                render: (_: unknown, row: EpicoCrossItem) => {
                    const total = row.progresso_cross?.total_tarefas ?? 0;
                    const done = row.progresso_cross?.tarefas_concluidas ?? 0;
                    return (
                        <Text type="secondary">
                            {done}/{total}
                        </Text>
                    );
                },
            },
            {
                title: 'Progresso',
                key: 'progresso',
                width: 150,
                render: (_: unknown, row: EpicoCrossItem) => {
                    const total = row.progresso_cross?.total_tarefas ?? 0;
                    const done = row.progresso_cross?.tarefas_concluidas ?? 0;
                    const pct = total > 0 ? Math.round((done / total) * 100) : row.progresso ?? 0;
                    return <Progress percent={pct} size="small" />;
                },
            },
        ],
        [programaId],
    );

    const collapseItems = useMemo(
        () =>
            epicos
                .filter((e) => (e.por_superficie?.length ?? 0) > 0)
                .map((epico) => ({
                    key: String(epico.id),
                    label: `${epico.codigo} — por superfície`,
                    children: (
                        <Table<EpicoCrossSuperficie>
                            size="small"
                            pagination={false}
                            rowKey="projeto_id"
                            dataSource={epico.por_superficie ?? []}
                            columns={[
                                {
                                    title: 'Superfície',
                                    dataIndex: 'codigo_superficie',
                                    render: (c: string | null) => (c ? <Tag>{c}</Tag> : '—'),
                                },
                                {
                                    title: 'Projeto',
                                    dataIndex: 'projeto_nome',
                                    render: (nome: string, row: EpicoCrossSuperficie) => (
                                        <Link href={`/projetos/${row.projeto_id}`}>{nome}</Link>
                                    ),
                                },
                                {
                                    title: 'Tarefas',
                                    key: 'tarefas',
                                    render: (_: unknown, row: EpicoCrossSuperficie) =>
                                        `${row.tarefas_concluidas}/${row.total_tarefas}`,
                                },
                                {
                                    title: 'Progresso',
                                    dataIndex: 'progresso',
                                    render: (p: number) => <Progress percent={Math.round(p)} size="small" />,
                                },
                            ]}
                        />
                    ),
                })),
        [epicos],
    );

    if (isError) {
        return (
            <Alert
                type="error"
                showIcon
                message="Não foi possível carregar épicos cross-programa"
                action={
                    <Button size="small" onClick={() => void refetch()}>
                        Tentar novamente
                    </Button>
                }
            />
        );
    }

    return (
        <ContentCard
            title="Épicos cross-programa"
            icon={<Layers size={18} aria-hidden />}
            extra={
                <Button
                    type="primary"
                    icon={<Plus size={16} aria-hidden />}
                    onClick={() => router.push(`/projetos/${programaId}/epicos`)}
                >
                    Gerir épicos
                </Button>
            }
        >
            {programaNome ? (
                <Typography.Paragraph type="secondary" style={{ marginBottom: 16 }}>
                    Iniciativas do programa <strong>{programaNome}</strong> com tarefas distribuídas
                    pelos subprojetos (API, Front, Gestão…).
                </Typography.Paragraph>
            ) : null}

            <Table<EpicoCrossItem>
                rowKey="id"
                loading={isLoading}
                columns={columns}
                dataSource={epicos}
                pagination={false}
                locale={{ emptyText: 'Nenhum épico no programa — crie em Gerir épicos.' }}
                style={{ marginBottom: collapseItems.length > 0 ? 16 : 0 }}
            />

            {collapseItems.length > 0 ? (
                <Collapse items={collapseItems} size="small" />
            ) : null}
        </ContentCard>
    );
}