import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { Save } from 'lucide-react';
import { Field, FormCard, Section } from './shared';
import type { BillingSettings } from './types';

export default function BillingTab({
    settings,
}: {
    settings: BillingSettings;
}) {
    const { data, setData, put, processing, errors } = useForm({ ...settings });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                put('/admin/settings/billing');
            }}
        >
            <FormCard>
                <Section title="Invoices">
                    <Field
                        label="Invoice prefix"
                        hint='Prepended to invoice numbers, e.g. "INV-"'
                        error={errors.invoice_prefix}
                        required
                    >
                        <Input
                            value={data.invoice_prefix}
                            onChange={(e) =>
                                setData('invoice_prefix', e.target.value)
                            }
                            className={cn(
                                'font-mono',
                                errors.invoice_prefix && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Tax label"
                        hint='Displayed on invoices, e.g. "VAT" or "GST"'
                        error={errors.tax_label}
                        required
                    >
                        <Input
                            value={data.tax_label}
                            onChange={(e) =>
                                setData('tax_label', e.target.value)
                            }
                            className={cn(
                                errors.tax_label && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Tax rate (%)"
                        error={errors.tax_rate}
                        required
                    >
                        <Input
                            type="number"
                            min={0}
                            max={100}
                            step={0.01}
                            value={data.tax_rate}
                            onChange={(e) =>
                                setData('tax_rate', e.target.value)
                            }
                            className={cn(
                                'w-28',
                                errors.tax_rate && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Grace period (days)"
                        hint="Days after due date before marking invoice overdue"
                        error={errors.grace_period_days}
                        required
                    >
                        <Input
                            type="number"
                            min={0}
                            max={90}
                            value={data.grace_period_days}
                            onChange={(e) =>
                                setData('grace_period_days', e.target.value)
                            }
                            className={cn(
                                'w-24',
                                errors.grace_period_days &&
                                    'border-destructive',
                            )}
                        />
                    </Field>
                </Section>

                <div className="border-border border-t" />

                <Section title="Subscriptions">
                    <Field
                        label="Trial length (days)"
                        hint="Default trial length for new subscriptions"
                        error={errors.trial_days}
                        required
                    >
                        <Input
                            type="number"
                            min={0}
                            max={365}
                            value={data.trial_days}
                            onChange={(e) =>
                                setData('trial_days', e.target.value)
                            }
                            className={cn(
                                'w-24',
                                errors.trial_days && 'border-destructive',
                            )}
                        />
                    </Field>
                </Section>

                <div className="flex justify-end">
                    <Button
                        type="submit"
                        disabled={processing}
                        size="sm"
                        className="gap-2"
                    >
                        <Save className="h-3.5 w-3.5" />
                        Save billing settings
                    </Button>
                </div>
            </FormCard>
        </form>
    );
}