'use client';

import React from 'react';
import Link from 'next/link';
import { Alert, List, Space, Typography, Button, Divider, Steps } from 'antd';
import { CheckCircle2, Link as LinkIcon, TriangleAlert, Wrench } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import ContentCard from '@/components/layouts/ContentCard/ContentCard';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';

export interface ProjetoEmBreveQuickLink {
    label: string;
    href: string;
}

export interface ProjetoEmBreveChecklistItem {
    label: string;
    hint?: string;
}

export interface ProjetoEmBreveOperativeHint {
    message: string;
    description: string;
    type?: 'info' | 'success' | 'warning';
}

/** Etapa de referência só-leitura (ex.: pipeline de submissão às lojas). */
export interface ProjetoEmBreveProcessStep {
    title: string;
    description?: string;
}

interface ProjetoEmBreveContentProps {
    title: string;
    description?: string;
    /** Destaque operacional alinhado a rotas densas (previsibilidade, decisão). */
    operativeHint?: ProjetoEmBreveOperativeHint;
    /** Sequência de etapas esperadas (governança / status por fase). */
    processSteps?: ProjetoEmBreveProcessStep[];
    /** Boas práticas / critérios de prontidão até a funcionalidade estar disponível */
    checklist?: ProjetoEmBreveChecklistItem[];
    /** Riscos ou pontos de governança a considerar */
    risks?: string[];
    /** Atalhos para rotas do mesmo projeto */
    quickLinks?: ProjetoEmBreveQuickLink[];
}

/**
 * Placeholder "Em breve" com orientação operacional (checklist, riscos, continuidade).
 */
export function ProjetoEmBreveContent({
    title,
    description,
    operativeHint,
    processSteps,
    checklist,
    risks,
    quickLinks,
}: ProjetoEmBreveContentProps) {
    return (
        <>
            {operativeHint && (
                <OperativeRouteHint
                    message={operativeHint.message}
                    description={operativeHint.description}
                    type={operativeHint.type ?? 'info'}
                />
            )}
            <ContentCard>
            <div style={{ textAlign: 'center', padding: '32px 16px 16px' }}>
                <div
                    style={{
                        fontSize: '3rem',
                        color: '#d9d9d9',
                        marginBottom: '16px',
                    }}
                >
                    {/* `display: inline-block` para o ícone respeitar o `textAlign: center`
                        do bloco (regra global põe `svg { display: block }`). */}
                    <Wrench
                        size={48}
                        strokeWidth={1.5}
                        aria-hidden
                        style={{ color: '#d9d9d9', display: 'inline-block' }}
                    />
                </div>
                <Typography.Title level={3} style={{ marginBottom: 8, color: '#2c3e50' }}>
                    {title}
                </Typography.Title>
                {description && (
                    <Typography.Paragraph
                        style={{ fontSize: '1rem', color: '#7f8c8d', maxWidth: 560, margin: '0 auto' }}
                    >
                        {description}
                    </Typography.Paragraph>
                )}
                <Typography.Text type="secondary" style={{ display: 'block', marginTop: 16 }}>
                    Esta seção ainda não tem formulário dedicado; use o guia abaixo para não perder
                    critérios de prontidão.
                </Typography.Text>
            </div>

            {processSteps && processSteps.length > 0 && (
                <>
                    <Divider orientation="left">Etapas de referência (governança)</Divider>
                    <Steps
                        direction="vertical"
                        size="small"
                        items={processSteps.map((s) => ({
                            title: s.title,
                            description: s.description,
                        }))}
                        style={{ marginBottom: 8 }}
                    />
                </>
            )}

            {checklist && checklist.length > 0 && (
                <>
                    <Divider orientation="left">Checklist sugerido</Divider>
                    <List
                        dataSource={checklist}
                        renderItem={(item) => (
                            <List.Item>
                                <Space align="start">
                                    <CheckCircle2 size={ICON_SIZE_MD} style={{ color: '#52c41a', marginTop: 4 }} aria-hidden />
                                    <div>
                                        <Typography.Text strong>{item.label}</Typography.Text>
                                        {item.hint && (
                                            <Typography.Paragraph
                                                type="secondary"
                                                style={{ marginBottom: 0, marginTop: 4 }}
                                            >
                                                {item.hint}
                                            </Typography.Paragraph>
                                        )}
                                    </div>
                                </Space>
                            </List.Item>
                        )}
                    />
                </>
            )}

            {risks && risks.length > 0 && (
                <Alert
                    type="warning"
                    showIcon
                    icon={<TriangleAlert size={ICON_SIZE_MD} aria-hidden />}
                    message="Riscos e atenção"
                    description={
                        // `listStyleType` explícito: o reset global do projeto aplica
                        // `list-style: none` e sem marcador os riscos leem-se como um bloco corrido.
                        <ul style={{ marginBottom: 0, paddingLeft: 20, listStyleType: 'disc' }}>
                            {risks.map((r: any) => (
                                <li key={r}>{r}</li>
                            ))}
                        </ul>
                    }
                    style={{ marginTop: 16 }}
                />
            )}

            {quickLinks && quickLinks.length > 0 && (
                <>
                    <Divider orientation="left">Continuidade no projeto</Divider>
                    <Space wrap>
                        {quickLinks.map((l) => (
                            <Link key={l.href} href={l.href}>
                                <Button type="primary" ghost size="small" icon={<LinkIcon size={ICON_SIZE_MD} aria-hidden />}>
                                    {l.label}
                                </Button>
                            </Link>
                        ))}
                    </Space>
                </>
            )}
        </ContentCard>
        </>
    );
}