import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Modal } from "../../../components/ui/modal";
import Button from "../../../components/ui/button/Button";
import ConfirmDialog from "../../../components/common/ConfirmDialog";
import AlertModal from "../../../components/ui/alert/AlertModal";

export default function Modals() {
  const [isDefaultModalOpen, setIsDefaultModalOpen] = useState(false);
  const [isCenteredModalOpen, setIsCenteredModalOpen] = useState(false);
  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
  const [isFullScreenModalOpen, setIsFullScreenModalOpen] = useState(false);
  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false);
  const [isInfoAlertOpen, setIsInfoAlertOpen] = useState(false);
  const [isWarningAlertOpen, setIsWarningAlertOpen] = useState(false);
  const [isDangerAlertOpen, setIsDangerAlertOpen] = useState(false);

  return (
    <>
      <PageMeta
        title="React.js Modals Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Modals Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Default Modal">
          <Button onClick={() => setIsDefaultModalOpen(true)}>
            Open Default Modal
          </Button>
          <Modal
            isOpen={isDefaultModalOpen}
            onClose={() => setIsDefaultModalOpen(false)}
            className="max-w-lg"
          >
            <div className="p-6">
              <h2 className="text-xl font-bold mb-4">Default Modal Title</h2>
              <p>This is a default modal. It can contain any content.</p>
              <div className="flex justify-end gap-4 mt-6">
                <Button
                  variant="outline"
                  onClick={() => setIsDefaultModalOpen(false)}
                >
                  Close
                </Button>
                <Button variant="primary">Save Changes</Button>
              </div>
            </div>
          </Modal>
        </ComponentCard>

        <ComponentCard title="Centered Modal">
          <Button onClick={() => setIsCenteredModalOpen(true)}>
            Open Centered Modal
          </Button>
          <Modal
            isOpen={isCenteredModalOpen}
            onClose={() => setIsCenteredModalOpen(false)}
            className="max-w-md"
          >
            <div className="p-6 text-center">
              <h2 className="text-xl font-bold mb-4">Centered Modal Title</h2>
              <p>This modal is vertically and horizontally centered.</p>
              <Button
                onClick={() => setIsCenteredModalOpen(false)}
                className="mt-6"
              >
                Close
              </Button>
            </div>
          </Modal>
        </ComponentCard>

        <ComponentCard title="Full Screen Modal">
          <Button onClick={() => setIsFullScreenModalOpen(true)}>
            Open Full Screen Modal
          </Button>
          <Modal
            isOpen={isFullScreenModalOpen}
            onClose={() => setIsFullScreenModalOpen(false)}
            isFullscreen={true}
          >
            <div className="p-6 bg-white dark:bg-gray-900 w-full h-full flex flex-col">
              <h2 className="text-2xl font-bold mb-4">Full Screen Modal</h2>
              <p className="flex-grow">
                This modal takes up the entire screen. Useful for complex forms
                or detailed views.
              </p>
              <Button
                onClick={() => setIsFullScreenModalOpen(false)}
                className="mt-6 self-end"
              >
                Close Full Screen
              </Button>
            </div>
          </Modal>
        </ComponentCard>

        <ComponentCard title="Confirmation Dialog">
          <Button
            onClick={() => setIsConfirmDialogOpen(true)}
            variant="danger"
          >
            Open Confirmation Dialog
          </Button>
          <ConfirmDialog
            isOpen={isConfirmDialogOpen}
            onClose={() => setIsConfirmDialogOpen(false)}
            onConfirm={() => {
              alert("Action Confirmed!");
              setIsConfirmDialogOpen(false);
            }}
            title="Confirm Action"
            message="Are you sure you want to proceed with this action? It cannot be undone."
            confirmText="Proceed"
            variant="danger"
          />
        </ComponentCard>

        <ComponentCard title="Alert Modals">
          <div className="flex flex-wrap gap-3">
            <Button
              onClick={() => setIsSuccessAlertOpen(true)}
              variant="success"
            >
              Success Alert
            </Button>
            <Button onClick={() => setIsInfoAlertOpen(true)} variant="info">
              Info Alert
            </Button>
            <Button
              onClick={() => setIsWarningAlertOpen(true)}
              variant="warning"
            >
              Warning Alert
            </Button>
            <Button
              onClick={() => setIsDangerAlertOpen(true)}
              variant="danger"
            >
              Danger Alert
            </Button>
          </div>
          <AlertModal
            isOpen={isSuccessAlertOpen}
            onClose={() => setIsSuccessAlertOpen(false)}
            title="Success!"
            message="Your operation was completed successfully."
            variant="success"
          />
          <AlertModal
            isOpen={isInfoAlertOpen}
            onClose={() => setIsInfoAlertOpen(false)}
            title="Information"
            message="This is an informational message for the user."
            variant="info"
          />
          <AlertModal
            isOpen={isWarningAlertOpen}
            onClose={() => setIsWarningAlertOpen(false)}
            title="Warning!"
            message="Please be careful, this action has consequences."
            variant="warning"
          />
          <AlertModal
            isOpen={isDangerAlertOpen}
            onClose={() => setIsDangerAlertOpen(false)}
            title="Danger!"
            message="This is a critical alert. Proceed with caution."
            variant="danger"
          />
        </ComponentCard>
      </div>
    </>
  );
}

