import { Head, Link, useForm } from '@inertiajs/react';
import { ColorField } from '@/components/admin/color-field';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';

interface Setting {
    key: string;
    label: string;
    description: string | null;
    type: string;
    value: string | null;
    options: string[] | null;
}

export default function SettingsEdit({
    group,
    groupLabel,
    settings,
}: {
    group: string;
    groupLabel: string;
    settings: Setting[];
}) {
    const initial: Record<string, string> = {};
    settings.forEach((s) => { initial[s.key] = s.value ?? ''; });

    const { data, setData, patch, processing } = useForm({ settings: initial });

    function set(key: string, value: string) {
        setData('settings', { ...data.settings, [key]: value });
    }

    function renderField(s: Setting) {
        const value = data.settings[s.key] ?? '';

        switch (s.type) {
            case 'text':
                return (
                    <Textarea
                        id={s.key}
                        value={value}
                        onChange={(e) => set(s.key, e.target.value)}
                        rows={3}
                        placeholder={s.label}
                    />
                );
            case 'bool':
                return (
                    <Switch
                        id={s.key}
                        checked={value === '1' || value === 'true'}
                        onCheckedChange={(checked) => set(s.key, checked ? '1' : '0')}
                    />
                );
            case 'color':
                return (
                    <ColorField
                        value={value}
                        onChange={(v) => set(s.key, v)}
                    />
                );
            case 'image':
                return (
                    <div className="space-y-2">
                        {value && (
                            <div className="flex items-center gap-3">
                                <img src={value} alt={s.label} className="h-10 max-w-[160px] object-contain rounded border border-border p-1" />
                                <p className="text-xs text-muted-foreground break-all">{value}</p>
                            </div>
                        )}
                        <Input
                            id={s.key}
                            value={value}
                            onChange={(e) => set(s.key, e.target.value)}
                            placeholder="/images/example.svg or https://..."
                        />
                        <p className="text-xs text-muted-foreground">Enter a URL or upload via the Media section. Direct file upload coming soon.</p>
                    </div>
                );
            case 'select':
                return (
                    <Select value={value} onValueChange={(v) => set(s.key, v)}>
                        <SelectTrigger id={s.key}>
                            <SelectValue placeholder={`Select ${s.label}`} />
                        </SelectTrigger>
                        <SelectContent>
                            {(s.options ?? []).map((opt) => (
                                <SelectItem key={opt} value={opt}>{opt}</SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                );
            case 'multiselect': {
                const selected = value.split(',').map((v) => v.trim()).filter(Boolean);
                return (
                    <div className="flex flex-wrap gap-3">
                        {(s.options ?? []).map((opt) => (
                            <label key={opt} className="flex items-center gap-2 text-sm cursor-pointer">
                                <Checkbox
                                    checked={selected.includes(opt)}
                                    onCheckedChange={(checked) => {
                                        const next = checked
                                            ? [...selected, opt]
                                            : selected.filter((v) => v !== opt);
                                        set(s.key, next.join(','));
                                    }}
                                />
                                {opt}
                            </label>
                        ))}
                    </div>
                );
            }
            case 'number':
                return (
                    <Input
                        id={s.key}
                        type="number"
                        value={value}
                        onChange={(e) => set(s.key, e.target.value)}
                        placeholder={s.label}
                    />
                );
            case 'email':
            case 'url':
                return (
                    <Input
                        id={s.key}
                        type={s.type}
                        value={value}
                        onChange={(e) => set(s.key, e.target.value)}
                        placeholder={s.label}
                    />
                );
            default:
                return (
                    <Input
                        id={s.key}
                        value={value}
                        onChange={(e) => set(s.key, e.target.value)}
                        placeholder={s.label}
                    />
                );
        }
    }

    return (
        <>
            <Head title={`${groupLabel} Settings`} />
            <form onSubmit={(e) => { e.preventDefault(); patch(`/admin/settings/${group}`); }} className="space-y-0">
                <div className="sticky top-16 z-10 -mx-6 mb-6 flex items-center justify-between border-b bg-background px-6 pb-4 pt-2 lg:-mx-8 lg:px-8">
                    <div>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Link href="/admin/settings">Settings</Link>
                            <span>/</span>
                            <span className="text-foreground">{groupLabel}</span>
                        </div>
                        <h1 className="text-2xl font-bold">{groupLabel} Settings</h1>
                    </div>
                    <div className="flex items-center gap-3">
                        <Button type="button" variant="outline" asChild>
                            <Link href="/admin/settings">Cancel</Link>
                        </Button>
                        <Button type="submit" disabled={processing}>{processing ? 'Saving...' : 'Save Changes'}</Button>
                    </div>
                </div>

                <div className="rounded-xl border border-border bg-card p-6 space-y-6">
                    {settings.map((s) => (
                        <div key={s.key} className="space-y-1.5">
                            <Label htmlFor={s.key} className={s.type === 'bool' ? 'flex items-center gap-3 cursor-pointer' : undefined}>
                                {s.type === 'bool' && renderField(s)}
                                <span>{s.label}</span>
                            </Label>
                            {s.type !== 'bool' && renderField(s)}
                            {s.description && (
                                <p className="text-xs text-muted-foreground">{s.description}</p>
                            )}
                        </div>
                    ))}
                </div>
            </form>
        </>
    );
}