import type { RequestPayload } from '@inertiajs/core';
import { router } from '@inertiajs/react';
import { ArrowDown, ArrowUp, Copy, Pencil, X } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    clone as cloneEngine,
    reorder as reorderEngine,
    update as updateEngine,
} from '@/routes/catalog/engines';
import {
    clone as cloneTrim,
    reorder as reorderTrim,
    update as updateTrim,
} from '@/routes/catalog/trims';

const STATUSES = ['Draft', 'Current', 'Past', 'Archived'];

/*
 * PCM round 1 — per-row editing actions for trim/engine rows (BR Trims/
 * Engines: Shift, Clone/copy, status P014 + P023). Admin-only; rendered by
 * the body-type detail tabs. Rename is shown for trims (clone suffix is
 * meant to be corrected) and engines alike.
 */
export function EntityEditingActions({
    modelId,
    bodyTypeId,
    entityType,
    entity,
    isFirst,
    isLast,
    defaultName,
}: {
    modelId: number;
    bodyTypeId: number;
    entityType: 'trim' | 'engine';
    entity: { id: number; status: string };
    isFirst: boolean;
    isLast: boolean;
    defaultName: string;
}) {
    const [editingName, setEditingName] = useState<string | null>(null);
    const [busy, setBusy] = useState(false);

    const urls = {
        reorder:
            entityType === 'trim'
                ? reorderTrim({
                      model: modelId,
                      bodyType: bodyTypeId,
                      trim: entity.id,
                  })
                : reorderEngine({
                      model: modelId,
                      bodyType: bodyTypeId,
                      engine: entity.id,
                  }),
        clone:
            entityType === 'trim'
                ? cloneTrim({
                      model: modelId,
                      bodyType: bodyTypeId,
                      trim: entity.id,
                  })
                : cloneEngine({
                      model: modelId,
                      bodyType: bodyTypeId,
                      engine: entity.id,
                  }),
        update:
            entityType === 'trim'
                ? updateTrim({
                      model: modelId,
                      bodyType: bodyTypeId,
                      trim: entity.id,
                  })
                : updateEngine({
                      model: modelId,
                      bodyType: bodyTypeId,
                      engine: entity.id,
                  }),
    };

    const post = (
        url: typeof urls.reorder | typeof urls.clone,
        data: RequestPayload,
    ) => {
        setBusy(true);
        router.post(url as never, data, {
            preserveScroll: true,
            onFinish: () => setBusy(false),
        });
    };

    const patch = (data: RequestPayload) => {
        setBusy(true);
        router.patch(urls.update as never, data, {
            preserveScroll: true,
            onFinish: () => setBusy(false),
        });
    };

    const iconBtn =
        'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-slate-100 hover:text-astara-purple focus-visible:ring-2 focus-visible:ring-astara-orange focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30';

    return (
        <div className="flex shrink-0 items-center gap-1">
            <button
                type="button"
                disabled={isFirst || busy}
                aria-label="Move up"
                title="Move up"
                onClick={() => post(urls.reorder, { direction: 'up' })}
                className={iconBtn}
            >
                <ArrowUp size={13} />
            </button>
            <button
                type="button"
                disabled={isLast || busy}
                aria-label="Move down"
                title="Move down"
                onClick={() => post(urls.reorder, { direction: 'down' })}
                className={iconBtn}
            >
                <ArrowDown size={13} />
            </button>
            <button
                type="button"
                disabled={busy}
                aria-label="Clone / copy"
                title="Clone / copy"
                onClick={() => post(urls.clone, {})}
                className={iconBtn}
            >
                <Copy size={13} />
            </button>
            <button
                type="button"
                disabled={busy}
                aria-label="Rename"
                title="Rename"
                onClick={() => setEditingName(defaultName)}
                className={iconBtn}
            >
                <Pencil size={13} />
            </button>
            <Select
                value={entity.status}
                onValueChange={(value) => patch({ status: value })}
            >
                <SelectTrigger
                    size="sm"
                    className="h-7 w-[100px] bg-white text-[10px]"
                >
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    {STATUSES.map((status) => (
                        <SelectItem
                            key={status}
                            value={status}
                            className="text-xs"
                        >
                            {status}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>

            {editingName !== null && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
                    <div className="w-80 rounded-xl border border-[rgba(30,25,50,0.06)] bg-white p-5 shadow-xl">
                        <div className="mb-3 flex items-center justify-between">
                            <h3 className="text-xs font-bold tracking-widest text-astara-purple uppercase">
                                Rename {entityType}
                            </h3>
                            <button
                                type="button"
                                onClick={() => setEditingName(null)}
                                className="cursor-pointer text-gray-400 hover:text-gray-700"
                            >
                                <X size={16} />
                            </button>
                        </div>
                        <Input
                            value={editingName}
                            onChange={(event) =>
                                setEditingName(event.target.value)
                            }
                            className="mb-4 text-[13px]"
                            autoFocus
                        />
                        <div className="flex justify-end gap-2">
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => setEditingName(null)}
                            >
                                Cancel
                            </Button>
                            <Button
                                type="button"
                                size="sm"
                                onClick={() => {
                                    patch({
                                        [entityType === 'trim'
                                            ? 'trim_name'
                                            : 'engine_name']: editingName,
                                    });
                                    setEditingName(null);
                                }}
                            >
                                Save
                            </Button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}