'use client';

import React from 'react';
import { Search } from 'lucide-react';
import { Row, Col, Input, Button, Select } from 'antd';
import { ICON_SIZE_MD } from '@/components/icons';
import FilterCard from '@/components/layouts/FilterCard';
import { parametrosCatalogSelectBindings } from '@/hooks/useParametrosCatalogSelect';
import type { SitemapCrawlerFormValues } from '../types';

export interface SitemapCrawlerFormProps {
    values: SitemapCrawlerFormValues;
    onChange: (patch: Partial<SitemapCrawlerFormValues>) => void;
    onCrawl: () => void;
    loading?: boolean;
    projetoOptions?: { label: string; value: number }[];
    projetosLoading?: boolean;
    projetosError?: boolean;
    onRetryProjetos?: () => void;
    showProjetoSelect?: boolean;
    crawlLabel?: string;
    urlTestId?: string;
    crawlTestId?: string;
}

export function SitemapCrawlerForm({
    values,
    onChange,
    onCrawl,
    loading = false,
    projetoOptions = [],
    projetosLoading = false,
    projetosError = false,
    onRetryProjetos,
    showProjetoSelect = true,
    crawlLabel = 'Gerar sitemap',
    urlTestId = 'sitemap-url-input',
    crawlTestId = 'sitemap-analyze',
}: SitemapCrawlerFormProps) {
    const projetosBindings = parametrosCatalogSelectBindings({
        isLoading: projetosLoading,
        isError: projetosError,
        refetch: onRetryProjetos ?? (() => undefined),
        error: projetosError ? new Error('catalog') : null,
    });

    return (
        <FilterCard style={{ marginBottom: 24 }}>
            <Row gutter={[16, 16]}>
                <Col xs={24} lg={showProjetoSelect ? 14 : 18}>
                    <Input
                        data-testid={urlTestId}
                        placeholder="Digite a URL do site (ex.: https://example.com)"
                        value={values.url}
                        onChange={(e) => onChange({ url: e.target.value })}
                        onPressEnter={onCrawl}
                        prefix={<Search size={ICON_SIZE_MD} aria-hidden />}
                        size="large"
                        aria-label="URL do site para gerar sitemap"
                    />
                </Col>
                {showProjetoSelect ? (
                    <Col xs={24} sm={12} lg={6}>
                        <Select
                            data-testid="sitemap-projeto"
                            allowClear
                            placeholder="Projeto (opcional)"
                            value={values.projetoId}
                            onChange={(v) => onChange({ projetoId: v ?? undefined })}
                            options={projetoOptions}
                            size="large"
                            style={{ width: '100%' }}
                            optionFilterProp="label"
                            {...projetosBindings}
                        />
                    </Col>
                ) : null}
                <Col xs={24} sm={12} lg={showProjetoSelect ? 4 : 6}>
                    <Button
                        data-testid={crawlTestId}
                        type="primary"
                        icon={<Search size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />}
                        onClick={onCrawl}
                        loading={loading}
                        size="large"
                        block
                    >
                        {crawlLabel}
                    </Button>
                </Col>
            </Row>
        </FilterCard>
    );
}