import { QuoteStatusBadge } from "@/components";
import { cn } from "@/lib/utils";
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Label,
  Switch,
} from "@/ui";
import { DialogDescription } from "@radix-ui/react-dialog";
import { t } from "i18next";
import { RefreshCwIcon } from "lucide-react";
import { useEffect, useState } from "react";

const QuoteStatus = ["draft", "ready", "delivered", "accepted", "rejected", "archived"];

type TQuoteStatus = "draft" | "ready" | "delivered" | "accepted" | "rejected" | "archived";

const quoteStatusTransitions: Record<TQuoteStatus, TQuoteStatus[]> = {
  draft: ["draft", "ready", "archived"],
  ready: ["ready", "delivered", "archived"],
  delivered: ["delivered", "accepted", "rejected", "archived"],
  accepted: ["accepted", "rejected", "archived"],
  rejected: ["rejected", "accepted", "archived"],
  archived: ["archived", "draft", "ready", "delivered", "accepted", "rejected"],
};

export const QuoteStatusEditor = ({
  type = "button",
  status,
  onChangeStatus,
}: {
  type?: "button" | "badge";
  status: string;
  onChangeStatus: (newStatus: string, oldStatus: string) => void;
}) => {
  const [newStatus, setNewStatus] = useState<string>(status);

  const changeStatus = (newStatus: string) => setNewStatus(newStatus);

  useEffect(() => {
    if (status) {
      setNewStatus(status);
    }
  }, [status]);

  const handleChangeStatus = () => {
    if (newStatus !== status) {
      onChangeStatus(newStatus, status);
    }
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        {type === "button" ? (
          <Button size='sm' variant='outline' className='h-8 gap-1'>
            <RefreshCwIcon className='h-3.5 w-3.5' />
            <span className='sr-only md:not-sr-only md:whitespace-nowrap'>
              {t("quotes.quote_status_editor.trigger_button")}
            </span>
          </Button>
        ) : (
          <QuoteStatusBadge status={status} isEditable />
        )}
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("quotes.quote_status_editor.title")}</DialogTitle>
        </DialogHeader>
        <DialogDescription></DialogDescription>

        <div className='grid gap-4 py-4'>
          {QuoteStatus.map((_status) => {
            const isDisabled = !quoteStatusTransitions[status as TQuoteStatus].includes(
              _status as TQuoteStatus
            );

            return (
              <div key={_status} className='flex items-start space-x-4'>
                <Switch
                  id={_status}
                  checked={newStatus === _status}
                  onCheckedChange={() => changeStatus(_status)}
                  disabled={isDisabled}
                />

                <div className='grid gap-1.5 leading-none'>
                  <Label
                    htmlFor={_status}
                    className={cn("font-medium", isDisabled ? "text-input" : "text-foreground")}
                  >
                    {t(`quotes.quote_status_editor.status.${_status}.title`)}
                  </Label>
                  <p className={cn("text-sm", isDisabled ? "text-input" : "text-muted-foreground")}>
                    {t(`quotes.quote_status_editor.status.${_status}.description`)}
                  </p>
                </div>
              </div>
            );
          })}
        </div>

        <DialogFooter className='pt-6 border-t'>
          <DialogClose asChild>
            <Button type='button' variant='secondary'>
              {t("common.cancel")}
            </Button>
          </DialogClose>

          <DialogClose asChild>
            <Button onClick={handleChangeStatus} disabled={newStatus === status}>
              {t("quotes.quote_status_editor.submit_button")}
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
