import { Link, router } from '@inertiajs/react';
import {
    Calendar,
    ExternalLink,
    MapPin,
    Pencil,
    Plus,
    Smartphone,
    Store,
} from 'lucide-react';
import { useState } from 'react';
import { PageHeader } from '@/components/shared/page-header';
import { SectionCard } from '@/components/shared/section-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { formatCount } from '@/lib/catalog';
import { cn } from '@/lib/utils';
import { show as brandShow } from '@/routes/catalog/lead-capture/brand';
import { show as eventShow } from '@/routes/catalog/lead-capture/event';
import type {
    LeadCaptureIndexProps,
    LeadCaptureEventRow,
} from '@/types/catalog';

export function LeadCaptureView({
    brands,
    events,
    dealers,
}: LeadCaptureIndexProps) {
    const [showEventForm, setShowEventForm] = useState(false);

    return (
        <div className="custom-scroll flex-1 overflow-y-auto">
            <PageHeader
                title="Lead Capture"
                subtitle="Content shown in the lead-capture PWA"
            >
                <a
                    href="http://localhost:3000"
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1.5 rounded-lg bg-astara-purple px-3 py-2 text-[11px] font-bold text-white transition-colors hover:bg-astara-purple/90"
                >
                    <ExternalLink size={14} />
                    Open app
                </a>
            </PageHeader>

            <div className="space-y-3 p-5">
                <SectionCard
                    title="Brands"
                    titleRight={
                        <span className="flex items-center gap-1 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                            <Smartphone size={12} />{' '}
                            {formatCount(brands.length)}
                        </span>
                    }
                >
                    <div className="divide-y divide-gray-50">
                        {brands.map((brand) => (
                            <Link
                                key={brand.id}
                                href={brandShow({ brand: brand.code })}
                                prefetch="hover"
                                className="group flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-gray-50"
                            >
                                <img
                                    src={brand.logo_url ?? undefined}
                                    alt={brand.name}
                                    className="h-8 w-8 shrink-0 rounded object-contain"
                                    onError={(e) => {
                                        (
                                            e.currentTarget as HTMLImageElement
                                        ).style.display = 'none';
                                    }}
                                />
                                <div className="min-w-0 flex-1">
                                    <p className="truncate text-[12px] font-bold text-astara-purple">
                                        {brand.name}
                                    </p>
                                    <p className="font-mono text-[10px] text-gray-400">
                                        {brand.code}
                                    </p>
                                </div>
                                <span className="text-[10px] font-bold text-gray-400">
                                    {formatCount(brand.models_count)} models
                                </span>
                                <ActiveBadge active={brand.active} />
                            </Link>
                        ))}
                    </div>
                </SectionCard>

                <SectionCard
                    title="Events"
                    titleRight={
                        <span className="flex items-center gap-1 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                            <Calendar size={12} /> {formatCount(events.length)}
                        </span>
                    }
                >
                    <div className="border-b border-gray-50 px-4 py-2">
                        {!showEventForm ? (
                            <Button
                                type="button"
                                size="sm"
                                variant="outline"
                                onClick={() => setShowEventForm(true)}
                            >
                                <Plus size={14} /> New event
                            </Button>
                        ) : (
                            <EventCreateForm
                                onClose={() => setShowEventForm(false)}
                            />
                        )}
                    </div>
                    <div className="divide-y divide-gray-50">
                        {events.map((event) => (
                            <EventRow key={event.id} event={event} />
                        ))}
                    </div>
                </SectionCard>

                <SectionCard
                    title="Dealers"
                    titleRight={
                        <span className="flex items-center gap-1 text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                            <Store size={12} /> {formatCount(dealers.length)}
                        </span>
                    }
                >
                    <div className="divide-y divide-gray-50">
                        {dealers.map((dealer) => (
                            <div
                                key={dealer.id}
                                className="flex items-center gap-3 px-4 py-3"
                            >
                                <MapPin
                                    size={14}
                                    className="shrink-0 text-gray-300"
                                />
                                <div className="min-w-0 flex-1">
                                    <p className="truncate text-[11px] font-bold text-gray-600">
                                        {dealer.name}
                                    </p>
                                    <p className="text-[10px] text-gray-400">
                                        {[dealer.city, dealer.phone]
                                            .filter(Boolean)
                                            .join(' · ')}
                                    </p>
                                </div>
                                <span className="text-[10px] font-bold text-gray-400">
                                    {formatCount(dealer.brands_count)} brands
                                </span>
                                <ActiveBadge active={dealer.active} />
                            </div>
                        ))}
                    </div>
                </SectionCard>
            </div>
        </div>
    );
}

function ActiveBadge({ active }: { active: boolean }) {
    return (
        <span
            className={cn(
                'inline-flex h-[16px] items-center rounded px-1.5 text-[8px] font-bold tracking-wider uppercase',
                active
                    ? 'bg-green-50 text-green-700'
                    : 'bg-gray-100 text-gray-400',
            )}
        >
            {active ? 'on' : 'off'}
        </span>
    );
}

function EventRow({ event }: { event: LeadCaptureEventRow }) {
    const toggle = () =>
        router.post(
            `/lead-capture/events/${event.id}/toggle`,
            {},
            { preserveScroll: true },
        );
    const destroy = () => {
        if (window.confirm(`Delete event "${event.name}"?`)) {
            router.delete(`/lead-capture/events/${event.id}`, {
                preserveScroll: true,
            });
        }
    };

    return (
        <div className="flex items-center gap-3 px-4 py-3">
            <Link
                href={eventShow({ event: event.id })}
                prefetch="hover"
                className="min-w-0 flex-1 cursor-pointer"
            >
                <p className="truncate text-[11px] font-bold text-astara-purple">
                    {event.name}
                </p>
                <p className="font-mono text-[10px] text-gray-400">
                    {event.start_date} → {event.end_date}
                </p>
            </Link>
            <span className="text-[10px] font-bold text-gray-400">
                {formatCount(event.brands_count)} brands
            </span>
            <Link
                href={eventShow({ event: event.id })}
                prefetch="hover"
                className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-astara-purple transition-colors hover:bg-astara-purple/10"
                title="Edit event (name, dates, brands)"
            >
                <Pencil size={13} />
            </Link>
            <button
                type="button"
                onClick={toggle}
                className={cn(
                    'inline-flex h-[18px] cursor-pointer items-center rounded px-1.5 text-[8px] font-bold tracking-wider uppercase transition-colors',
                    event.active
                        ? 'bg-green-50 text-green-700 hover:bg-red-50 hover:text-red-600'
                        : 'bg-gray-100 text-gray-400 hover:bg-green-50 hover:text-green-700',
                )}
                title={event.active ? 'Deactivate' : 'Activate'}
            >
                {event.active ? 'on' : 'off'}
            </button>
            <button
                type="button"
                onClick={destroy}
                className="cursor-pointer text-[10px] font-bold text-gray-300 transition-colors hover:text-red-600"
                title="Delete event"
            >
                Delete
            </button>
        </div>
    );
}

function EventCreateForm({ onClose }: { onClose: () => void }) {
    const [name, setName] = useState('');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        router.post(
            '/lead-capture/events',
            { name, start_date: startDate, end_date: endDate, brand_codes: [] },
            { preserveScroll: true, onSuccess: onClose },
        );
    };

    return (
        <form onSubmit={submit} className="flex flex-wrap items-end gap-2">
            <div>
                <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                    Name
                </label>
                <Input
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    required
                    className="h-8 w-48 bg-white text-xs"
                    placeholder="Auto Zürich 2026"
                />
            </div>
            <div>
                <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                    Start
                </label>
                <Input
                    type="date"
                    value={startDate}
                    onChange={(e) => setStartDate(e.target.value)}
                    required
                    className="h-8 w-36 bg-white text-xs"
                />
            </div>
            <div>
                <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                    End
                </label>
                <Input
                    type="date"
                    value={endDate}
                    onChange={(e) => setEndDate(e.target.value)}
                    required
                    className="h-8 w-36 bg-white text-xs"
                />
            </div>
            <div className="flex items-center gap-1.5">
                <Button type="submit" size="sm">
                    Create
                </Button>
                <Button
                    type="button"
                    size="sm"
                    variant="ghost"
                    onClick={onClose}
                >
                    Cancel
                </Button>
            </div>
        </form>
    );
}