import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import type { PlanForm } from './types';

function Field({
    label,
    error,
    children,
}: {
    label: string;
    error?: string;
    children: React.ReactNode;
}) {
    return (
        <div className="space-y-1.5">
            <label className="text-muted-foreground block text-xs font-semibold tracking-wide uppercase">
                {label}
            </label>
            {children}
            {error && <p className="text-destructive text-xs">{error}</p>}
        </div>
    );
}

export default function DetailsCard({
    form,
    setField,
    errors,
    isEdit,
    baseCode,
}: {
    form: PlanForm;
    setField: (key: keyof PlanForm, value: string | boolean) => void;
    errors: Record<string, string>;
    isEdit: boolean;
    baseCode: string;
}) {
    return (
        <div className="pf-glass space-y-5 rounded-xl p-6">
            <p className="text-muted-foreground dark:text-muted-foreground/50 text-[10px] font-bold tracking-widest uppercase">
                Plan details
            </p>

            <Field label="Plan name" error={errors.name}>
                <Input
                    value={form.name}
                    onChange={(e) => setField('name', e.target.value)}
                    placeholder="Professional"
                />
            </Field>

            <Field label="Slug" error={errors.slug}>
                <Input
                    value={form.slug}
                    onChange={(e) => setField('slug', e.target.value)}
                    placeholder="professional"
                    disabled={isEdit}
                    className={isEdit ? 'opacity-60' : ''}
                />
                <p className="text-muted-foreground dark:text-muted-foreground/60 text-[10px]">
                    Permanent identifier — cannot be changed after creation.
                </p>
            </Field>

            <Field label="Description" error={errors.description}>
                <Textarea
                    value={form.description}
                    onChange={(e) => setField('description', e.target.value)}
                    placeholder="Full-featured platform for growing MFIs…"
                    rows={3}
                />
            </Field>

            <div className="grid grid-cols-2 gap-3">
                <Field
                    label={`Monthly price (${baseCode})`}
                    error={errors.price_monthly}
                >
                    <Input
                        type="number"
                        min={0}
                        step="0.01"
                        value={form.price_monthly}
                        onChange={(e) =>
                            setField('price_monthly', e.target.value)
                        }
                        placeholder="149"
                    />
                </Field>
                <Field
                    label={`Yearly price (${baseCode})`}
                    error={errors.price_yearly}
                >
                    <Input
                        type="number"
                        min={0}
                        step="0.01"
                        value={form.price_yearly}
                        onChange={(e) =>
                            setField('price_yearly', e.target.value)
                        }
                        placeholder="1490"
                    />
                </Field>
            </div>

            <div className="grid grid-cols-2 gap-3">
                <Field label="Trial days" error={errors.trial_days}>
                    <Input
                        type="number"
                        min={0}
                        value={form.trial_days}
                        onChange={(e) => setField('trial_days', e.target.value)}
                        placeholder="0"
                    />
                </Field>
                <Field label="Sort order" error={errors.sort_order}>
                    <Input
                        type="number"
                        min={0}
                        value={form.sort_order}
                        onChange={(e) => setField('sort_order', e.target.value)}
                        placeholder="0"
                    />
                </Field>
            </div>

            <div className="flex flex-col gap-2.5 pt-1">
                <label className="flex cursor-pointer items-center gap-2.5">
                    <Checkbox
                        checked={form.is_active}
                        onCheckedChange={(v) => setField('is_active', !!v)}
                    />
                    <span className="text-foreground text-sm">Active</span>
                </label>
                <label className="flex cursor-pointer items-center gap-2.5">
                    <Checkbox
                        checked={form.is_public}
                        onCheckedChange={(v) => setField('is_public', !!v)}
                    />
                    <span className="text-foreground text-sm">
                        Show on pricing page
                    </span>
                </label>
            </div>
        </div>
    );
}