import { FeatureListInput } from '@admin/components/ui/forms/feature-list-input';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { pricingBillingPeriodOptions } from '@admin/lib/pricing-billing-periods';
import { cn } from '@admin/lib/utils';

type PricingPlanFormFieldsProps = {
    data: {
        name: string;
        description: string;
        feature_list: string[];
        price: string;
        billing_period: string;
        is_most_popular: boolean;
        sort_order: number;
        status: boolean;
    };
    errors: Partial<
        Record<
            | 'name'
            | 'description'
            | 'feature_list'
            | 'price'
            | 'billing_period'
            | 'is_most_popular'
            | 'sort_order'
            | 'status',
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
};

export function PricingPlanFormFields({ data, errors, setData }: PricingPlanFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Name"
                helpText="Plan title shown on pricing cards, e.g. Starter, Premium."
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormGroup
                as="textarea"
                label="Description"
                helpText="Keep this precise — one or two short sentences."
                error={errors.description}
                inputProps={{
                    value: data.description,
                    rows: 3,
                    maxLength: 500,
                    onChange: (event) => setData('description', event.target.value),
                    required: true,
                }}
            />

            <FeatureListInput
                label="Feature list"
                items={data.feature_list}
                onChange={(items) => setData('feature_list', items)}
                error={errors.feature_list}
                helpText="Bullet points included in this plan."
            />

            <div className="grid grid-cols-12 gap-4">
                <div className="col-span-12 md:col-span-6">
                    <FormNumberInput
                        label="Price"
                        min={0}
                        step="0.01"
                        value={data.price}
                        error={errors.price}
                        required
                        valueAsString
                        onChange={(value) => setData('price', value)}
                    />
                </div>
                <div className="col-span-12 md:col-span-6">
                    <FormSelect
                        label="Billing period"
                        value={data.billing_period}
                        options={pricingBillingPeriodOptions}
                        placeholder="Select period"
                        error={errors.billing_period}
                        onChange={(value) => setData('billing_period', value)}
                        selectProps={{ required: true }}
                    />
                </div>
            </div>

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first on the pricing section."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />

            <FormSwitch
                id="pricing-plan-most-popular"
                label="Most popular"
                checked={data.is_most_popular}
                onChange={(event) => setData('is_most_popular', event.target.checked)}
            />
            <p className={cn('mb-4 -mt-2', formHelpClassName)}>
                Highlights this plan on the public site. Only one plan is marked at a time.
            </p>

            <FormSwitch
                id="pricing-plan-status"
                label="Published"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}