'use client';

/**
 * Rota canónica da matriz de priorização (T39). Legado: `/projetos/[id]/matriz-priorizacao` redireciona para aqui.
 *
 * Contrato API: `GET /v1/projetos/{id}/matriz-priorizacao`
 * (`do_now` | `schedule` | `delegate` | `delete` + `total`) — MetricasProjetoService::classificarMatrizEisenhower.
 *
 * @route /projetos/[id]/planejamento/priorizacao/matriz-priorizacao
 */
import { AlertCircle, CheckCircle2, Copy, Info, List, RefreshCw } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Table, Button, Space, Tag, Alert, Typography, Descriptions, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import type { ColumnsType } from 'antd/es/table';
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 { ButtonHeaderIcon } from '@/components/ui';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';

const { Paragraph, Text } = Typography;

type QuadranteApi = 'do_now' | 'schedule' | 'delegate' | 'delete';

type QuadranteUi = 'fazer_primeiro' | 'fazer_depois' | 'considerar' | 'evitar';

interface TarefaMatrizApi {
    id: number;
    titulo: string;
    descricao?: string | null;
    prioridade?: string | null;
    status?: string | null;
    data_conclusao?: string | null;
    responsavel?: { id?: number; nome?: string | null } | null;
}

interface QuadranteMatrizApi {
    total: number;
    tarefas: TarefaMatrizApi[];
}

interface MatrizPriorizacaoApiResponse {
    do_now: QuadranteMatrizApi;
    schedule: QuadranteMatrizApi;
    delegate: QuadranteMatrizApi;
    delete: QuadranteMatrizApi;
    total: number;
}

interface ItemPriorizacao {
    id: number;
    nome: string;
    prioridadeApi: string;
    status: string;
    responsavel: string;
    vencimento: string;
    quadrante: QuadranteUi;
    quadranteApi: QuadranteApi;
}

const QUADRANTE_MAP: Record<
    QuadranteApi,
    { ui: QuadranteUi; label: string; color: string; prioridadeResumo: 'alta' | 'media' | 'baixa' }
> = {
    do_now: { ui: 'fazer_primeiro', label: 'Fazer primeiro', color: 'success', prioridadeResumo: 'alta' },
    schedule: { ui: 'fazer_depois', label: 'Agendar', color: 'processing', prioridadeResumo: 'media' },
    delegate: { ui: 'considerar', label: 'Delegar', color: 'warning', prioridadeResumo: 'media' },
    delete: { ui: 'evitar', label: 'Eliminar / evitar', color: 'error', prioridadeResumo: 'baixa' },
};

function mapMatrizToItens(data: MatrizPriorizacaoApiResponse | undefined): ItemPriorizacao[] {
    if (!data) return [];
    const out: ItemPriorizacao[] = [];
    (Object.keys(QUADRANTE_MAP) as QuadranteApi[]).forEach((key) => {
        const bloco = data[key];
        const meta = QUADRANTE_MAP[key];
        (bloco?.tarefas ?? []).forEach((t) => {
            out.push({
                id: t.id,
                nome: t.titulo?.trim() || `Tarefa #${t.id}`,
                prioridadeApi: t.prioridade?.trim() || '—',
                status: t.status?.trim() || '—',
                responsavel: t.responsavel?.nome?.trim() || '—',
                vencimento: t.data_conclusao || '—',
                quadrante: meta.ui,
                quadranteApi: key,
            });
        });
    });
    return out;
}

export default function ProjetoMatrizPriorizacaoPage() {
    const params = useParams();
    const router = useRouter();
    const projetoId = (params?.id as string) || '';

    const {
        data: matrizData,
        isLoading,
        isError,
        error,
        refetch,
    } = useQueryCache<MatrizPriorizacaoApiResponse>({
        queryKey: queryKeys.projetos.matrizPriorizacao(projetoId),
        endpoint: API_ENDPOINTS.projetos.matrizPriorizacao(projetoId),
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
        enabled: !!projetoId,
    });

    const itens = useMemo(() => mapMatrizToItens(matrizData), [matrizData]);

    const resumo = useMemo(() => {
        const alta = matrizData?.do_now?.total ?? 0;
        const media =
            (matrizData?.schedule?.total ?? 0) + (matrizData?.delegate?.total ?? 0);
        const baixa = matrizData?.delete?.total ?? 0;
        return {
            total: matrizData?.total ?? itens.length,
            alta_prioridade: alta,
            media_prioridade: media,
            baixa_prioridade: baixa,
        };
    }, [matrizData, itens.length]);

    const columns: ColumnsType<ItemPriorizacao> = [
        {
            title: 'Tarefa',
            dataIndex: 'nome',
            key: 'nome',
            sorter: (a, b) => String(a.nome ?? '').localeCompare(String(b.nome ?? ''), 'pt'),
            render: (nome: string) => <strong>{nome}</strong>,
        },
        {
            title: 'Prioridade',
            dataIndex: 'prioridadeApi',
            key: 'prioridadeApi',
            sorter: (a, b) =>
                String(a.prioridadeApi ?? '').localeCompare(String(b.prioridadeApi ?? ''), 'pt'),
            render: (prioridade: string) => <Tag>{prioridade}</Tag>,
        },
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            sorter: (a, b) => String(a.status ?? '').localeCompare(String(b.status ?? ''), 'pt'),
            render: (status: string) => <Tag>{status}</Tag>,
        },
        {
            title: 'Responsável',
            dataIndex: 'responsavel',
            key: 'responsavel',
            sorter: (a, b) =>
                String(a.responsavel ?? '').localeCompare(String(b.responsavel ?? ''), 'pt'),
        },
        {
            title: 'Vencimento',
            dataIndex: 'vencimento',
            key: 'vencimento',
            sorter: (a, b) =>
                String(a.vencimento ?? '').localeCompare(String(b.vencimento ?? ''), 'pt'),
        },
        {
            title: 'Quadrante',
            dataIndex: 'quadranteApi',
            key: 'quadrante',
            sorter: (a, b) =>
                String(a.quadranteApi ?? '').localeCompare(String(b.quadranteApi ?? ''), 'pt'),
            render: (key: QuadranteApi) => {
                const meta = QUADRANTE_MAP[key];
                return <Tag color={meta?.color}>{meta?.label ?? key}</Tag>;
            },
        },
    ];

    const errorMessage =
        (error as { message?: string } | null)?.message ||
        'Não foi possível carregar a matriz. Tente novamente em instantes.';

    const headerAction = (
        <Space wrap size={8} align="center">
            <Tooltip title="Recarregar classificação Eisenhower desta sprint/projeto">
                <span style={{ display: 'inline-block' }}>
                    <ButtonHeaderIcon
                        icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                        title="Atualizar"
                        aria-label="Atualizar matriz de priorização"
                        onClick={() => void refetch()}
                        className={btnHeaderStyles.btnHeaderIcon}
                    />
                </span>
            </Tooltip>
        </Space>
    );

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Matriz de Priorização"
            showPageTitleIcon={false}
            titleSection="Matriz de Priorização"
            breadcrumbItems={[
                { title: 'PROJETO', path: `/projetos/${projetoId}` },
                { title: 'Planejamento' },
                { title: 'Priorização' },
                { title: 'Matriz' },
            ]}
            headerAction={headerAction}
        >
            {isLoading && !matrizData ? (
                <ContentCard>
                    <div style={{ textAlign: 'center', padding: 48 }}>
                        <Text type="secondary">Carregando matriz de priorização…</Text>
                    </div>
                </ContentCard>
            ) : null}

            {isError ? (
                <Alert
                    message="Erro ao carregar matriz de priorização"
                    description={errorMessage}
                    type="error"
                    showIcon
                    action={
                        <Space wrap>
                            <Button size="small" type="primary" onClick={() => void refetch()}>
                                Tentar novamente
                            </Button>
                            <Button
                                size="small"
                                onClick={() => router.push(`/projetos/${projetoId}/planejamento/backlog`)}
                            >
                                Ir ao backlog
                            </Button>
                        </Space>
                    }
                    style={{ marginBottom: 16 }}
                />
            ) : null}

            {!isError && matrizData ? (
                <>
                    <OperativeRouteHint
                        message="Priorização objetiva (Eisenhower)"
                        description={
                            'O quadrante "Fazer primeiro" junta o importante e urgente; "Agendar" guarda o importante sem urgência; "Delegar" trata urgência sem importância; "Eliminar / evitar" tira do foco o que não agrega. Compare com o backlog antes de comprometer a sprint.'
                        }
                    >
                        <Space wrap>
                            <Button
                                type="primary"
                                onClick={() =>
                                    router.push(`/projetos/${projetoId}/planejamento/backlog`)
                                }
                            >
                                Abrir backlog
                            </Button>
                            <Button
                                onClick={() =>
                                    router.push(`/projetos/${projetoId}/planejamento/sprints`)
                                }
                            >
                                Ver sprints
                            </Button>
                        </Space>
                    </OperativeRouteHint>

                    <ContentCard
                        title="Critérios e rastreabilidade"
                        style={{ marginBottom: 24 }}
                        headerActions={
                            <Button
                                type="primary"
                                ghost
                                size="small"
                                icon={<Copy size={ICON_SIZE_MD} aria-hidden />}
                                onClick={() => {
                                    const texto = [
                                        'Decisão de priorização — matriz Eisenhower',
                                        `Data: ${new Date().toLocaleString('pt-BR')}`,
                                        '',
                                        'Quadrantes:',
                                        `- Fazer primeiro (importante + urgente): ${matrizData.do_now?.total ?? 0}`,
                                        `- Agendar (importante, não urgente): ${matrizData.schedule?.total ?? 0}`,
                                        `- Delegar (urgente, não importante): ${matrizData.delegate?.total ?? 0}`,
                                        `- Eliminar / evitar: ${matrizData.delete?.total ?? 0}`,
                                        '',
                                        'Itens no topo (fazer primeiro):',
                                        ...(matrizData.do_now?.tarefas ?? [])
                                            .slice(0, 5)
                                            .map(
                                                (x, i) =>
                                                    `${i + 1}. ${x.titulo}${x.prioridade ? ` [${x.prioridade}]` : ''}`,
                                            ),
                                        '',
                                        'Justificativa / notas:',
                                    ].join('\n');
                                    void navigator.clipboard.writeText(texto);
                                    message.success('Modelo de decisão copiado.');
                                }}
                            >
                                Copiar modelo de decisão
                            </Button>
                        }
                    >
                        <Descriptions column={1} size="small" bordered>
                            <Descriptions.Item label="Urgente">
                                Vence em até 3 dias, atrasada, ou prioridade crítica/alta sem data.
                            </Descriptions.Item>
                            <Descriptions.Item label="Importante">
                                Prioridade crítica/alta ou tipo bug/feature/refatoração.
                            </Descriptions.Item>
                            <Descriptions.Item label="Quadrantes">
                                Classificação automática pela API a partir das tarefas do projeto.
                            </Descriptions.Item>
                        </Descriptions>
                        <Paragraph type="secondary" style={{ marginTop: 12, marginBottom: 0 }}>
                            Use &quot;Copiar modelo de decisão&quot; para colar em reunião ou ata; complete a
                            seção de justificativa antes de encaminhar ao backlog.
                        </Paragraph>
                    </ContentCard>

                    <MetricsGrid columns={4} style={{ marginBottom: 24 }}>
                        <MetricCard
                            icon={<List size={ICON_SIZE_MD} aria-hidden />}
                            label="Total de tarefas"
                            value={resumo.total}
                            variant="projetos"
                        />
                        <MetricCard
                            icon={<AlertCircle size={ICON_SIZE_MD} aria-hidden />}
                            label="Fazer primeiro"
                            value={resumo.alta_prioridade}
                            variant="emAndamento"
                        />
                        <MetricCard
                            icon={<Info size={ICON_SIZE_MD} aria-hidden />}
                            label="Agendar / Delegar"
                            value={resumo.media_prioridade}
                            variant="planejamento"
                        />
                        <MetricCard
                            icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                            label="Eliminar / evitar"
                            value={resumo.baixa_prioridade}
                            variant="concluidos"
                        />
                    </MetricsGrid>

                    <ContentCard title="Tarefas classificadas">
                        <Table
                            columns={columns}
                            dataSource={itens}
                            loading={isLoading}
                            rowKey="id"
                            pagination={{ pageSize: 20, showSizeChanger: true }}
                            locale={{ emptyText: 'Nenhuma tarefa classificada neste projeto.' }}
                        />
                    </ContentCard>
                </>
            ) : null}
        </ProjetoLayout>
    );
}