'use client';

import { Clock, FileText, User } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import {
    Card,
    Tag,
    Space,
} from 'antd';
import type { PaginaWebsite } from '@/types/projeto';
import { formatDate } from '@/lib/utils/export';

const STATUS_OPCOES: { value: string; label: string }[] = [
    { value: 'rascunho', label: 'Rascunho' },
    { value: 'em_producao', label: 'Em produção' },
    { value: 'em_revisao', label: 'Em revisão' },
    { value: 'aprovado', label: 'Aprovado' },
    { value: 'publicado', label: 'Publicado' },
    { value: 'arquivado', label: 'Arquivado' },
];

const TIPO_OPCOES: { value: string; label: string }[] = [
    { value: 'institucional', label: 'Institucional' },
    { value: 'landing', label: 'Landing Page' },
    { value: 'legal', label: 'Legal / Políticas' },
    { value: 'blog', label: 'Blog' },
    { value: 'produto', label: 'Produto' },
    { value: 'campanha', label: 'Campanha' },
    { value: 'outro', label: 'Outro' },
];

function getStatusColor(status: string): string {
    const map: Record<string, string> = {
        rascunho: 'default',
        em_producao: 'processing',
        em_revisao: 'warning',
        aprovado: 'cyan',
        publicado: 'success',
        arquivado: 'default'};
    return map[status] || 'default';
}

function getTipoColor(tipo: string): string {
    const map: Record<string, string> = {
        institucional: 'blue',
        landing: 'green',
        legal: 'orange',
        blog: 'purple',
        produto: 'geekblue',
        campanha: 'magenta',
        outro: 'default'};
    return map[tipo] || 'default';
}

export interface CardPaginaSiteProps {
    item: PaginaWebsite;
    onOpenOpcoes: (item: PaginaWebsite) => void;
}

export function CardPaginaSite({ item, onOpenOpcoes }: CardPaginaSiteProps) {
    const responsavel =
        item.responsavel_atual?.nome ??
        item.responsaveis?.dev?.nome ??
        item.responsaveis?.conteudo?.nome;

    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{
                borderLeftWidth: 6,
                borderLeftStyle: 'solid',
                borderLeftColor: '#1c84c6',
                marginBottom: 0,
                cursor: 'pointer'}}
            styles={{ body: { padding: '16px 20px' } }}
            onClick={() => onOpenOpcoes(item)}
        >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div
                    style={{
                        fontWeight: 700,
                        color: '#2c3e50',
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                        flexWrap: 'wrap'}}
                >
                    <FileText size={ICON_SIZE_MD} style={{ color: '#1c84c6' }} aria-hidden />
                    {item.titulo || item.slug || '—'}
                </div>
                <div style={{ fontSize: 12, color: '#666', fontFamily: 'monospace' }}>
                    {item.slug || '—'}
                </div>
                <Space size={[0, 6]} wrap>
                    <Tag color={getTipoColor(item.tipo)}>
                        {TIPO_OPCOES.find((o) => o.value === item.tipo)?.label ?? item.tipo}
                    </Tag>
                    <Tag color={getStatusColor(item.status)}>
                        {STATUS_OPCOES.find((o) => o.value === item.status)?.label ?? item.status}
                    </Tag>
                </Space>
                {responsavel && (
                    <div style={{ fontSize: 13, color: '#7f8c8d' }}>
                        <User size={ICON_SIZE_MD} style={{ marginRight: 6 }} aria-hidden />
                        {responsavel}
                    </div>
                )}
                {item.updated_at && (
                    <div style={{ fontSize: 12, color: '#95a5a6' }}>
                        <Clock size={ICON_SIZE_MD} style={{ marginRight: 6 }} aria-hidden />
                        {formatDate(item.updated_at, true)}
                    </div>
                )}
                {Array.isArray(item.tags) && item.tags.length > 0 && (
                    <Space size={[0, 4]} wrap>
                        {item.tags.slice(0, 3).map((t) => (
                            <Tag key={t} style={{ margin: 0 }}>
                                {t}
                            </Tag>
                        ))}
                        {item.tags.length > 3 && <Tag>+{item.tags.length - 3}</Tag>}
                    </Space>
                )}
            </div>
        </Card>
    );
}