import { useEffect, useRef, useState } from 'react';
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';
import { useOrganizationServiceContext } from '../../../services/OrganizationService.tsx';
import { Button } from '../../../components/ui/button.tsx';
import { Input } from '../../../components/ui/input.tsx';
import { Label } from '../../../components/ui/label.tsx';
import { Alert, AlertDescription } from '../../../components/ui/alert.tsx';
import { getOrganizationTaxRate } from '../../../utils/organizationTaxRate';
import './TaxSettingsSection.css';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import { READ_BACK_FAILED, useBillingDefaultSave } from '../BillingPage/useBillingDefaultSave';

const parseRate = (raw: string): number | undefined => {
    if (raw.trim() === '') {
        return undefined;
    }
    const parsed = Number(raw);
    if (!Number.isFinite(parsed) || parsed < 0 || parsed > 100) {
        return undefined;
    }
    return parsed;
};

const TaxSettingsSection = () => {
    const { updateTaxSettings } = useOrganizationServiceContext();

    const [rate, setRate] = useState('0');

    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-tax-settings', 'tax', () => seed.current());
    seed.current = () => {
        setRate(String(getOrganizationTaxRate(organization ?? undefined)));
        setSaving(false);
        setSaveError(undefined);
        setSaveSuccess(false);
    };
    useEffect(() => { seed.current(); }, [practiceId]);

    const parsedRate = parseRate(rate);
    const canSave = parsedRate !== undefined && !unsettled;

    const handleSave = async () => {
        if (parsedRate === undefined) {
            setSaveError('Enter a tax rate between 0 and 100.');
            return;
        }
        setSaving(true);
        setSaveError(undefined);
        setSaveSuccess(false);
        const result = await save((transport) => updateTaxSettings({ ratePercent: parsedRate }, 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 tax settings:', result.error);
            setSaveError(relayServerFailure(result.error, 'Failed to save tax settings. 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;
        }
        setRate(String(getOrganizationTaxRate(fresh)));
        setSaveError(undefined);
    };

    return (
        <div className="ahr-tax-settings">
            <div className="ahr-tax-settings__header">
                <h2 className="ahr-tax-settings__title">Sales Tax</h2>
                <p className="ahr-tax-settings__description">
                    Set the sales tax rate applied to taxable invoice line items. The rate is
                    frozen onto each invoice when it&apos;s created — changing it here does not
                    affect invoices already issued.
                </p>
            </div>

            {(saveError || unsettled) && (
                <Alert variant="destructive" className="ahr-tax-settings__alert">
                    <AlertCircle />
                    <AlertDescription>{saveError ?? unsettled}</AlertDescription>
                </Alert>
            )}

            {saveSuccess && (
                <Alert className="ahr-tax-settings__alert">
                    <CheckCircle2 />
                    <AlertDescription>Tax settings saved.</AlertDescription>
                </Alert>
            )}

            <div className="ahr-tax-settings__card">
                <div className="ahr-tax-settings__field">
                    <Label htmlFor="tax-rate">Tax Rate</Label>
                    <div className="ahr-tax-settings__rate-input-wrap">
                        <Input
                            id="tax-rate"
                            type="number"
                            min={0}
                            max={100}
                            step="0.01"
                            value={rate}
                            disabled={saving || Boolean(unsettled)}
                            placeholder="0.00"
                            onChange={(event) => {
                                setRate(event.target.value);
                                setSaveSuccess(false);
                                setSaveError(undefined);
                            }}
                        />
                        <span className="ahr-tax-settings__rate-suffix">%</span>
                    </div>
                </div>
            </div>

            <div className="ahr-tax-settings__save-row">
                {checksHere && (
                    <Button className="btn btn-blue-ghost" onClick={() => void checkSaved()} disabled={saving}>
                        Check what was saved
                    </Button>
                )}
                <Button className="btn btn-green" onClick={handleSave} disabled={saving || !canSave}>
                    {saving && <Loader2 className="ahr-tax-settings__spinner animate-spin" />}
                    {saving ? 'Saving...' : 'Save'}
                </Button>
            </div>
        </div>
    );
};

export default TaxSettingsSection;