import { Head, router, useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
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 { Category, Company, System } from '@/types';
import { useState, useCallback } from 'react';

type Props = {
    companies: Company[];
    systems: System[];
    categories: Category[];
};

export default function CreateTicket({
    companies,
    systems,
    categories,
}: Props) {
    const { data, setData, post, processing, errors } = useForm({
        company_id: '',
        system_id: '',
        category_id: '',
        title: '',
        description: '',
        priority: 'medium',
        source: 'form',
        metadata: {} as Record<string, string>,
    });

    const [duplicates, setDuplicates] = useState<any[]>([]);
    const [suggestions, setSuggestions] = useState<any[]>([]);

    const filteredCategories = categories.filter(
        (c) => !data.system_id || c.system_id === Number(data.system_id),
    );

    const checkDuplicates = useCallback(() => {
        if (data.title.length >= 5 && data.system_id && data.company_id) {
            fetch('/tickets/check-duplicates', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN':
                        document.querySelector<HTMLMetaElement>(
                            'meta[name="csrf-token"]',
                        )?.content ?? '',
                    Accept: 'application/json',
                },
                body: JSON.stringify({
                    title: data.title,
                    description: data.description || data.title,
                    system_id: Number(data.system_id),
                    company_id: Number(data.company_id),
                }),
            })
                .then((r) => r.json())
                .then((r) => setDuplicates(r.duplicates ?? []))
                .catch(() => {});
        }
    }, [data.title, data.description, data.system_id, data.company_id]);

    const fetchSuggestions = useCallback(() => {
        if (data.title.length >= 3 && data.system_id) {
            fetch('/tickets/suggest-knowledge', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN':
                        document.querySelector<HTMLMetaElement>(
                            'meta[name="csrf-token"]',
                        )?.content ?? '',
                    Accept: 'application/json',
                },
                body: JSON.stringify({
                    system_id: Number(data.system_id),
                    category_id: data.category_id
                        ? Number(data.category_id)
                        : null,
                    query: data.title,
                }),
            })
                .then((r) => r.json())
                .then((r) => setSuggestions(r.suggestions ?? []))
                .catch(() => {});
        }
    }, [data.title, data.system_id, data.category_id]);

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        post('/tickets');
    }

    const selectedSystem = systems.find((s) => s.id === Number(data.system_id));

    return (
        <>
            <Head title="Create Ticket" />
            <div className="mx-auto max-w-3xl space-y-4 p-4">
                <h1 className="text-2xl font-bold">Create New Ticket</h1>

                <form onSubmit={handleSubmit} className="space-y-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Ticket Details</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="company_id">Company</Label>
                                    <Select
                                        value={data.company_id}
                                        onValueChange={(v) =>
                                            setData('company_id', v)
                                        }
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select company" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {companies.map((c) => (
                                                <SelectItem
                                                    key={c.id}
                                                    value={String(c.id)}
                                                >
                                                    {c.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.company_id} />
                                </div>

                                <div className="space-y-2">
                                    <Label htmlFor="system_id">System</Label>
                                    <Select
                                        value={data.system_id}
                                        onValueChange={(v) => {
                                            setData('system_id', v);
                                            setData('category_id', '');
                                        }}
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select system" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {systems.map((s) => (
                                                <SelectItem
                                                    key={s.id}
                                                    value={String(s.id)}
                                                >
                                                    {s.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.system_id} />
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="category_id">
                                        Category
                                    </Label>
                                    <Select
                                        value={data.category_id}
                                        onValueChange={(v) =>
                                            setData('category_id', v)
                                        }
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select category" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {filteredCategories.map((c) => (
                                                <SelectItem
                                                    key={c.id}
                                                    value={String(c.id)}
                                                >
                                                    {c.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.category_id} />
                                </div>

                                <div className="space-y-2">
                                    <Label htmlFor="priority">Priority</Label>
                                    <Select
                                        value={data.priority}
                                        onValueChange={(v) =>
                                            setData('priority', v)
                                        }
                                    >
                                        <SelectTrigger>
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="low">
                                                Low
                                            </SelectItem>
                                            <SelectItem value="medium">
                                                Medium
                                            </SelectItem>
                                            <SelectItem value="high">
                                                High
                                            </SelectItem>
                                            <SelectItem value="critical">
                                                Critical
                                            </SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.priority} />
                                </div>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="title">Title</Label>
                                <Input
                                    id="title"
                                    value={data.title}
                                    onChange={(e) =>
                                        setData('title', e.target.value)
                                    }
                                    onBlur={() => {
                                        checkDuplicates();
                                        fetchSuggestions();
                                    }}
                                    placeholder="Brief description of the issue"
                                />
                                <InputError message={errors.title} />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="description">Description</Label>
                                <textarea
                                    id="description"
                                    value={data.description}
                                    onChange={(e) =>
                                        setData('description', e.target.value)
                                    }
                                    onBlur={checkDuplicates}
                                    placeholder="Detailed description of the issue..."
                                    rows={5}
                                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
                                />
                                <InputError message={errors.description} />
                            </div>

                            {/* Dynamic fields based on system */}
                            {selectedSystem?.code === 'POLICY' && (
                                <div className="space-y-2">
                                    <Label>Policy Number</Label>
                                    <Input
                                        value={
                                            (data.metadata as any).policy_no ??
                                            ''
                                        }
                                        onChange={(e) =>
                                            setData('metadata', {
                                                ...data.metadata,
                                                policy_no: e.target.value,
                                            })
                                        }
                                        placeholder="Enter policy number"
                                    />
                                </div>
                            )}
                            {selectedSystem?.code === 'CLAIMS' && (
                                <div className="space-y-2">
                                    <Label>Claim Number</Label>
                                    <Input
                                        value={
                                            (data.metadata as any).claim_no ??
                                            ''
                                        }
                                        onChange={(e) =>
                                            setData('metadata', {
                                                ...data.metadata,
                                                claim_no: e.target.value,
                                            })
                                        }
                                        placeholder="Enter claim number"
                                    />
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    {/* Duplicate Detection */}
                    {duplicates.length > 0 && (
                        <Card className="border-orange-300 dark:border-orange-700">
                            <CardHeader>
                                <CardTitle className="text-orange-600">
                                    Possible Duplicates Found
                                </CardTitle>
                            </CardHeader>
                            <CardContent>
                                <ul className="space-y-2">
                                    {duplicates.map((d: any) => (
                                        <li
                                            key={d.id}
                                            className="flex items-center justify-between rounded-md border p-2 text-sm"
                                        >
                                            <span>
                                                <strong>{d.ticket_no}</strong> —{' '}
                                                {d.title}
                                            </span>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                onClick={() =>
                                                    router.visit(
                                                        `/tickets/${d.id}`,
                                                    )
                                                }
                                            >
                                                View
                                            </Button>
                                        </li>
                                    ))}
                                </ul>
                            </CardContent>
                        </Card>
                    )}

                    {/* Knowledge Base Suggestions */}
                    {suggestions.length > 0 && (
                        <Card className="border-blue-300 dark:border-blue-700">
                            <CardHeader>
                                <CardTitle className="text-blue-600">
                                    Knowledge Base Suggestions
                                </CardTitle>
                            </CardHeader>
                            <CardContent>
                                <ul className="space-y-2">
                                    {suggestions.map((s: any) => (
                                        <li
                                            key={s.id}
                                            className="rounded-md border p-3"
                                        >
                                            <h4 className="font-medium">
                                                {s.title}
                                            </h4>
                                            <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
                                                {s.content}
                                            </p>
                                        </li>
                                    ))}
                                </ul>
                            </CardContent>
                        </Card>
                    )}

                    <div className="flex gap-3">
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Creating...' : 'Create Ticket'}
                        </Button>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => router.visit('/tickets')}
                        >
                            Cancel
                        </Button>
                    </div>
                </form>
            </div>
        </>
    );
}