'use client';


/**
 * @route /projetos/[id]/desenvolvimento/atividades
 */

import { ChevronLeft, History, MessageCircle } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Button, Tabs, Space } from 'antd';
import { CommentList, CommentForm } from '@/components/comments';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';

export default function ProjetoAtividadesPage() {
    const params = useParams();
    const router = useRouter();
    const id = params?.id as string;
    const [refreshKey, setRefreshKey] = useState(0);

    const handleCommentAdded = () => {
        setRefreshKey((prev) => prev + 1);
    };

    const handleCommentUpdated = () => {
        setRefreshKey((prev) => prev + 1);
    };

    const handleCommentDeleted = () => {
        setRefreshKey((prev) => prev + 1);
    };

    const endpoint = API_ENDPOINTS.projetos.comentarios.index(id);

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Atividades"
            showPageTitleIcon={false}
            titleSection="Atividades"
            headerAction={
                <Button onClick={() => router.push(`/projetos/${id}`)}>
                    <ChevronLeft size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                    Voltar
                </Button>
            }
        >
            <OperativeRouteHint
                message="Visibilidade de progresso"
                description="Publique decisões no aba Comentários; use Histórico para rever a linha do tempo sem misturar novas entradas."
            >
                <Space wrap>
                    <Button type="primary" onClick={() => router.push(`/projetos/${id}/kanban`)}>
                        Ver Kanban
                    </Button>
                    <Button onClick={() => router.push(`/projetos/${id}/desenvolvimento/dashboard`)}>
                        Dashboard desenvolvimento
                    </Button>
                </Space>
            </OperativeRouteHint>

            <ContentCard>
                <Tabs
                    defaultActiveKey="comentarios"
                    items={[
                        {
                            key: 'comentarios',
                            label: (
                                <span>
                                    <MessageCircle size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                                    Comentários
                                </span>
                            ),
                            children: (
                                <div>
                                    <CommentForm
                                        projetoId={Number(id)}
                                        endpoint={endpoint}
                                        onSuccess={handleCommentAdded}
                                    />
                                    <CommentList
                                        key={refreshKey}
                                        projetoId={Number(id)}
                                        endpoint={endpoint}
                                        onCommentAdded={handleCommentAdded}
                                        onCommentUpdated={handleCommentUpdated}
                                        onCommentDeleted={handleCommentDeleted}
                                    />
                                </div>
                            )},
                        {
                            key: 'historico',
                            label: (
                                <span>
                                    <History size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                                    Histórico
                                </span>
                            ),
                            children: (
                                <div>
                                    <CommentList
                                        key={refreshKey}
                                        projetoId={Number(id)}
                                        endpoint={endpoint}
                                        onCommentAdded={handleCommentAdded}
                                        onCommentUpdated={handleCommentUpdated}
                                        onCommentDeleted={handleCommentDeleted}
                                    />
                                </div>
                            )},
                    ]}
                />
            </ContentCard>
        </ProjetoLayout>
    );
}