// src/pages/DashboardPage/BillingPage/InvoiceTermsSettingsSection.tsx
// Billing workspace v2-4: the org "Default payment terms" control, living in the Overview's "Billing
// settings" card next to the (moved) tax rate. Mirrors TaxSettingsSection's save pattern - seed from the
// org, edit locally, PUT the dedicated billing:manage endpoint, then push the returned Organization back
// into auth via setWpOrganization. A new invoice starts with these net days; issuing freezes its due date.
// Radix ui/* + Tailwind, no @wordpress/components and no per-section CSS file (zero new WordPress).
import { useEffect, useRef, useState } from 'react';
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';
import { useOrganizationServiceContext } from '../../../services/OrganizationService.tsx';
import { Label } from '../../../components/ui/label.tsx';
import { Alert, AlertDescription } from '../../../components/ui/alert.tsx';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '../../../components/ui/select.tsx';
import { getDefaultNetDays } from '../../../utils/organizationInvoiceTerms';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import { READ_BACK_FAILED, useBillingDefaultSave } from './useBillingDefaultSave';

// The default-terms options as net days - byte-values match the server's accepted set (0/15/30/60/90).
// Exported so the Overview's read-only viewer display can label a stored value without duplicating this.
export const NET_DAYS_OPTIONS: { value: number; label: string }[] = [
    { value: 0, label: 'Due on receipt' },
    { value: 15, label: 'Net 15' },
    { value: 30, label: 'Net 30' },
    { value: 60, label: 'Net 60' },
    { value: 90, label: 'Net 90' },
];

// Label for a stored net-days value; falls back to "Net N" for any value not in the fixed option set.
export const netDaysLabel = (netDays: number): string =>
    NET_DAYS_OPTIONS.find((option) => option.value === netDays)?.label ?? `Net ${netDays}`;

const InvoiceTermsSettingsSection = () => {
    const { updateInvoiceTermsSettings } = useOrganizationServiceContext();

    const [netDays, setNetDays] = useState<number>(30);

    const [saving, setSaving] = useState(false);
    const [saveError, setSaveError] = useState<string>();
    const [saveSuccess, setSaveSuccess] = useState(false);

    // Seeded from the practice on screen whenever it, or the person signed in, changes; whatever was saving is retired.
    const seed = useRef(() => undefined as void);
    const { organization, practiceId, save, readBack, unsettled, checksHere } = useBillingDefaultSave('organization-invoice-terms', 'terms', () => seed.current());
    seed.current = () => {
        setNetDays(getDefaultNetDays(organization ?? undefined));
        setSaving(false);
        setSaveError(undefined);
        setSaveSuccess(false);
    };
    useEffect(() => { seed.current(); }, [practiceId]);

    const handleSave = async () => {
        setSaving(true);
        setSaveError(undefined);
        setSaveSuccess(false);
        const result = await save((transport) => updateInvoiceTermsSettings({ netDays }, transport));
        if (result.outcome === 'retired') return;
        setSaving(false);
        if (result.outcome === 'saved') {
            setSaveSuccess(true);
        } else if (result.outcome !== 'unconfirmed' && result.outcome !== 'held') {
            console.error('Error saving invoice terms settings:', result.error);
            setSaveError(relayServerFailure(result.error, 'Failed to save payment terms. Please try again.'));
        }
    };

    const checkSaved = async () => {
        setSaving(true);
        const fresh = await readBack();
        if (fresh === 'retired') return;
        setSaving(false);
        if (!fresh) {
            setSaveError(READ_BACK_FAILED);
            return;
        }
        setNetDays(getDefaultNetDays(fresh));
        setSaveError(undefined);
    };

    return (
        <div className="space-y-4">
            <div className="space-y-1">
                <h3 className="ak-section-title">Default payment terms</h3>
                <p className="ak-field-help">
                    The payment terms new invoices start with. A new invoice&apos;s due date is its issue
                    date plus these net days; the due date freezes when the invoice is issued.
                </p>
            </div>

            {(saveError || unsettled) && (
                <Alert variant="destructive">
                    <AlertCircle />
                    <AlertDescription>{saveError ?? unsettled}</AlertDescription>
                </Alert>
            )}

            {saveSuccess && (
                <Alert>
                    <CheckCircle2 />
                    <AlertDescription>Payment terms saved.</AlertDescription>
                </Alert>
            )}

            <div className="space-y-2">
                <Label htmlFor="default-payment-terms">Terms</Label>
                <Select
                    value={String(netDays)}
                    disabled={saving || Boolean(unsettled)}
                    onValueChange={(value) => {
                        setNetDays(Number(value));
                        setSaveSuccess(false);
                        setSaveError(undefined);
                    }}
                >
                    <SelectTrigger id="default-payment-terms" className="w-56">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        {NET_DAYS_OPTIONS.map((option) => (
                            <SelectItem key={option.value} value={String(option.value)}>
                                {option.label}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>

            <div className="flex justify-end gap-2">
                {checksHere && (
                    <button type="button" className="btn btn-blue-ghost" onClick={() => void checkSaved()} disabled={saving}>
                        Check what was saved
                    </button>
                )}
                <button type="button" className="btn btn-green" onClick={handleSave} disabled={saving || Boolean(unsettled)}>
                    {saving && <Loader2 className="h-4 w-4 animate-spin" />}
                    {saving ? 'Saving...' : 'Save'}
                </button>
            </div>
        </div>
    );
};

export default InvoiceTermsSettingsSection;