'use client';

import React, { useEffect } from 'react';
import { Alert, Button, Collapse, Empty, Space, Spin, Table, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import ContentCard from '@/components/layouts/ContentCard';
import { SitemapCrawlerForm } from '@/features/sitemap-crawler/components/SitemapCrawlerForm';
import { SitemapCrawlerReport } from '@/features/sitemap-crawler/components/SitemapCrawlerReport';
import { useSitemapCrawler } from '@/features/sitemap-crawler/hooks/useSitemapCrawler';
import { isSitemapCrawlPending } from '@/features/sitemap-crawler/utils/pollSitemapCrawlStatus';
import type { SitemapCrawlResult } from '@/features/sitemap-crawler/types';

const { Text } = Typography;

const DEMO_URL = 'https://example.com';

function formatAnalyzedAt(value?: string): string {
    if (!value) return '—';
    return new Date(value).toLocaleString('pt-BR');
}

export interface SitemapCrawlerScreenProps {
    initialProjetoId?: number;
    showProjetoSelect?: boolean;
    testIdPrefix?: string;
}

export function SitemapCrawlerScreen({
    initialProjetoId,
    showProjetoSelect = true,
    testIdPrefix = 'sitemap',
}: SitemapCrawlerScreenProps) {
    const {
        formValues,
        updateForm,
        crawl,
        applyDemoUrl,
        lastResult,
        setLastResult,
        errorMessage,
        clearError,
        isCrawling,
        projetoOptions,
        projetosQuery,
        historyQuery,
    } = useSitemapCrawler({ initialProjetoId });

    useEffect(() => {
        const items = historyQuery.data?.data;
        if (!items?.length || lastResult) return;
        const latest = items.find((item) => item.status === 'completed') ?? items[0];
        setLastResult(latest);
    }, [historyQuery.data?.data, lastResult, setLastResult]);

    const historyColumns: ColumnsType<SitemapCrawlResult> = [
        {
            title: 'Quando',
            dataIndex: 'analyzed_at',
            width: 200,
            render: (v: string | undefined) => formatAnalyzedAt(v),
        },
        { title: 'URL', dataIndex: 'url', ellipsis: true },
        {
            title: 'URLs',
            dataIndex: 'total_urls',
            width: 80,
            render: (v: number | undefined) => (v != null ? `${v}` : '—'),
        },
        {
            title: 'Estado',
            dataIndex: 'status',
            width: 110,
            render: (status: string | undefined) => status ?? '—',
        },
        {
            title: 'Erros',
            dataIndex: 'errors',
            width: 80,
            render: (errs: SitemapCrawlResult['errors']) => errs?.length ?? 0,
        },
    ];

    const hasCompletedResult = lastResult != null && lastResult.status === 'completed';

    const isPending = lastResult != null && isSitemapCrawlPending(lastResult.status);

    return (
        <div data-testid={`${testIdPrefix}-page`}>
            {errorMessage ? (
                <Alert
                    type="error"
                    message="Não foi possível gerar o sitemap"
                    description={errorMessage}
                    showIcon
                    closable
                    onClose={clearError}
                    style={{ marginBottom: 24 }}
                    data-testid={`${testIdPrefix}-error-alert`}
                />
            ) : null}

            <div data-testid={`${testIdPrefix}-filters`}>
                <SitemapCrawlerForm
                    values={formValues}
                    onChange={updateForm}
                    onCrawl={crawl}
                    loading={isCrawling}
                    projetoOptions={projetoOptions}
                    projetosLoading={projetosQuery.isLoading}
                    projetosError={projetosQuery.isError}
                    onRetryProjetos={() => void projetosQuery.refetch()}
                    showProjetoSelect={showProjetoSelect}
                    crawlLabel="Gerar sitemap"
                    urlTestId={`${testIdPrefix}-url-input`}
                    crawlTestId={`${testIdPrefix}-analyze`}
                />
            </div>

            {isCrawling ? (
                <ContentCard style={{ marginBottom: 24 }}>
                    <div
                        style={{ textAlign: 'center', padding: '48px 16px' }}
                        data-testid={`${testIdPrefix}-loading`}
                    >
                        <Spin size="large" />
                        <div style={{ marginTop: 16 }}>
                            <Text type="secondary">
                                {isPending
                                    ? 'Crawl em background — a varrer o site e gerar o sitemap…'
                                    : 'A varrer o site e gerar o sitemap… Isto pode demorar alguns segundos.'}
                            </Text>
                        </div>
                    </div>
                </ContentCard>
            ) : null}

            {!isCrawling && hasCompletedResult && lastResult ? (
                <>
                    <SitemapCrawlerReport result={lastResult} />
                    <Collapse
                        style={{ marginTop: 24 }}
                        items={[
                            {
                                key: 'history',
                                label: `Histórico de gerações (${historyQuery.data?.data?.length ?? 0})`,
                                children: (
                                    <Table<SitemapCrawlResult>
                                        size="small"
                                        rowKey={(row: any) =>
                                            `${row.id ?? row.url}-${row.analyzed_at ?? ''}`
                                        }
                                        dataSource={historyQuery.data?.data ?? []}
                                        columns={historyColumns}
                                        pagination={{ pageSize: 8 }}
                                        onRow={(record) => ({
                                            onClick: () => setLastResult(record),
                                            style: { cursor: 'pointer' },
                                        })}
                                    />
                                ),
                            },
                        ]}
                    />
                </>
            ) : null}

            {!isCrawling && !hasCompletedResult ? (
                <div data-testid={`${testIdPrefix}-empty-state`}>
                    <ContentCard style={{ width: '100%' }}>
                        <Empty
                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                            description={
                                <Space direction="vertical" size={4}>
                                    <Text>Nenhum sitemap gerado</Text>
                                    <Text type="secondary">
                                        Informe a URL de um site e clique em &quot;Gerar
                                        sitemap&quot; para descobrir as páginas internas e
                                        exportar o XML. Sites grandes podem ser processados em
                                        background.
                                    </Text>
                                </Space>
                            }
                        >
                            <Button
                                type="link"
                                onClick={applyDemoUrl}
                                data-testid={`${testIdPrefix}-demo-url`}
                            >
                                Experimentar {DEMO_URL}
                            </Button>
                        </Empty>
                    </ContentCard>
                </div>
            ) : null}
        </div>
    );
}