'use client';

/**
 * Calendário de sprints de todas as superfícies.
 *
 * @route /projetos/[id]/produto/sprints/calendario
 */

import { ArrowLeft, Calendar as CalendarIcon } from 'lucide-react';
import Link from 'next/link';
import React, { useMemo } from 'react';
import { useParams } from 'next/navigation';
import { Badge, Button, Calendar, Card, Space, Spin, Tag, Typography } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';

type CalendarioEvento = {
    id: number;
    nome: string;
    data_inicio?: string;
    data_fim?: string;
    codigo_superficie?: string | null;
    projeto_id: number;
    status?: string;
};

type SprintsApiResponse = {
    data: { calendario: CalendarioEvento[] };
};

export function ProjetoProdutoSprintsCalendarioScreen() {
    const params = useParams();
    const projetoId = params?.id as string;

    const { data, isLoading } = useQueryCache<SprintsApiResponse>({
        queryKey: queryKeys.projetos.portfolioSprintsLegacy(projetoId),
        endpoint: API_ENDPOINTS.projetos.portfolioSprints(projetoId),
        enabled: Boolean(projetoId),
    });

    const eventos = data?.data?.calendario ?? [];

    const eventosPorDia = useMemo(() => {
        const map = new Map<string, CalendarioEvento[]>();
        for (const ev of eventos) {
            if (!ev.data_inicio) continue;
            const inicio = dayjs(ev.data_inicio);
            const fim = ev.data_fim ? dayjs(ev.data_fim) : inicio;
            let cursor = inicio.startOf('day');
            const end = fim.startOf('day');
            while (cursor.isBefore(end) || cursor.isSame(end, 'day')) {
                const key = cursor.format('YYYY-MM-DD');
                const list = map.get(key) ?? [];
                list.push(ev);
                map.set(key, list);
                cursor = cursor.add(1, 'day');
            }
        }
        return map;
    }, [eventos]);

    const dateCellRender = (value: Dayjs) => {
        const key = value.format('YYYY-MM-DD');
        const doDia = eventosPorDia.get(key) ?? [];
        if (doDia.length === 0) return null;

        return (
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {doDia.slice(0, 3).map((ev) => (
                    <li key={`${ev.id}-${key}`}>
                        <Badge
                            status="processing"
                            text={
                                <Typography.Text ellipsis style={{ fontSize: 11 }}>
                                    {ev.codigo_superficie ? `[${ev.codigo_superficie}] ` : ''}
                                    {ev.nome}
                                </Typography.Text>
                            }
                        />
                    </li>
                ))}
                {doDia.length > 3 ? (
                    <li>
                        <Typography.Text type="secondary" style={{ fontSize: 11 }}>
                            +{doDia.length - 3} mais
                        </Typography.Text>
                    </li>
                ) : null}
            </ul>
        );
    };

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Calendário de sprints"
            titleSection="Calendário de sprints"
            headerAction={
                <Link href={`/projetos/${projetoId}/produto/sprints`}>
                    <Button icon={<ArrowLeft size={16} aria-hidden />}>Matriz</Button>
                </Link>
            }
        >
            {isLoading ? (
                <Spin />
            ) : (
                <Card>
                    <Space style={{ marginBottom: 16 }}>
                        <CalendarIcon size={18} aria-hidden />
                        <Typography.Text type="secondary">
                            {eventos.length} sprint(s) nas superfícies visíveis
                        </Typography.Text>
                    </Space>
                    <Calendar fullscreen={false} cellRender={dateCellRender} />
                    <div style={{ marginTop: 16 }}>
                        <Typography.Title level={5}>Próximos eventos</Typography.Title>
                        {eventos.slice(0, 8).map((ev) => (
                            <div key={ev.id} style={{ marginBottom: 8 }}>
                                <Tag>{ev.codigo_superficie ?? '—'}</Tag>
                                <Link href={`/projetos/${ev.projeto_id}/planejamento/sprints`}>
                                    {ev.nome}
                                </Link>
                                <Typography.Text type="secondary">
                                    {' '}
                                    — {ev.data_inicio} → {ev.data_fim ?? '?'}
                                </Typography.Text>
                            </div>
                        ))}
                    </div>
                </Card>
            )}
        </ProjetoLayout>
    );
}