/**
 * @fileoverview Página de Referências – briefing do projeto website
 *
 * Permite cadastrar N URLs de referência e observações sobre as referências.
 *
 * @route /projetos/[id]/software/referencias
 */

'use client';

import {
    ExternalLink,
    FileText,
    Layout,
    Link2,
    Plus,
    Save,
    Target,
    Trash2,
} from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { Button, Col, Form, Input, Row, Spin, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import { FormTextarea } from '@/components/form';
import { FormActions as FormActionsWrapper } from '@/components/form';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { Projeto } from '@/types';
import ContentCard from '@/components/layouts/ContentCard';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import styles from './page.module.scss';

const { Paragraph, Text } = Typography;

const MAX_OBS = 10000;

function tryOpenUrl(url: string): void {
    const trimmed = url.trim();
    if (!trimmed) return;
    try {
        const parsed = new URL(trimmed);
        window.open(parsed.href, '_blank', 'noopener,noreferrer');
    } catch {
        message.warning('Informe uma URL válida antes de abrir.');
    }
}

export default function ReferenciasPage() {
    const params = useParams();
    const id = params?.id as string;
    const [form] = Form.useForm();
    const [, setDirty] = useState(false);

    const { data: projetoResponse, isLoading } = useQueryCache<
        Projeto | { projeto?: Projeto; metricas?: unknown }
    >({
        queryKey: queryKeys.projetos.detail(id),
        endpoint: API_ENDPOINTS.projetos.show(id),
        enabled: !!id,
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
    });

    const projeto =
        projetoResponse && typeof projetoResponse === 'object' && 'projeto' in projetoResponse
            ? (projetoResponse as { projeto?: Projeto }).projeto
            : (projetoResponse as Projeto | undefined);

    const updateMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.update(id),
        method: 'PUT',
        invalidateQueries: [queryKeys.projetos.detail(id), queryKeys.projetos.lists()],
        onSuccess: () => {
            message.success('Referências salvas com sucesso!');
            setDirty(false);
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao salvar referências';
            message.error(errorMessage);
        },
    });

    useEffect(() => {
        if (projeto) {
            const urls = Array.isArray(projeto.referencias_urls) ? projeto.referencias_urls : [];
            form.setFieldsValue({
                referencias_urls: urls.length > 0 ? urls : [],
                referencias_observacoes: projeto.referencias_observacoes ?? '',
            });
        }
    }, [projeto, form]);

    const handleSubmit = (values: { referencias_urls?: string[]; referencias_observacoes?: string }) => {
        const urls = (values.referencias_urls ?? [])
            .map((u) => (typeof u === 'string' ? u.trim() : ''))
            .filter(Boolean);
        updateMutation.mutate({
            referencias_urls: urls.length > 0 ? urls : null,
            referencias_observacoes: values.referencias_observacoes?.trim() || null,
        });
    };

    const urlsWatch = Form.useWatch('referencias_urls', form) as string[] | undefined;

    if (isLoading && !projeto) {
        return (
            <ProjetoLayout
                projetoId={id}
                pageTitle="Referências"
                pageIcon="link"
                titleSection="Referências"
            >
                <div style={{ textAlign: 'center', padding: 50 }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    const initialUrls = Array.isArray(projeto?.referencias_urls) ? projeto.referencias_urls : [];
    const initialValues = {
        referencias_urls: initialUrls,
        referencias_observacoes: projeto?.referencias_observacoes ?? '',
    };

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Referências"
            pageIcon="link"
            titleSection="Referências"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: 'Referências' },
            ]}
        >
            <Row gutter={[16, 16]} className={styles.guidanceGrid}>
                <Col xs={24} md={8}>
                    <ContentCard title="Concorrência e mercado">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            Sites de concorrentes ou players do setor para comparar proposta de valor, estrutura de
                            páginas e mensagens-chave.
                        </Paragraph>
                    </ContentCard>
                </Col>
                <Col xs={24} md={8}>
                    <ContentCard title="Inspiração visual">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            Referências de layout, tipografia, cores e componentes que o cliente aprovou ou que
                            alinham com a identidade desejada.
                        </Paragraph>
                    </ContentCard>
                </Col>
                <Col xs={24} md={8}>
                    <ContentCard title="Contexto para a equipe">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            Use as observações para explicar o "porquê" de cada URL — evita interpretações divergentes
                            entre design, conteúdo e desenvolvimento.
                        </Paragraph>
                    </ContentCard>
                </Col>
            </Row>

            <Form
                form={form}
                layout="vertical"
                initialValues={initialValues}
                onFinish={handleSubmit}
                onValuesChange={() => setDirty(true)}
                className={styles.formWrap}
            >
                <ContentCard
                    title="URLs de referência"
                    icon={<Link2 size={ICON_SIZE_MD} aria-hidden />}
                    style={{ marginBottom: 24 }}
                >
                    <Form.Item label="Links de inspiração, concorrentes ou benchmarks" style={{ marginBottom: 0 }}>
                        <Form.List name="referencias_urls">
                            {(fields, { add, remove }) => (
                                <>
                                    {fields.length === 0 ? (
                                        <div className={styles.emptyUrls}>
                                            <div className={styles.emptyUrlsIcon} aria-hidden>
                                                <Target size={ICON_SIZE_MD} />
                                            </div>
                                            <div>
                                                <Text strong>Ainda não há referências</Text>
                                                <Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
                                                    Adicione URLs que orientem layout, conteúdo ou funcionalidades do
                                                    projeto.
                                                </Paragraph>
                                            </div>
                                            <Button
                                                type="primary"
                                                icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                                onClick={() => add()}
                                            >
                                                Adicionar primeira URL
                                            </Button>
                                        </div>
                                    ) : (
                                        <div className={styles.urlList}>
                                            {fields.map(({ key, name, ...restField }, index) => {
                                                const currentUrl = String(urlsWatch?.[name] ?? '').trim();
                                                const canOpen = (() => {
                                                    if (!currentUrl) return false;
                                                    try {
                                                        new URL(currentUrl);
                                                        return true;
                                                    } catch {
                                                        return false;
                                                    }
                                                })();

                                                return (
                                                    <div key={key} className={styles.urlRow}>
                                                        <span className={styles.urlIndex} aria-hidden>
                                                            {index + 1}
                                                        </span>
                                                        <div className={styles.urlInputWrap}>
                                                            <Form.Item
                                                                {...restField}
                                                                name={name}
                                                                rules={[
                                                                    {
                                                                        type: 'url',
                                                                        message:
                                                                            'Informe uma URL válida (ex.: https://...)',
                                                                    },
                                                                    {
                                                                        max: 2000,
                                                                        message: 'Máximo 2000 caracteres',
                                                                    },
                                                                ]}
                                                            >
                                                                <Input
                                                                    placeholder="https://exemplo.com/referencia"
                                                                    allowClear
                                                                    prefix={
                                                                        <Layout
                                                                            size={14}
                                                                            aria-hidden
                                                                            style={{ color: 'var(--text-muted)' }}
                                                                        />
                                                                    }
                                                                />
                                                            </Form.Item>
                                                        </div>
                                                        <div className={styles.urlActions}>
                                                            <Button
                                                                type="text"
                                                                icon={<ExternalLink size={ICON_SIZE_MD} aria-hidden />}
                                                                onClick={() => tryOpenUrl(currentUrl)}
                                                                disabled={!canOpen}
                                                                aria-label={`Abrir referência ${index + 1} em novo aba`}
                                                            />
                                                            <Button
                                                                type="text"
                                                                danger
                                                                icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}
                                                                onClick={() => remove(name)}
                                                                aria-label={`Remover referência ${index + 1}`}
                                                            />
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    )}

                                    {fields.length > 0 ? (
                                        <Button
                                            type="dashed"
                                            onClick={() => add()}
                                            block
                                            icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                            style={{ marginTop: 12 }}
                                        >
                                            Adicionar URL
                                        </Button>
                                    ) : null}
                                </>
                            )}
                        </Form.List>
                    </Form.Item>
                </ContentCard>

                <ContentCard
                    title="Observações e contexto"
                    icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                    style={{ marginBottom: 24 }}
                >
                    <FormTextarea
                        name="referencias_observacoes"
                        label="O que cada referência inspira"
                        rules={[
                            {
                                max: MAX_OBS,
                                message: `Máximo ${MAX_OBS.toLocaleString('pt-BR')} caracteres.`,
                            },
                        ]}
                        placeholder="Ex.: (1) https://concorrente.com — estrutura de checkout e prova social na home; (2) https://inspiracao.com — paleta e tipografia aprovadas pelo cliente; (3) https://blog-referencia.com — tom editorial e densidade de conteúdo."
                        rows={8}
                        maxLength={MAX_OBS}
                        showCount
                    />
                    <Text type="secondary" className={styles.observacoesHint}>
                        Quanto mais explícito for o contexto, mais alinhadas ficam as decisões de UX, copy e backlog.
                    </Text>
                </ContentCard>

                <FormActionsWrapper>
                    <Button
                        type="default"
                        onClick={() => {
                            form.setFieldsValue(initialValues);
                            setDirty(false);
                        }}
                        disabled={updateMutation.isPending}
                    >
                        Cancelar
                    </Button>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={updateMutation.isPending}
                        icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                    >
                        Salvar referências
                    </Button>
                </FormActionsWrapper>
            </Form>
        </ProjetoLayout>
    );
}