import { useState } from "react";
import { Button } from "@/shared/common/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogTrigger,
} from "@/shared/common/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/common/ui/select";
import { Textarea } from "@/shared/common/ui/textarea";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";

type Status = "pending" | "submitted" | "approved" | "adjusted" | "rejected";

interface ActionModalProps {
  documentId: string;
  onActionSubmit: (documentId: string, status: Status, remark: string) => void;
}

const ActionModal = ({ documentId, onActionSubmit }: ActionModalProps) => {
  const [open, setOpen] = useState(false);
  const [status, setStatus] = useState<Status>("approved");
  const [remark, setRemark] = useState("");
  const { t } = useTranslation();

  const handleSubmit = () => {
    onActionSubmit(documentId, status, remark);

    // Translate status for toast message
    const getTranslatedStatus = (status: Status): string => {
      switch (status) {
        case "approved":
          return t("actionModal.actions.approve");
        case "adjusted":
          return t("actionModal.actions.adjustment");
        case "rejected":
          return t("actionModal.actions.reject");
        case "pending":
          return t("actionModal.actions.pending");
        case "submitted":
          return t("actionModal.actions.submitted");
        default:
          return status;
      }
    };

    toast.success(
      t("actionModal.toast.success", {
        status: getTranslatedStatus(status),
      })
    );
    setOpen(false);
    setRemark("");
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline">
          {t("actionModal.trigger")}
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{t("actionModal.title")}</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 mt-2">
          <div>
            <label className="block text-sm font-medium mb-2">
              {t("actionModal.labels.selectAction")}
            </label>
            <Select
              value={status}
              onValueChange={(val) => setStatus(val as Status)}>
              <SelectTrigger className="w-full">
                <SelectValue
                  placeholder={t("actionModal.actions.selectPlaceholder")}
                />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="approved">
                  {t("actionModal.actions.approve")}
                </SelectItem>
                <SelectItem value="adjusted">
                  {t("actionModal.actions.adjustment")}
                </SelectItem>
                <SelectItem value="rejected">
                  {t("actionModal.actions.reject")}
                </SelectItem>
                <SelectItem value="pending">
                  {t("actionModal.actions.pending")}
                </SelectItem>
                <SelectItem value="submitted">
                  {t("actionModal.actions.submitted")}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              {t("actionModal.labels.remark")}
            </label>
            <Textarea
              value={remark}
              onChange={(e) => setRemark(e.target.value)}
              placeholder={t("actionModal.labels.remarkPlaceholder")}
              className="w-full"
            />
          </div>
        </div>

        <DialogFooter className="mt-4 flex justify-end gap-2">
          <Button variant="outline" onClick={() => setOpen(false)}>
            {t("actionModal.buttons.cancel")}
          </Button>
          <Button onClick={handleSubmit}>
            {t("actionModal.buttons.submit")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default ActionModal;
