"use client";

import { FC, ReactNode, useState } from "react";
import { BillingLocation } from "../lib/db-types";
import { deleteLocationById } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import Link from "next/link";
import { useTranslations } from "next-intl";

export interface LocationDeleteFormProps {
    /** location which should be deleted */
    location: BillingLocation
}

export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
{
    const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth);
    const [ , dispatch ] = useFormState(handleAction, null);
    const t = useTranslations("location-delete-form");
    const [deleteInSubsequentMonths, setDeleteInSubsequentMonths] = useState(false);

    return(
        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
            <div className="card-body">
                <form action={dispatch}>
                    <p className="py-6 px-6">
                    {
                        t.rich("text", {
                            name:location.name,
                            strong: (chunks:ReactNode) => <strong>{chunks}</strong>,
                        })
                    }
                    </p>
                    
                    <div className="form-control">
                        <label className="label cursor-pointer justify-center gap-4">
                            <span className="label-text">{t("delete-in-subsequent-months")}</span> 
                            <input 
                                type="checkbox" 
                                name="deleteInSubsequentMonths" 
                                className="toggle toggle-error"
                                checked={deleteInSubsequentMonths}
                                onChange={(e) => setDeleteInSubsequentMonths(e.target.checked)}
                            />
                        </label>
                    </div>
                    
                    {deleteInSubsequentMonths && (
                        <div className="border-l-4 border-error bg-error/10 p-4 mt-4 rounded-r max-w-[24rem]">
                            <div className="flex items-start gap-3">
                                <span className="text-xl flex-shrink-0">⚠️</span>
                                <div className="flex-1 min-w-0">
                                    <h3 className="font-bold text-error break-words">{t("warning-title")}</h3>
                                    <div className="text-sm text-error/80 break-words">{t("warning-message")}</div>
                                </div>
                            </div>
                        </div>
                    )}
                    <div className="pt-4 text-center">
                        <button className="btn btn-primary w-[5.5em]">{t("confirm-button")}</button>
                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>{t("cancel-button")}</Link>
                    </div>
                </form>
            </div>
        </div>
    );
}


export const LocationDeleteFormSkeleton:FC = () =>
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
    <p className="py-6 px-6"></p>
    <div className="pt-4 text-center">
        <div className="btn skeleton w-[5.5em]"></div>
        <div className="btn ml-3 skeleton w-[5.5em]"></div>
    </div>
</div>
</div>