'use client';

import { Archive, Copy, Eye, ListChecks, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { ModalOpcoesBase, type ModalOpcaoAction } from '@/components/ModalOpcoesBase';
import type { PaginaWebsite } from '@/types/projeto';

export interface ModalOpcoesPaginaSiteProps {
    open: boolean;
    onClose: () => void;
    item: PaginaWebsite | null;
    onVerDetalhes: (item: PaginaWebsite) => void;
    onAbrirKanban?: () => void;
    onDuplicar?: (item: PaginaWebsite) => void;
    onArquivar?: (item: PaginaWebsite) => void;
    onExcluir?: (item: PaginaWebsite) => void;
}

const STATUS_LABELS: Record<string, string> = {
    rascunho: 'Rascunho',
    em_producao: 'Em produção',
    em_revisao: 'Em revisão',
    aprovado: 'Aprovado',
    publicado: 'Publicado',
    arquivado: 'Arquivado'};

const TIPO_LABELS: Record<string, string> = {
    institucional: 'Institucional',
    landing: 'Landing Page',
    legal: 'Legal / Políticas',
    blog: 'Blog',
    produto: 'Produto',
    campanha: 'Campanha',
    outro: 'Outro'};

export function ModalOpcoesPaginaSite({
    open,
    onClose,
    item,
    onVerDetalhes,
    onAbrirKanban,
    onDuplicar,
    onArquivar,
    onExcluir}: ModalOpcoesPaginaSiteProps) {
    if (!item) return null;

    const subtitle = [item.titulo || item.slug, item.slug, TIPO_LABELS[item.tipo] ?? item.tipo]
        .filter(Boolean)
        .join(' · ');
    const responsavel =
        item.responsavel_atual?.nome ??
        item.responsaveis?.dev?.nome ??
        item.responsaveis?.conteudo?.nome ??
        '—';
    const statusLabel = STATUS_LABELS[item.status] ?? item.status;

    const actions: ModalOpcaoAction[] = [
        {
            key: 'detalhes',
            label: 'Ver detalhes',
            icon: <Eye size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onVerDetalhes(item);
            },
            primary: true},
    ];
    if (onAbrirKanban) {
        actions.push({
            key: 'kanban',
            label: 'Abrir tarefas (Kanban)',
            icon: <ListChecks size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onAbrirKanban();
            }});
    }
    if (onDuplicar) {
        actions.push({
            key: 'duplicar',
            label: 'Duplicar',
            icon: <Copy size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onDuplicar(item);
            }});
    }
    if (item.status !== 'arquivado' && onArquivar) {
        actions.push({
            key: 'arquivar',
            label: 'Arquivar',
            icon: <Archive size={ICON_SIZE_MD} />,
            onClick: () => {
                onClose();
                onArquivar(item);
            }});
    }
    if (onExcluir) {
        actions.push({
            key: 'excluir',
            label: 'Excluir',
            icon: <Trash2 size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onExcluir(item);
            },
            danger: true});
    }

    return (
        <ModalOpcoesBase
            open={open}
            onClose={onClose}
            title="Opções da página"
            subtitle={subtitle}
            actions={actions}
            width={400}
            data-testid="projeto-software-pagina-site-opcoes-modal"
            aria-label="Opções da página do site"
        >
            <div style={{ marginBottom: 0, fontSize: 14, color: '#7f8c8d' }}>
                <div style={{ marginBottom: 4 }}>
                    <strong>Status:</strong> {statusLabel}
                </div>
                {responsavel !== '—' && (
                    <div style={{ marginBottom: 4 }}>
                        <strong>Responsável:</strong> {responsavel}
                    </div>
                )}
                {Array.isArray(item.tags) && item.tags.length > 0 && (
                    <div>
                        <strong>Tags:</strong> {item.tags.slice(0, 5).join(', ')}
                        {item.tags.length > 5 && ` +${item.tags.length - 5}`}
                    </div>
                )}
            </div>
        </ModalOpcoesBase>
    );
}