"use client";

import {
  CustomDialog,
  CustomDialogButton,
} from "@/components/ui/dialogs/custom-dialog";
import { useState } from "react";

export function SuccessDialogExample(): React.ReactNode {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="rounded-lg bg-blue-500 px-4 py-2 text-white"
      >
        Show Success Dialog
      </button>

      <CustomDialog
        open={open}
        onOpenChange={setOpen}
        title="تم تغير كلمه المرور بنجاح!"
        description="يمكنك الان تسجيل الدخول مره أخري"
        illustration={
          <div className="size-[182px]">

            <svg
              viewBox="0 0 182 182"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="91" cy="91" r="60" fill="#1C75BC" opacity="0.1" />
              <circle cx="91" cy="91" r="45" fill="#1C75BC" />
              <path
                d="M70 91L85 106L112 79"
                stroke="white"
                strokeWidth="6"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
        }
        actions={
          <CustomDialogButton
            onClick={() => {
              setOpen(false);

            }}
            icon={
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.41667 6.29999V5.44999C7.41667 3.41665 9.06667 1.76665 11.1 1.76665H14.55C16.575 1.76665 18.2333 3.41665 18.2333 5.44999V14.5583C18.2333 16.5833 16.5833 18.2333 14.5583 18.2333H11.1083C9.075 18.2333 7.41667 16.5833 7.41667 14.55V13.7"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M1.66667 10H12.9167"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M10.7917 7.20834L13.5834 10L10.7917 12.7917"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            }
          >
            تسجيل الدخول
          </CustomDialogButton>
        }
      />
    </>
  );
}

export function ConfirmationDialogExample(): React.ReactNode {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="rounded-lg bg-red-500 px-4 py-2 text-white"
      >
        Show Confirmation Dialog
      </button>

      <CustomDialog
        open={open}
        onOpenChange={setOpen}
        title="هل أنت متأكد؟"
        description="سيتم حذف هذا العنصر بشكل نهائي ولا يمكن التراجع عن هذا الإجراء"
        illustration={
          <div className="size-[120px]">
            <svg
              viewBox="0 0 120 120"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="60" cy="60" r="60" fill="#FEE2E2" />
              <path
                d="M60 40V70M60 80H60.01"
                stroke="#DC2626"
                strokeWidth="6"
                strokeLinecap="round"
              />
            </svg>
          </div>
        }
        actions={
          <div className="flex w-full gap-3">
            <CustomDialogButton
              variant="secondary"
              onClick={() => setOpen(false)}
            >
              إلغاء
            </CustomDialogButton>
            <CustomDialogButton
              onClick={() => {

                setOpen(false);
              }}
            >
              تأكيد الحذف
            </CustomDialogButton>
          </div>
        }
      />
    </>
  );
}

export function InfoDialogExample(): React.ReactNode {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="rounded-lg bg-blue-500 px-4 py-2 text-white"
      >
        Show Info Dialog
      </button>

      <CustomDialog
        open={open}
        onOpenChange={setOpen}
        title="معلومات مهمة"
        description="هذا مثال على مربع حوار معلوماتي يمكن استخدامه لعرض معلومات مهمة للمستخدم"
        illustration={
          <div className="size-[120px]">
            <svg
              viewBox="0 0 120 120"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="60" cy="60" r="60" fill="#DBEAFE" />
              <path
                d="M60 50V80M60 40H60.01"
                stroke="#1C75BC"
                strokeWidth="6"
                strokeLinecap="round"
              />
            </svg>
          </div>
        }
        actions={
          <CustomDialogButton onClick={() => setOpen(false)}>
            فهمت
          </CustomDialogButton>
        }
      />
    </>
  );
}

export function SimpleDialogExample(): React.ReactNode {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="rounded-lg bg-gray-500 px-4 py-2 text-white"
      >
        Show Simple Dialog
      </button>

      <CustomDialog
        open={open}
        onOpenChange={setOpen}
        title="عنوان بسيط"
        description="هذا مثال على مربع حوار بسيط بدون صورة توضيحية"
        actions={
          <CustomDialogButton onClick={() => setOpen(false)}>
            حسناً
          </CustomDialogButton>
        }
      />
    </>
  );
}

export function CustomDialogDemo(): React.ReactNode {
  return (
    <div
      className="flex min-h-screen flex-col items-center justify-center gap-4 p-8"
    >
      <h1 className="mb-8 text-2xl font-bold">Custom Dialog Examples</h1>
      <SuccessDialogExample />
      <ConfirmationDialogExample />
      <InfoDialogExample />
      <SimpleDialogExample />
    </div>
  );
}