import { Head, useForm } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import Card from '@/Components/UI/Card';
import Button from '@/Components/UI/Button';
import InputLabel from '@/Components/InputLabel';
import FormInput from '@/Components/UI/FormInput';
import InputError from '@/Components/InputError';

export default function Edit({ referralBonusAmount }: { referralBonusAmount: string }) {
    const { data, setData, put, processing, errors } = useForm({
        referral_bonus_amount: referralBonusAmount,
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        put(route('admin.settings.update'));
    };

    return (
        <AdminLayout>
            <Head title="Platform Settings" />

            <h1 className="text-institute-title text-on-surface">Platform Settings</h1>
            <p className="text-body-md text-on-surface-variant">
                Institution-wide configuration controlled by the Super Administrator.
            </p>

            <Card className="mt-6 max-w-xl">
                <h2 className="text-course-title text-on-surface">Referral Wallet</h2>
                <p className="text-body-md mt-2 text-on-surface-variant">
                    Students unlock referrals once they complete their first course. This is the amount credited
                    to their Referral Wallet whenever someone they refer registers and enrols in a Programme.
                </p>

                <form onSubmit={submit} className="mt-6">
                    <InputLabel htmlFor="referral_bonus_amount" value="Referral Bonus Amount (USD)" />
                    <FormInput
                        id="referral_bonus_amount"
                        type="number"
                        step="0.01"
                        min="0"
                        className="mt-1 max-w-xs"
                        value={data.referral_bonus_amount}
                        onChange={(e) => setData('referral_bonus_amount', e.target.value)}
                    />
                    <InputError message={errors.referral_bonus_amount} className="mt-1" />

                    <Button type="submit" variant="primary" className="mt-6" disabled={processing}>
                        Save Settings
                    </Button>
                </form>
            </Card>
        </AdminLayout>
    );
}
