import { useForm } from '@inertiajs/react';
import { FormErrors, controlClass } from '@/components/procurement';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export function ReinforcementProposal({ budgetId }: { budgetId: number }) {
    const form = useForm({ reference: '', amount: '', reason: '' });
    return (
        <details className="mt-4 rounded-lg border p-4">
            <summary className="cursor-pointer font-semibold">
                Propor reforço desta dotação
            </summary>
            <form
                className="mt-4 grid gap-3"
                onSubmit={(e) => {
                    e.preventDefault();
                    form.post(`/orcamentos/${budgetId}/reforcos`, {
                        onSuccess: () => form.reset(),
                    });
                }}
            >
                <FormErrors errors={form.errors} />
                <p className="text-sm">
                    Aumenta o saldo apenas depois da aprovação por outra pessoa.
                    Mantém a moeda e a base de IVA da dotação.
                </p>
                <label>
                    Referência interna única na empresa
                    <Input
                        required
                        maxLength={100}
                        value={form.data.reference}
                        onChange={(e) =>
                            form.setData('reference', e.target.value)
                        }
                    />
                </label>
                <label>
                    Montante do reforço (MZN)
                    <Input
                        required
                        inputMode="decimal"
                        value={form.data.amount}
                        onChange={(e) => form.setData('amount', e.target.value)}
                    />
                </label>
                <label>
                    Fundamento
                    <textarea
                        required
                        className="w-full rounded border p-3"
                        value={form.data.reason}
                        onChange={(e) => form.setData('reason', e.target.value)}
                    />
                </label>
                <Button disabled={form.processing}>
                    Enviar para aprovação independente
                </Button>
            </form>
        </details>
    );
}
export function ReinforcementReview({ id }: { id: number }) {
    const form = useForm({ decision: 'approved', reason: '' });
    return (
        <form
            className="mt-4 grid gap-3"
            onSubmit={(e) => {
                e.preventDefault();
                form.post(`/reforcos/${id}/decidir`);
            }}
        >
            <FormErrors errors={form.errors} />
            <label>
                Decisão
                <select
                    className={controlClass}
                    value={form.data.decision}
                    onChange={(e) => form.setData('decision', e.target.value)}
                >
                    <option value="approved">Aprovar reforço</option>
                    <option value="rejected">Rejeitar reforço</option>
                </select>
            </label>
            <label>
                Fundamento da decisão
                <textarea
                    required
                    className="w-full rounded border p-3"
                    value={form.data.reason}
                    onChange={(e) => form.setData('reason', e.target.value)}
                />
            </label>
            <Button disabled={form.processing}>Guardar decisão imutável</Button>
        </form>
    );
}