since3-portal/modules/shared/ui/components/info-dialogs.tsx

"use client";

import { useActionState, useState } from "react";
import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { deleteInfoEntry, saveProduct, saveTask, type InfoActionState } from "@/modules/shared/actions/info";
import {
    CATEGORY_LABELS,
    DEFAULT_STATUS_MESSAGES,
    PRODUCT_CATEGORIES,
    PRODUCT_STATUSES,
    PRODUCT_STATUS_LABELS,
    TASK_STATUSES,
    TASK_STATUS_LABELS,
    type Product,
    type Task,
} from "@/modules/shared/schemas/info";
import { toIsoDate } from "@/modules/shared/lib/invoice-math";

type FormAction = (prev: InfoActionState, formData: FormData) => Promise<InfoActionState>;

export const selectClassName =
    "flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50";

function ActionForm({
    action,
    hidden,
    submitLabel,
    onDone,
    children,
}: {
    action: FormAction;
    hidden: Record<string, string>;
    submitLabel: string;
    onDone: () => void;
    children: React.ReactNode;
}) {
    async function run(prev: InfoActionState, formData: FormData) {
        const result = await action(prev, formData);
        if (result && "success" in result) onDone();
        return result;
    }

    const [state, formAction, pending] = useActionState(run, undefined);

    return (
        <form action={formAction}>
            {Object.entries(hidden).map(([name, value]) => (
                <input key={name} type="hidden" name={name} value={value} />
            ))}
            <FieldGroup>
                {children}
                {state && "error" in state && <p className="text-sm text-destructive">{state.error}</p>}
            </FieldGroup>
            <DialogFooter className="mt-6">
                <Button type="submit" disabled={pending}>
                    {pending ? "Wird gespeichert..." : submitLabel}
                </Button>
            </DialogFooter>
        </form>
    );
}

function FormDialog({
    title,
    trigger,
    action,
    hidden,
    submitLabel = "Speichern",
    children,
}: {
    title: string;
    trigger: React.ReactElement;
    action: FormAction;
    hidden: Record<string, string>;
    submitLabel?: string;
    children: React.ReactNode;
}) {
    const [open, setOpen] = useState(false);
    const [instanceKey, setInstanceKey] = useState(0);

    function handleOpenChange(nextOpen: boolean) {
        setOpen(nextOpen);
        if (!nextOpen) setInstanceKey((key) => key + 1);
    }

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogTrigger render={trigger} />
            <DialogContent className="sm:max-w-lg">
                <DialogHeader className="mb-4">
                    <DialogTitle>{title}</DialogTitle>
                </DialogHeader>
                <ActionForm
                    key={instanceKey}
                    action={action}
                    hidden={hidden}
                    submitLabel={submitLabel}
                    onDone={() => handleOpenChange(false)}
                >
                    {children}
                </ActionForm>
            </DialogContent>
        </Dialog>
    );
}

const editTrigger = (
    <Button variant="ghost" size="icon-sm" aria-label="Bearbeiten">
        <PencilIcon className="size-4" />
    </Button>
);

function createTrigger(label: string) {
    return (
        <Button variant="outline" size="sm">
            <PlusIcon className="size-4" /> {label}
        </Button>
    );
}

export function ProductDialog({ profileId, product }: { profileId: string; product?: Product }) {
    return (
        <FormDialog
            title={product ? "Produkt bearbeiten" : "Neues Produkt"}
            trigger={product ? editTrigger : createTrigger("Erstellen")}
            action={saveProduct}
            hidden={{ profileId, id: product?.id ?? "" }}
            submitLabel={product ? "Speichern" : "Erstellen"}
        >
            <ProductFields product={product} />
        </FormDialog>
    );
}

function ProductFields({ product }: { product?: Product }) {
    const [status, setStatus] = useState<Product["status"]>(product?.status ?? "online");

    return (
        <>
            <div className="grid gap-4 sm:grid-cols-2">
                <Field>
                    <FieldLabel htmlFor="product-name">Produkt <span className="text-destructive">*</span></FieldLabel>
                    <Input id="product-name" name="name" defaultValue={product?.name ?? ""} placeholder="z. B. Webseite" required />
                </Field>
                <Field>
                    <FieldLabel htmlFor="product-category">Kategorie</FieldLabel>
                    <select id="product-category" name="category" defaultValue={product?.category ?? "website"} className={selectClassName}>
                        {PRODUCT_CATEGORIES.map((category) => (
                            <option key={category} value={category}>{CATEGORY_LABELS[category]}</option>
                        ))}
                    </select>
                </Field>
            </div>
            <Field>
                <FieldLabel htmlFor="product-url">Link / Adresse</FieldLabel>
                <Input id="product-url" name="url" defaultValue={product?.url ?? ""} placeholder="www.mustermann-gmbh.de, Server, info@mustermann.de" />
            </Field>
            <div className="grid gap-4 sm:grid-cols-2">
                <Field>
                    <FieldLabel htmlFor="product-status">Status</FieldLabel>
                    <select
                        id="product-status"
                        name="status"
                        value={status}
                        onChange={(event) => setStatus(event.target.value as Product["status"])}
                        className={selectClassName}
                    >
                        {PRODUCT_STATUSES.map((value) => (
                            <option key={value} value={value}>{PRODUCT_STATUS_LABELS[value]}</option>
                        ))}
                    </select>
                </Field>
                <Field>
                    <FieldLabel htmlFor="product-uptime">Uptime 30 Tage (%)</FieldLabel>
                    <Input
                        id="product-uptime"
                        name="uptime30d"
                        inputMode="decimal"
                        defaultValue={product?.uptime30d?.toLocaleString("de-DE") ?? ""}
                        placeholder="99,98"
                    />
                    <FieldDescription>Nur für nicht prüfbare Produkte. Bei Web-Adressen wird die Uptime gemessen.</FieldDescription>
                </Field>
            </div>
            <Field>
                <FieldLabel htmlFor="product-message">Statusmeldung</FieldLabel>
                <Input
                    id="product-message"
                    name="statusMessage"
                    defaultValue={product?.statusMessage ?? ""}
                    placeholder={DEFAULT_STATUS_MESSAGES[status]}
                />
                <FieldDescription>Leer lassen für den Standardtext „{DEFAULT_STATUS_MESSAGES[status]}“.</FieldDescription>
            </Field>
        </>
    );
}

export function TaskDialog({ profileId, task }: { profileId: string; task?: Task }) {
    return (
        <FormDialog
            title={task ? "Vorgang bearbeiten" : "Neuer Vorgang"}
            trigger={task ? editTrigger : createTrigger("Hinzufügen")}
            action={saveTask}
            hidden={{ profileId, id: task?.id ?? "" }}
            submitLabel={task ? "Speichern" : "Hinzufügen"}
        >
            <Field>
                <FieldLabel htmlFor="task-name">Vorgang <span className="text-destructive">*</span></FieldLabel>
                <Input id="task-name" name="name" defaultValue={task?.name ?? ""} placeholder="z. B. Suchmaschinenoptimierung Startseite" required />
            </Field>
            <Field>
                <FieldLabel htmlFor="task-description">Beschreibung</FieldLabel>
                <Input id="task-description" name="description" defaultValue={task?.description ?? ""} placeholder="z. B. Meta-Texte & Ladezeit" />
            </Field>
            <div className="grid gap-4 sm:grid-cols-2">
                <Field>
                    <FieldLabel htmlFor="task-status">Status</FieldLabel>
                    <select id="task-status" name="status" defaultValue={task?.status ?? "in_progress"} className={selectClassName}>
                        {TASK_STATUSES.map((value) => (
                            <option key={value} value={value}>{TASK_STATUS_LABELS[value]}</option>
                        ))}
                    </select>
                </Field>
                <Field>
                    <FieldLabel htmlFor="task-since">Seit / ab</FieldLabel>
                    <Input id="task-since" name="since" type="date" defaultValue={task?.since ?? toIsoDate(new Date())} required />
                </Field>
            </div>
            <FieldDescription>
                „In Arbeit“ zeigt „seit …“, „Geplant“ zeigt „ab …“. „Erledigt“ blendet den Vorgang aus.
            </FieldDescription>
        </FormDialog>
    );
}

export function DeleteInfoDialog({
    kind,
    profileId,
    id,
    label,
}: {
    kind: "product" | "task" | "note";
    profileId: string;
    id: string;
    label: string;
}) {
    const [open, setOpen] = useState(false);
    const [pending, setPending] = useState(false);
    const [error, setError] = useState<string | null>(null);

    async function handleDelete() {
        setPending(true);
        setError(null);
        const result = await deleteInfoEntry(kind, profileId, id);
        setPending(false);

        if (result && "error" in result) {
            setError(result.error);
            return;
        }
        setOpen(false);
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Löschen" />}>
                <Trash2Icon className="size-4" />
            </DialogTrigger>
            <DialogContent>
                <DialogHeader className="mb-4">
                    <DialogTitle>Eintrag löschen</DialogTitle>
                    <DialogDescription>
                        Möchtest du <span className="font-medium text-foreground">{label}</span> wirklich löschen?
                        Diese Aktion kann nicht rückgängig gemacht werden.
                    </DialogDescription>
                </DialogHeader>
                {error && <p className="text-sm text-destructive">{error}</p>}
                <DialogFooter>
                    <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={pending}>
                        Abbrechen
                    </Button>
                    <Button type="button" variant="destructive" onClick={handleDelete} disabled={pending}>
                        {pending ? "Wird gelöscht..." : "Löschen"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}