'use client';

/**
 * Kanban por projeto (`/projetos/[id]/kanban`). FRONT-S2-02.co — extraído de
 * `app/(dashboard)/projetos/[id]/kanban/page.tsx`.
 */

import { Filter, Plus } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Alert, Badge, Button, Col, Input, Modal, Row, Select, Space, Tooltip, Typography } from 'antd';
import { useRouter, useParams } from 'next/navigation';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { useIsMobile } from '@/hooks/useIsMobile';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import {
    DndContext,
    DragOverlay,
    closestCorners,
    KeyboardSensor,
    PointerSensor,
    useSensor,
    useSensors,
    type DragStartEvent,
    type DragEndEvent} from '@dnd-kit/core';
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { FormGroup } from '@/components/form';
import { ProjetoKanbanColuna } from './ProjetoKanbanColuna';
import type { KanbanData, TarefaKanban } from './types';
import { normalizeProjetoKanbanData } from './normalizeProjetoKanbanData';
import { minhasTarefasTarefaDetalhePath } from '@/lib/routes/desenvolvimentoTarefasNav';
import { FiltrosModalFooterPadrao } from '@/components/listings';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { routeProjetoId } from '@/features/projetos/feira-list';

const { Search } = Input;

const KANBAN_FILTERS_VAZIO = {
    busca: '',
    responsavel_id: '',
    prioridade: '',
    categoria: ''} as const;

type KanbanFiltersState = {
    busca: string;
    responsavel_id: string;
    prioridade: string;
    categoria: string;
};
const { Text } = Typography;


export function ProjetoKanbanScreen() {
    const router = useRouter();
    const params = useParams();
    const projetoId = routeProjetoId(params);
    const isMobile = useIsMobile();
    const [filters, setFilters] = useState<KanbanFiltersState>({ ...KANBAN_FILTERS_VAZIO });
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftFilters, setDraftFilters] = useState<KanbanFiltersState>({ ...KANBAN_FILTERS_VAZIO });
    const filtrosModalLayout = useResponsiveModalProps();
    const [activeId, setActiveId] = useState<string | null>(null);
    /** Mobile: coluna ativa (padrão app — uma coluna + seletor). */
    const [mobileColunaId, setMobileColunaId] = useState<string | null>(null);

    const sensors = useSensors(
        useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates})
    );

    const {
        data: rawKanbanData,
        isLoading,
        refetch} = useQueryCache<KanbanData>({
        queryKey: queryKeys.projetos.kanbanBoard(projetoId, filters),
        endpoint: API_ENDPOINTS.projetos.kanban(projetoId),
        params: filters,
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000});

    const kanbanData = useMemo(
        () => normalizeProjetoKanbanData(rawKanbanData),
        [rawKanbanData],
    );

    const colunas = kanbanData?.colunas ?? [];
    const colunaIdsKey = colunas.map((c) => c.id).join(',');

    useEffect(() => {
        if (!isMobile || !colunas.length) return;
        setMobileColunaId((prev) => {
            if (prev && colunas.some((c) => c.id === prev)) return prev;
            return colunas[0].id;
        });
        // colunaIdsKey estabiliza a dependência (evita loop por nova referência de array)
        // eslint-disable-next-line react-hooks/exhaustive-deps -- colunas derivado de colunaIdsKey
    }, [isMobile, colunaIdsKey]);

    const colunaMobileAtiva = useMemo(() => {
        if (!isMobile || !mobileColunaId) return null;
        return colunas.find((c) => c.id === mobileColunaId) ?? colunas[0] ?? null;
    }, [isMobile, mobileColunaId, colunas]);

    const handleDragStart = (event: DragStartEvent) => {
        setActiveId(event.active.id.toString());
    };

    const handleDragEnd = (event: DragEndEvent) => {
        const { active, over } = event;
        setActiveId(null);

        if (!over || !kanbanData) return;

        const activeIdStr = active.id.toString();
        const overId = over.id.toString();

        let tarefa: TarefaKanban | undefined;
        let colunaAtual: string | undefined;

        kanbanData.colunas.forEach((coluna) => {
            const found = coluna.tarefas.find((t) => t.id.toString() === activeIdStr);
            if (found) {
                tarefa = found;
                colunaAtual = coluna.id;
            }
        });

        if (!tarefa) return;

        const novaColuna = kanbanData.colunas.find((col) => col.id === overId);

        if (novaColuna && novaColuna.id !== colunaAtual) {
            // TODO: Implementar mutation para mover tarefa
            refetch();
        }
    };

    const handleEdit = (t: TarefaKanban) => {
        router.push(minhasTarefasTarefaDetalhePath(t.id));
    };

    const activeTarefa = activeId
        ? kanbanData?.colunas
              .flatMap((col) => col.tarefas)
              .find((t) => t.id.toString() === activeId)
        : null;

    const tarefasPrioridadeCount = useMemo(() => {
        const todas = kanbanData?.colunas.flatMap((c) => c.tarefas) ?? [];
        return todas.filter((t) => t.prioridade === 'alta' || t.prioridade === 'critica').length;
    }, [kanbanData?.colunas]);

    const colunaMaisCarregada = useMemo(() => {
        const cols = kanbanData?.colunas ?? [];
        if (!cols.length) return null;
        return cols.reduce((a, b) => (a.tarefas.length >= b.tarefas.length ? a : b));
    }, [kanbanData?.colunas]);

    const filtrosAtivosCount = useMemo(() => {
        let n = 0;
        if (filters.busca.trim()) n += 1;
        if (filters.responsavel_id) n += 1;
        if (filters.prioridade) n += 1;
        if (filters.categoria) n += 1;
        return n;
    }, [filters.busca, filters.responsavel_id, filters.prioridade, filters.categoria]);
    const filtrosComAlgumAtivo = filtrosAtivosCount > 0;

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        const b = filters.busca.trim();
        if (b) partes.push(`Pesquisa: "${b}"`);
        if (filters.responsavel_id && kanbanData?.responsaveis) {
            const nome = kanbanData.responsaveis.find((r: any) => r.id.toString() === filters.responsavel_id)?.nome;
            partes.push(nome ? `Responsável: ${nome}` : `Responsável: #${filters.responsavel_id}`);
        } else if (filters.responsavel_id) {
            partes.push(`Responsável: #${filters.responsavel_id}`);
        }
        if (filters.prioridade) {
            const map: Record<string, string> = { alta: 'Alta', media: 'Média', baixa: 'Baixa' };
            partes.push(`Prioridade: ${map[filters.prioridade] ?? filters.prioridade}`);
        }
        if (filters.categoria) partes.push(`Categoria: ${filters.categoria}`);
        return partes.length ? partes.join(' · ') : '';
    }, [filters, kanbanData?.responsaveis]);

    const limparTodosFiltros = useCallback(() => {
        setFilters({ ...KANBAN_FILTERS_VAZIO });
        setDraftFilters({ ...KANBAN_FILTERS_VAZIO });
    }, []);

    const abrirModalFiltros = useCallback(() => {
        setDraftFilters({ ...filters });
        setFiltrosModalOpen(true);
    }, [filters]);

    const reporRascunhoFiltros = useCallback(() => {
        setDraftFilters({ ...KANBAN_FILTERS_VAZIO });
    }, []);

    const aplicarFiltrosModal = useCallback(() => {
        setFilters({ ...draftFilters });
        setFiltrosModalOpen(false);
    }, [draftFilters]);

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

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Quadro Kanban"
            pageIcon="columns"
            titleSection="Kanban"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: kanbanData?.projeto.nome || 'Projeto' },
                { title: 'Kanban' },
            ]}
            headerAction={
                <Space wrap size={8} align="center">
                    <Tooltip
                        title={
                            filtrosComAlgumAtivo
                                ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar busca, responsável, prioridade ou categoria`
                                : 'Definir busca, responsável, prioridade e categoria dos cartões'
                        }
                    >
                        <span style={{ display: 'inline-block' }}>
                        <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                            <ButtonHeaderIcon
                                data-testid="projeto-kanban-abrir-filtros"
                                icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                title={
                                    filtrosAtivosCount > 0
                                        ? `Filtros (${filtrosAtivosCount})`
                                        : 'Filtros'
                                }
                                aria-label="Abrir filtros do Kanban"
                                aria-expanded={filtrosModalOpen}
                                aria-haspopup="dialog"
                                onClick={abrirModalFiltros}
                                className={btnHeaderStyles.btnHeaderIcon}
                            />
                        </Badge>
                        </span>
                    </Tooltip>
                    <Tooltip title="Criar nova tarefa (formulário de criação)">
                        <span style={{ display: 'inline-block' }}>
                            <ButtonHeaderIcon
                                icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                title="Nova tarefa"
                                onClick={() => router.push('/minhas-tarefas/tarefas/create')}
                                variant="primary"
                            />
                        </span>
                    </Tooltip>
                </Space>
            }
        >
            <OperativeRouteHint
                type={tarefasPrioridadeCount > 0 || (colunaMaisCarregada?.tarefas.length ?? 0) > 8 ? 'warning' : 'info'}
                message="Fluidez do quadro"
                description={
                    isMobile
                        ? `No celular, escolha a coluna no seletor abaixo e abra o cartão para detalhar. Use Filtros no cabeçalho para focar.${
                              colunaMaisCarregada
                                  ? ` Gargalo provável: "${colunaMaisCarregada.titulo}" (${colunaMaisCarregada.tarefas.length} cartões).`
                                  : ''
                          }`
                        : tarefasPrioridadeCount > 0
                          ? `${tarefasPrioridadeCount} tarefa(s) com prioridade alta ou crítica — use Filtros no cabeçalho para focar o quadro; puxe primeiro para colunas à direita ou abra o cartão para desbloquear dependências.${
                                colunaMaisCarregada
                                    ? ` Gargalo provável: coluna "${colunaMaisCarregada.titulo}" com ${colunaMaisCarregada.tarefas.length} cartões — reduza WIP ou subdivida trabalho.`
                                    : ''
                            }`
                          : `Arraste cartões entre colunas para refletir o estado real; use Filtros no cabeçalho para responsável, prioridade ou categoria.${
                                colunaMaisCarregada && colunaMaisCarregada.tarefas.length > 5
                                    ? ` A coluna "${colunaMaisCarregada.titulo}" está mais carregada (${colunaMaisCarregada.tarefas.length} itens) — verifique bloqueios e limite de trabalho em progresso.`
                                    : ''
                            }`
                }
            />

            {isMobile && colunas.length > 0 ? (
                <div style={{ marginBottom: 12 }} data-testid="projeto-kanban-mobile-coluna-select">
                    <FormGroup label="Coluna">
                        <Select
                            style={{ width: '100%' }}
                            value={colunaMobileAtiva?.id}
                            onChange={(value) => setMobileColunaId(value)}
                            options={colunas.map((c) => ({
                                value: c.id,
                                label: `${c.titulo} (${c.tarefas?.length ?? 0})`,
                            }))}
                            aria-label="Selecionar coluna do Kanban"
                        />
                    </FormGroup>
                </div>
            ) : null}
            <Modal
                title="Filtrar cartões do Kanban"
                data-testid="projeto-kanban-filtros-modal"
                open={filtrosModalOpen}
                onCancel={() => setFiltrosModalOpen(false)}
                width={filtrosModalLayout.width ?? 720}
                centered={filtrosModalLayout.centered}
                styles={filtrosModalLayout.styles}
                footer={
                    <FiltrosModalFooterPadrao
                        onLimparTodos={reporRascunhoFiltros}
                        onFechar={() => setFiltrosModalOpen(false)}
                        showFiltrarPrimary
                        onFiltrar={aplicarFiltrosModal}
                        dataTestIdLimparTodos="projeto-kanban-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} sm={12} md={6}>
                        <FormGroup label="Buscar">
                            <Search
                                placeholder={'Buscar tarefas… — confirme com "Filtrar" ou Enter em "Pesquisar"'}
                                allowClear
                                value={draftFilters.busca}
                                onChange={(e) =>
                                    setDraftFilters((prev) => ({ ...prev, busca: e.target.value }))
                                }
                                onSearch={() => aplicarFiltrosModal()}
                                enterButton="Pesquisar"
                                style={{ width: '100%' }}
                                aria-label="Pesquisar tarefas no Kanban"
                            />
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <FormGroup label="Responsável">
                            <Select
                                placeholder="Todos"
                                allowClear
                                style={{ width: '100%' }}
                                value={draftFilters.responsavel_id || undefined}
                                onChange={(value) =>
                                    setDraftFilters((prev) => ({
                                        ...prev,
                                        responsavel_id: value ?? ''}))
                                }
                            >
                                {(kanbanData?.responsaveis ?? []).map((resp) => (
                                    <Select.Option key={resp.id} value={resp.id.toString()}>
                                        {resp.nome}
                                    </Select.Option>
                                ))}
                            </Select>
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <FormGroup label="Prioridade">
                            <Select
                                placeholder="Todas"
                                allowClear
                                style={{ width: '100%' }}
                                value={draftFilters.prioridade || undefined}
                                onChange={(value) =>
                                    setDraftFilters((prev) => ({
                                        ...prev,
                                        prioridade: value ?? ''}))
                                }
                            >
                                <Select.Option value="alta">Alta</Select.Option>
                                <Select.Option value="media">Média</Select.Option>
                                <Select.Option value="baixa">Baixa</Select.Option>
                            </Select>
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <FormGroup label="Categoria">
                            <Select
                                placeholder="Todas"
                                allowClear
                                style={{ width: '100%' }}
                                value={draftFilters.categoria || undefined}
                                onChange={(value) =>
                                    setDraftFilters((prev) => ({
                                        ...prev,
                                        categoria: value ?? ''}))
                                }
                            >
                                {(kanbanData?.categorias ?? []).map((cat) => (
                                    <Select.Option key={cat} value={cat}>
                                        {cat}
                                    </Select.Option>
                                ))}
                            </Select>
                        </FormGroup>
                    </Col>
                </Row>
            </Modal>

            {filtrosComAlgumAtivo ? (
                <Alert
                    type="info"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message={`Filtros aplicados (${filtrosAtivosCount})`}
                    description={
                        <>
                            {resumoFiltrosAplicados}
                            <Button type="link" onClick={limparTodosFiltros} style={{ paddingLeft: 8 }}>
                                Limpar filtros
                            </Button>
                        </>
                    }
                />
            ) : null}

            <DndContext
                sensors={sensors}
                collisionDetection={closestCorners}
                onDragStart={handleDragStart}
                onDragEnd={handleDragEnd}
            >
                <Row gutter={16} style={{ marginTop: filtrosComAlgumAtivo ? 0 : undefined }}>
                    {isMobile && colunaMobileAtiva ? (
                        <ProjetoKanbanColuna
                            key={colunaMobileAtiva.id}
                            id={colunaMobileAtiva.id}
                            titulo={colunaMobileAtiva.titulo}
                            tarefas={colunaMobileAtiva.tarefas ?? []}
                            onEdit={handleEdit}
                            fullWidth
                        />
                    ) : (
                        colunas.map((coluna) => (
                            <ProjetoKanbanColuna
                                key={coluna.id}
                                id={coluna.id}
                                titulo={coluna.titulo}
                                tarefas={coluna.tarefas ?? []}
                                onEdit={handleEdit}
                            />
                        ))
                    )}
                </Row>
                <DragOverlay>
                    {activeTarefa ? (
                        <div
                            style={{
                                background: 'white',
                                padding: '12px',
                                borderRadius: '8px',
                                border: '1px solid #e8e8e8',
                                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                                width: '280px',
                                opacity: 0.9,
                                transform: 'rotate(5deg)'}}
                        >
                            <Text strong>{activeTarefa.titulo}</Text>
                        </div>
                    ) : null}
                </DragOverlay>
            </DndContext>
        </ProjetoLayout>
    );
}