'use client';

import { useState } from 'react';
import { Alert, Button, Checkbox, Form, Input, InputNumber, Space, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import { confirmDialog } from '@/lib/feedback/confirmDialog';
import ContentCard from '@/components/layouts/ContentCard';
import { getLaravelApiErrorMessage } from '@/lib/api/laravelApiErrorMessage';
import {
    aprovarChangeRequest,
    criarChangeRequest,
} from '@/lib/api/fluxoComercialClient';
import { CHANGE_REQUEST_UI_READY } from '../changeRequestContract';
import type { ChangeRequestResource } from '../changeRequestContract';

const { Text } = Typography;
const { TextArea } = Input;

export type ChangeRequestShellCardProps = {
    projetoId: string | number;
    negocioId?: number | null;
    /** Força render mesmo com flag off (só testes). */
    forceShow?: boolean;
};

type FormValues = {
    titulo: string;
    descricao?: string;
    cobravel?: boolean;
    valor_estimado?: number | null;
};

/**
 * Fase 9 — Change Request comercial ligado à API real (store + aprovar).
 */
export function ChangeRequestShellCard({
    projetoId,
    negocioId,
    forceShow = false,
}: ChangeRequestShellCardProps) {
    const [form] = Form.useForm<FormValues>();
    const [submitting, setSubmitting] = useState(false);
    const [approving, setApproving] = useState(false);
    const [ultimo, setUltimo] = useState<ChangeRequestResource | null>(null);

    if (!CHANGE_REQUEST_UI_READY && !forceShow) {
        return null;
    }

    const handleSubmit = async (values: FormValues) => {
        setSubmitting(true);
        try {
            const res = await criarChangeRequest(projetoId, {
                titulo: values.titulo.trim(),
                descricao: values.descricao?.trim() || undefined,
                cobravel: values.cobravel ?? false,
                valor_estimado: values.valor_estimado ?? null,
                ...(negocioId != null ? { negocio_id: negocioId } : {}),
            });
            const cr = res.data;
            setUltimo(cr);
            message.success(res.message ?? 'Change request criado.');
            form.resetFields();
        } catch (err: unknown) {
            message.error(
                getLaravelApiErrorMessage(err, 'Não foi possível criar o change request.'),
            );
        } finally {
            setSubmitting(false);
        }
    };

    const handleAprovar = () => {
        if (!ultimo?.id) return;
        confirmDialog({
            title: 'Aprovar change request?',
            content:
                'A aprovação registra o CR como aprovado. Se for cobrável, a API pode gerar nova proposta mantendo o snapshot antigo.',
            okText: 'Aprovar',
            cancelText: 'Cancelar',
            onOk: async () => {
                setApproving(true);
                try {
                    const res = await aprovarChangeRequest(projetoId, ultimo.id);
                    message.success(res.message ?? 'Change request aprovado.');
                    setUltimo((prev) =>
                        prev ? { ...prev, status: 'aprovado' } : prev,
                    );
                } catch (err: unknown) {
                    message.error(
                        getLaravelApiErrorMessage(
                            err,
                            'Não foi possível aprovar o change request.',
                        ),
                    );
                } finally {
                    setApproving(false);
                }
            },
        });
    };

    return (
        <ContentCard title="Change requests" data-testid="crm-change-request-shell">
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Text type="secondary" style={{ fontSize: 13 }}>
                    Registre pedidos de mudança comercial deste projeto (escopo, valor ou prazo).
                    Não substitui baseline PMO nem aditivo contratual.
                </Text>

                <Form
                    form={form}
                    layout="vertical"
                    onFinish={handleSubmit}
                    requiredMark="optional"
                    data-testid="crm-change-request-form"
                >
                    <Form.Item
                        name="titulo"
                        label="Título"
                        rules={[
                            { required: true, message: 'Informe o título do change request.' },
                            { max: 255, message: 'Máximo de 255 caracteres.' },
                        ]}
                    >
                        <Input
                            placeholder="Ex.: Incluir módulo de relatórios"
                            data-testid="crm-change-request-titulo"
                        />
                    </Form.Item>
                    <Form.Item name="descricao" label="Descrição">
                        <TextArea
                            rows={3}
                            placeholder="Detalhe o impacto esperado para o cliente e a equipe."
                            data-testid="crm-change-request-descricao"
                        />
                    </Form.Item>
                    <Form.Item name="cobravel" valuePropName="checked" initialValue={false}>
                        <Checkbox data-testid="crm-change-request-cobravel">
                            Cobrável (pode gerar nova proposta)
                        </Checkbox>
                    </Form.Item>
                    <Form.Item name="valor_estimado" label="Valor estimado (R$)">
                        <InputNumber
                            min={0}
                            step={100}
                            style={{ width: '100%' }}
                            placeholder="Opcional"
                            data-testid="crm-change-request-valor"
                        />
                    </Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={submitting}
                        data-testid="crm-change-request-submit"
                    >
                        Criar change request
                    </Button>
                </Form>

                {ultimo ? (
                    <Alert
                        type="success"
                        showIcon
                        data-testid="crm-change-request-ultimo"
                        message={`CR #${ultimo.id} — ${ultimo.titulo}`}
                        description={
                            <Space direction="vertical" size={8} style={{ width: '100%' }}>
                                <Text>
                                    Status: <strong>{ultimo.status}</strong>
                                    {ultimo.cobravel ? ' · cobrável' : null}
                                </Text>
                                {ultimo.status !== 'aprovado' &&
                                ultimo.status !== 'rejeitado' &&
                                ultimo.status !== 'cancelado' ? (
                                    <Button
                                        size="small"
                                        type="default"
                                        loading={approving}
                                        onClick={handleAprovar}
                                        data-testid="crm-change-request-aprovar"
                                    >
                                        Aprovar
                                    </Button>
                                ) : null}
                            </Space>
                        }
                    />
                ) : null}
            </Space>
        </ContentCard>
    );
}