import { Form, Head, useForm } from '@inertiajs/react';
import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';

import HtmlEditor from '@/components/html-editor';
import HeadingSmall from '@/components/heading-small';
import { SortableHeader, useSort } from '@/components/sortable-header';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import AppLayout from '@/layouts/app-layout';
import { destroy, disable, enable, index, store, update } from '@/routes/admin/suppliers';
import markets from '@/routes/admin/suppliers/markets';

type ImportScheduleFrequency =
    | 'hourly'
    | 'every_two_hours'
    | 'every_four_hours'
    | 'every_six_hours'
    | 'every_twelve_hours'
    | 'daily';

const importFrequencyLabels: Record<ImportScheduleFrequency, string> = {
    hourly: 'Every hour',
    every_two_hours: 'Every 2 hours',
    every_four_hours: 'Every 4 hours',
    every_six_hours: 'Every 6 hours',
    every_twelve_hours: 'Every 12 hours',
    daily: 'Once daily',
};

const importFrequencyOptions = Object.entries(importFrequencyLabels) as [ImportScheduleFrequency, string][];

type Supplier = {
    id: number;
    name: string;
    slug: string;
    website_url: string | null;
    logo_url: string | null;
    contact_email: string | null;
    api_url: string | null;
    api_username: string | null;
    api_password: string | null;
    api_key: string | null;
    about_text: string | null;
    is_enabled: boolean;
    auto_submit_enrollment: boolean;
    submit_enrollment_on_check_failure: boolean;
    import_schedule_enabled: boolean;
    import_schedule_frequency: ImportScheduleFrequency | null;
    realtime_product_refresh: boolean;
};

type Props = {
    suppliers: Supplier[];
};

type SupplierFormData = {
    name: string;
    slug: string;
    contact_email: string;
    website_url: string;
    logo_url: string;
    api_url: string;
    api_username: string;
    api_password: string;
    api_key: string;
    about_text: string;
    auto_submit_enrollment: boolean;
    submit_enrollment_on_check_failure: boolean;
    import_schedule_enabled: boolean;
    import_schedule_frequency: ImportScheduleFrequency | '';
    realtime_product_refresh: boolean;
};

const emptyForm: SupplierFormData = {
    name: '',
    slug: '',
    contact_email: '',
    website_url: '',
    logo_url: '',
    api_url: '',
    api_username: '',
    api_password: '',
    api_key: '',
    about_text: '',
    auto_submit_enrollment: false,
    submit_enrollment_on_check_failure: false,
    import_schedule_enabled: false,
    import_schedule_frequency: '',
    realtime_product_refresh: false,
};

function supplierToForm(s: Supplier): SupplierFormData {
    return {
        name: s.name,
        slug: s.slug,
        contact_email: s.contact_email ?? '',
        website_url: s.website_url ?? '',
        logo_url: s.logo_url ?? '',
        api_url: s.api_url ?? '',
        api_username: s.api_username ?? '',
        api_password: s.api_password ?? '',
        api_key: s.api_key ?? '',
        about_text: s.about_text ?? '',
        auto_submit_enrollment: s.auto_submit_enrollment,
        submit_enrollment_on_check_failure: s.submit_enrollment_on_check_failure,
        import_schedule_enabled: s.import_schedule_enabled,
        import_schedule_frequency: s.import_schedule_frequency ?? '',
        realtime_product_refresh: s.realtime_product_refresh,
    };
}

function FieldError({ message }: { message?: string }) {
    if (!message) return null;
    return <div className="text-xs text-red-600">{message}</div>;
}

function SupplierModal({
    open,
    onOpenChange,
    supplier,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    supplier: Supplier | null;
}) {
    const isEditing = supplier !== null;
    const form = useForm<SupplierFormData>(supplier ? supplierToForm(supplier) : emptyForm);
    const [showPassword, setShowPassword] = useState(false);

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();

        const options = {
            onSuccess: () => {
                onOpenChange(false);
                form.reset();
            },
        };

        if (isEditing) {
            form.put(update.url(supplier.id), options);
        } else {
            form.post(store.url(), options);
        }
    }

    const inputClass =
        'rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950';
    const labelClass = 'text-xs font-medium text-zinc-700 dark:text-zinc-300';

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-3xl">
                <DialogHeader>
                    <DialogTitle>
                        {isEditing ? 'Edit supplier' : 'Add supplier'}
                    </DialogTitle>
                </DialogHeader>

                <form onSubmit={handleSubmit} className="space-y-4 pt-2">
                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <div className="flex flex-col gap-1">
                            <label className={labelClass}>Name</label>
                            <input
                                name="name"
                                value={form.data.name}
                                onChange={(e) =>
                                    form.setData('name', e.target.value)
                                }
                                className={inputClass}
                                placeholder="Acme Energy"
                            />
                            <FieldError message={form.errors.name} />
                        </div>

                        <div className="flex flex-col gap-1">
                            <label className={labelClass}>Slug</label>
                            <input
                                name="slug"
                                value={form.data.slug}
                                onChange={(e) =>
                                    form.setData('slug', e.target.value)
                                }
                                className={inputClass}
                                placeholder="acme-energy"
                            />
                            <FieldError message={form.errors.slug} />
                        </div>

                        <div className="flex flex-col gap-1">
                            <label className={labelClass}>Contact email</label>
                            <input
                                name="contact_email"
                                type="email"
                                value={form.data.contact_email}
                                onChange={(e) =>
                                    form.setData(
                                        'contact_email',
                                        e.target.value,
                                    )
                                }
                                className={inputClass}
                                placeholder="contact@acme.com"
                            />
                            <FieldError message={form.errors.contact_email} />
                        </div>

                        <div className="flex flex-col gap-1">
                            <label className={labelClass}>Website URL</label>
                            <input
                                name="website_url"
                                type="url"
                                value={form.data.website_url}
                                onChange={(e) =>
                                    form.setData('website_url', e.target.value)
                                }
                                className={inputClass}
                                placeholder="https://acme.com"
                            />
                            <FieldError message={form.errors.website_url} />
                        </div>

                        <div className="flex flex-col gap-1 sm:col-span-2">
                            <label className={labelClass}>Logo URL</label>
                            <input
                                name="logo_url"
                                type="url"
                                value={form.data.logo_url}
                                onChange={(e) =>
                                    form.setData('logo_url', e.target.value)
                                }
                                className={inputClass}
                                placeholder="https://acme.com/logo.png"
                            />
                            <FieldError message={form.errors.logo_url} />
                        </div>
                    </div>

                    <div>
                        <p className="mb-2 text-xs font-medium text-zinc-500 uppercase dark:text-zinc-400">
                            API credentials
                        </p>
                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            <div className="flex flex-col gap-1 sm:col-span-2">
                                <label className={labelClass}>API URL</label>
                                <input
                                    name="api_url"
                                    type="url"
                                    value={form.data.api_url}
                                    onChange={(e) =>
                                        form.setData('api_url', e.target.value)
                                    }
                                    className={inputClass}
                                    placeholder="https://api.acme.com"
                                />
                                <FieldError message={form.errors.api_url} />
                            </div>

                            <div className="flex flex-col gap-1">
                                <label className={labelClass}>
                                    API username
                                </label>
                                <input
                                    name="api_username"
                                    value={form.data.api_username}
                                    onChange={(e) =>
                                        form.setData(
                                            'api_username',
                                            e.target.value,
                                        )
                                    }
                                    className={inputClass}
                                    placeholder="api_user"
                                />
                                <FieldError
                                    message={form.errors.api_username}
                                />
                            </div>

                            <div className="flex flex-col gap-1">
                                <label className={labelClass}>
                                    API password
                                </label>
                                <div className="flex gap-1">
                                    <input
                                        name="api_password"
                                        type={
                                            showPassword ? 'text' : 'password'
                                        }
                                        value={form.data.api_password}
                                        onChange={(e) =>
                                            form.setData(
                                                'api_password',
                                                e.target.value,
                                            )
                                        }
                                        className={inputClass + ' flex-1'}
                                        placeholder="••••••••"
                                    />
                                    <button
                                        type="button"
                                        onClick={() =>
                                            setShowPassword(!showPassword)
                                        }
                                        className="rounded-md border border-zinc-200 px-2 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-900"
                                    >
                                        {showPassword ? (
                                            <EyeOff className="size-4" />
                                        ) : (
                                            <Eye className="size-4" />
                                        )}
                                    </button>
                                </div>
                                <FieldError
                                    message={form.errors.api_password}
                                />
                            </div>

                            <div className="flex flex-col gap-1 sm:col-span-2">
                                <label className={labelClass}>API Key</label>
                                <input
                                    name="api_key"
                                    value={form.data.api_key}
                                    onChange={(e) =>
                                        form.setData('api_key', e.target.value)
                                    }
                                    className={inputClass}
                                    placeholder=""
                                />
                                <FieldError message={form.errors.api_key} />
                            </div>
                        </div>
                    </div>

                    <div className="flex flex-col gap-1">
                        <label className={labelClass}>About text</label>
                        <HtmlEditor
                            value={form.data.about_text}
                            onChange={(html) =>
                                form.setData('about_text', html)
                            }
                        />
                        <FieldError message={form.errors.about_text} />
                    </div>

                    <div className="flex items-center gap-2">
                        <input
                            id="auto_submit_enrollment"
                            type="checkbox"
                            checked={form.data.auto_submit_enrollment}
                            onChange={(e) => form.setData('auto_submit_enrollment', e.target.checked)}
                            className="size-4 rounded border-zinc-300 text-zinc-900 dark:border-zinc-600"
                        />
                        <label htmlFor="auto_submit_enrollment" className="text-sm text-zinc-700 dark:text-zinc-300">
                            Auto-submit enrollment to supplier
                        </label>
                    </div>

                    <div className="flex items-center gap-2">
                        <input
                            id="submit_enrollment_on_check_failure"
                            type="checkbox"
                            checked={form.data.submit_enrollment_on_check_failure}
                            onChange={(e) => form.setData('submit_enrollment_on_check_failure', e.target.checked)}
                            className="size-4 rounded border-zinc-300 text-zinc-900 dark:border-zinc-600"
                        />
                        <label htmlFor="submit_enrollment_on_check_failure" className="text-sm text-zinc-700 dark:text-zinc-300">
                            Submit enrollment even when credit/fraud check fails
                        </label>
                    </div>

                    <div>
                        <p className="mb-2 text-xs font-medium text-zinc-500 uppercase dark:text-zinc-400">
                            Product import schedule
                        </p>
                        <div className="space-y-3">
                            <div className="flex items-center gap-2">
                                <input
                                    id="import_schedule_enabled"
                                    type="checkbox"
                                    checked={form.data.import_schedule_enabled}
                                    onChange={(e) => form.setData('import_schedule_enabled', e.target.checked)}
                                    className="size-4 rounded border-zinc-300 text-zinc-900 dark:border-zinc-600"
                                />
                                <label htmlFor="import_schedule_enabled" className="text-sm text-zinc-700 dark:text-zinc-300">
                                    Enable automatic product imports
                                </label>
                            </div>
                            {form.data.import_schedule_enabled && (
                                <div className="flex flex-col gap-1">
                                    <label className={labelClass}>Import frequency</label>
                                    <select
                                        value={form.data.import_schedule_frequency}
                                        onChange={(e) => form.setData('import_schedule_frequency', e.target.value as ImportScheduleFrequency | '')}
                                        className={inputClass}
                                    >
                                        <option value="">Select a frequency…</option>
                                        {importFrequencyOptions.map(([value, label]) => (
                                            <option key={value} value={value}>{label}</option>
                                        ))}
                                    </select>
                                    <FieldError message={form.errors.import_schedule_frequency} />
                                </div>
                            )}
                            <div className="flex items-center gap-2">
                                <input
                                    id="realtime_product_refresh"
                                    type="checkbox"
                                    checked={form.data.realtime_product_refresh}
                                    onChange={(e) => form.setData('realtime_product_refresh', e.target.checked)}
                                    className="size-4 rounded border-zinc-300 text-zinc-900 dark:border-zinc-600"
                                />
                                <label htmlFor="realtime_product_refresh" className="text-sm text-zinc-700 dark:text-zinc-300">
                                    Refresh products in realtime during search
                                </label>
                            </div>
                        </div>
                    </div>

                    <div className="flex items-center gap-3 pt-2">
                        <button
                            type="submit"
                            disabled={form.processing}
                            className="rounded-md bg-zinc-900 px-3 py-2 text-sm font-medium text-white disabled:opacity-60 dark:bg-zinc-100 dark:text-zinc-900"
                        >
                            {isEditing ? 'Save changes' : 'Add supplier'}
                        </button>
                        <button
                            type="button"
                            onClick={() => onOpenChange(false)}
                            className="text-sm text-zinc-600 hover:underline dark:text-zinc-400"
                        >
                            Cancel
                        </button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

const breadcrumbs = [{ title: 'Suppliers', href: index.url() }];

export default function Suppliers({ suppliers }: Props) {
    const [modalSupplier, setModalSupplier] = useState<Supplier | null | undefined>(undefined);
    const isModalOpen = modalSupplier !== undefined;
    const { sorted, sortColumn, sortDirection, toggleSort } = useSort(suppliers, 'name');

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Suppliers" />

            <h1 className="sr-only">Suppliers</h1>

            <div className="space-y-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <HeadingSmall
                        title="Suppliers"
                        description="Manage energy suppliers and their details."
                    />
                    <div className="flex flex-wrap items-center gap-2">
                        <a
                            href={markets.export.url()}
                            className="rounded-md border border-zinc-200 px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-900"
                        >
                            Export Markets
                        </a>
                        <button
                            type="button"
                            onClick={() => setModalSupplier(null)}
                            className="rounded-md bg-zinc-900 px-3 py-2 text-sm font-medium text-white dark:bg-zinc-100 dark:text-zinc-900"
                        >
                            Add supplier
                        </button>
                    </div>
                </div>

                {/* Suppliers table */}
                <div className="overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
                    <div className="overflow-x-auto">
                        <table className="w-full text-left text-sm">
                            <thead className="border-b border-zinc-200 text-xs uppercase text-zinc-600 dark:border-zinc-800 dark:text-zinc-400">
                                <tr>
                                    <SortableHeader label="Name" column="name" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <SortableHeader label="Slug" column="slug" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <SortableHeader label="Contact" column="contact_email" sortColumn={sortColumn} sortDirection={sortDirection} onSort={toggleSort} />
                                    <th className="px-4 py-3">Website</th>
                                    <th className="px-4 py-3">Status</th>
                                    <th className="px-4 py-3">Auto Submit</th>
                                    <th className="px-4 py-3" />
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                                {sorted.map((s) => (
                                    <tr key={s.id}>
                                        <td className="px-4 py-3 font-medium">{s.name}</td>
                                        <td className="px-4 py-3 font-mono text-xs">{s.slug}</td>
                                        <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">
                                            {s.contact_email ?? '—'}
                                        </td>
                                        <td className="px-4 py-3">
                                            {s.website_url ? (
                                                <a
                                                    href={s.website_url}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="text-zinc-700 hover:underline dark:text-zinc-300"
                                                >
                                                    {s.website_url}
                                                </a>
                                            ) : (
                                                <span className="text-zinc-400">—</span>
                                            )}
                                        </td>
                                        <td className="px-4 py-3">
                                            {s.is_enabled ? (
                                                <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
                                                    Enabled
                                                </span>
                                            ) : (
                                                <span className="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
                                                    Disabled
                                                </span>
                                            )}
                                        </td>
                                        <td className="px-4 py-3">
                                            {s.auto_submit_enrollment ? (
                                                <span className="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                                    On
                                                </span>
                                            ) : (
                                                <span className="inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                                                    Off
                                                </span>
                                            )}
                                        </td>
                                        <td className="px-4 py-3 text-right">
                                            <div className="flex items-center justify-end gap-4">
                                                <button
                                                    type="button"
                                                    onClick={() => setModalSupplier(s)}
                                                    className="text-sm text-zinc-700 hover:underline dark:text-zinc-300"
                                                >
                                                    Edit
                                                </button>
                                                <Form
                                                    method="post"
                                                    action={s.is_enabled ? disable.url(s.id) : enable.url(s.id)}
                                                >
                                                    {({ processing }) => (
                                                        <button
                                                            type="submit"
                                                            disabled={processing}
                                                            className={`text-sm hover:underline disabled:opacity-60 ${s.is_enabled ? 'text-amber-700 dark:text-amber-400' : 'text-green-700 dark:text-green-400'}`}
                                                        >
                                                            {s.is_enabled ? 'Disable' : 'Enable'}
                                                        </button>
                                                    )}
                                                </Form>
                                                <Form method="delete" action={destroy.url(s.id)}>
                                                    {({ processing }) => (
                                                        <button
                                                            type="submit"
                                                            disabled={processing}
                                                            className="text-sm text-red-700 hover:underline disabled:opacity-60 dark:text-red-400"
                                                        >
                                                            Delete
                                                        </button>
                                                    )}
                                                </Form>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    {suppliers.length === 0 && (
                        <div className="p-4 text-sm text-zinc-600 dark:text-zinc-400">
                            No suppliers yet.
                        </div>
                    )}
                </div>
            </div>

            <SupplierModal
                key={modalSupplier?.id ?? 'new'}
                open={isModalOpen}
                onOpenChange={(open) => { if (!open) setModalSupplier(undefined); }}
                supplier={modalSupplier ?? null}
            />
        </AppLayout>
    );
}