import { Head, router, useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
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 InputError from '@/components/input-error';
import type { AssignmentRule, Category, Company, System, User } from '@/types';

type Props = {
    rule: AssignmentRule;
    systems: System[];
    categories: Category[];
    companies: Company[];
    agents: Pick<User, 'id' | 'name'>[];
};

export default function EditAssignmentRule({
    rule,
    systems,
    categories,
    companies,
    agents,
}: Props) {
    const { data, setData, put, processing, errors } = useForm({
        system_id: String(rule.system_id ?? ''),
        category_id: String(rule.category_id ?? ''),
        company_id: String(rule.company_id ?? ''),
        agent_id: String(rule.agent_id),
        strategy: rule.strategy,
        priority: String(rule.priority),
        is_active: rule.is_active,
    });

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        put(`/admin/assignment-rules/${rule.id}`);
    }

    return (
        <>
            <Head title="Edit Assignment Rule" />
            <div className="mx-auto max-w-xl space-y-4 p-4">
                <h1 className="text-2xl font-bold">Edit Assignment Rule</h1>
                <form onSubmit={handleSubmit}>
                    <Card>
                        <CardContent className="space-y-4 pt-6">
                            <div className="space-y-2">
                                <Label>System (optional)</Label>
                                <Select
                                    value={data.system_id || '__none__'}
                                    onValueChange={(v) =>
                                        setData(
                                            'system_id',
                                            v === '__none__' ? '' : v,
                                        )
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Any system" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="__none__">
                                            Any
                                        </SelectItem>
                                        {systems.map((s) => (
                                            <SelectItem
                                                key={s.id}
                                                value={String(s.id)}
                                            >
                                                {s.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label>Category (optional)</Label>
                                <Select
                                    value={data.category_id || '__none__'}
                                    onValueChange={(v) =>
                                        setData(
                                            'category_id',
                                            v === '__none__' ? '' : v,
                                        )
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Any category" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="__none__">
                                            Any
                                        </SelectItem>
                                        {categories
                                            .filter(
                                                (c) =>
                                                    !data.system_id ||
                                                    c.system_id ===
                                                        Number(data.system_id),
                                            )
                                            .map((c) => (
                                                <SelectItem
                                                    key={c.id}
                                                    value={String(c.id)}
                                                >
                                                    {c.name}
                                                </SelectItem>
                                            ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label>Company (optional)</Label>
                                <Select
                                    value={data.company_id || '__none__'}
                                    onValueChange={(v) =>
                                        setData(
                                            'company_id',
                                            v === '__none__' ? '' : v,
                                        )
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Any company" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="__none__">
                                            Any
                                        </SelectItem>
                                        {companies.map((c) => (
                                            <SelectItem
                                                key={c.id}
                                                value={String(c.id)}
                                            >
                                                {c.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label>Agent</Label>
                                <Select
                                    value={data.agent_id}
                                    onValueChange={(v) =>
                                        setData('agent_id', v)
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {agents.map((a) => (
                                            <SelectItem
                                                key={a.id}
                                                value={String(a.id)}
                                            >
                                                {a.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <InputError message={errors.agent_id} />
                            </div>
                            <div className="space-y-2">
                                <Label>Strategy</Label>
                                <Select
                                    value={data.strategy}
                                    onValueChange={(v) =>
                                        setData('strategy', v as any)
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="round_robin">
                                            Round Robin
                                        </SelectItem>
                                        <SelectItem value="workload">
                                            Workload Balancing
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label>Rule Priority</Label>
                                <Input
                                    type="number"
                                    value={data.priority}
                                    onChange={(e) =>
                                        setData('priority', e.target.value)
                                    }
                                    min="0"
                                />
                            </div>
                            <div className="flex items-center gap-2">
                                <Checkbox
                                    id="is_active"
                                    checked={data.is_active}
                                    onCheckedChange={(v) =>
                                        setData('is_active', !!v)
                                    }
                                />
                                <Label htmlFor="is_active">Active</Label>
                            </div>
                            <div className="flex gap-3 pt-2">
                                <Button type="submit" disabled={processing}>
                                    Save
                                </Button>
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() =>
                                        router.visit('/admin/assignment-rules')
                                    }
                                >
                                    Cancel
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </form>
            </div>
        </>
    );
}
