import { useState } from 'react';
import { useForm } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import { Button } from '@/Components/ui/button';
import { DecisionBar } from '@/Components/MenuSampleOrders/DecisionBar';
import { DecisionConfirmDialog } from '@/Components/MenuSampleOrders/DecisionConfirmDialog';
import { RebateHeaderCard } from '@/Components/MenuCompanies/CompanyRebate/RebateHeaderCard';
import { RebateDetailTable, recomputeRebateRows } from '@/Components/MenuCompanies/CompanyRebate/RebateDetailTable';
import { useToast } from '@/Components/Toast';

/**
 * Approval CEO Detail — legacy companyrebateapprovalceo.php.
 * CEO final approval form: editable detail table + DecisionBar.
 * POST /company-rebates/approval-ceo/{id}/approve|revise|reject
 */
export default function ApprovalCeoDetail({ rebate, details, history, pageTitle, options }) {
    const { show: showToast } = useToast();
    const [confirm, setConfirm] = useState(null);
    // Seeded through the same recompute the server runs — see ApprovalSmDetail.jsx.
    const [localItems, setLocalItems] = useState(() => recomputeRebateRows(details, rebate.usdRate));

    const form = useForm({
        comment: '',
        validityDateStart: rebate.validityDateStart || '',
        validityDateEnd: rebate.validityDateEnd || '',
        items: localItems,
    });

    // `transform`, NOT `setData` — see the note in ApprovalSmDetail.jsx.
    const handleAct = () => {
        form.transform((data) => ({ ...data, items: localItems }));
        form.post(route('company-rebates.approval-ceo.act', { rebate: rebate.id, action: confirm }), {
            onError: () => showToast('Please check the form and try again.', 'error'),
            onSuccess: () => setConfirm(null),
        });
    };

    return (
        <div className="space-y-6 pb-28">
            <RebateHeaderCard
                rebate={rebate}
                history={history}
                scope="approval-ceo"
                pageTitle={pageTitle}
                options={options}
            />

            {/* Detail table */}
            <div>
                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                    Company Rebate Summary Details
                </h3>
                <RebateDetailTable
                    // Bound to the FORM, not the stored rebate: these are the values the CEO is
                    // about to submit, so the line has to show the edit as it is made.
                    validityStart={form.data.validityDateStart}
                    validityEnd={form.data.validityDateEnd}
                    onValidityChange={(which, v) => form.setData(which === 'start' ? 'validityDateStart' : 'validityDateEnd', v)}
                    items={localItems}
                    mode="approval"
                    statusId={rebate.statusId}
                    usdRate={rebate.usdRate}
                    onUpdate={setLocalItems}
                    readonly={false}
                />
            </div>

            <DecisionBar>
                <span className="hidden text-sm text-muted-foreground sm:block">
                    Final Approval: <strong>#{rebate.id}</strong> — {rebate.companyName}
                </span>
                {/* Approve leftmost, getting heavier to the right — locked UI ruling. */}
                <div className="flex items-center gap-2.5">
                    <Button onClick={() => setConfirm('approve')}>Approve</Button>
                    <Button variant="outline" onClick={() => setConfirm('revise')}>Revise</Button>
                    <Button variant="destructive" onClick={() => setConfirm('reject')}>Reject</Button>
                </div>
            </DecisionBar>

            <DecisionConfirmDialog
                action={confirm}
                onCancel={() => setConfirm(null)}
                onConfirm={handleAct}
                comment={form.data.comment}
                onCommentChange={(v) => form.setData('comment', v)}
                processing={form.processing}
                error={form.errors.comment}
                errors={form.errors}
                commentRequired={confirm === 'revise' || confirm === 'reject'}
            />
        </div>
    );
}

ApprovalCeoDetail.layout = [AppLayout];