import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import Alert from "../../../components/ui/alert/Alert";
import PageMeta from "../../../components/common/PageMeta";
import Button from "../../../components/ui/button/Button";

export default function Alerts() {
  const [notifications, setNotifications] = useState<
    Array<{ id: number; variant: "success" | "error" | "warning" | "info"; title: string; message: string }>
  >([]);

  const addNotification = (variant: "success" | "error" | "warning" | "info") => {
    const titles = {
      success: "Success!",
      error: "Error Occurred",
      warning: "Warning",
      info: "Information",
    };
    const messages = {
      success: "Operation completed successfully.",
      error: "Something went wrong. Please try again.",
      warning: "Please review this action carefully.",
      info: "Here's some useful information for you.",
    };

    const newNotification = {
      id: Date.now(),
      variant,
      title: titles[variant],
      message: messages[variant],
    };

    setNotifications((prev) => [...prev, newNotification]);

    // Auto-remove after 5 seconds
    setTimeout(() => {
      setNotifications((prev) => prev.filter((n) => n.id !== newNotification.id));
    }, 5000);
  };

  const removeNotification = (id: number) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id));
  };

  return (
    <>
      <PageMeta
        title="React.js Alerts Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Alerts Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        {/* Interactive Notifications */}
        <ComponentCard title="Interactive Notifications" desc="Click buttons to add notifications">
          <div className="flex flex-wrap gap-3 mb-4">
            <Button onClick={() => addNotification("success")} variant="primary">
              Add Success
            </Button>
            <Button onClick={() => addNotification("error")} variant="primary">
              Add Error
            </Button>
            <Button onClick={() => addNotification("warning")} variant="primary">
              Add Warning
            </Button>
            <Button onClick={() => addNotification("info")} variant="primary">
              Add Info
            </Button>
            {notifications.length > 0 && (
              <Button onClick={() => setNotifications([])} variant="outline">
                Clear All
              </Button>
            )}
          </div>

          {/* Notification Stack */}
          <div className="fixed top-4 right-4 z-50 space-y-2 max-w-md w-full pointer-events-none">
            {notifications.map((notification) => (
              <div
                key={notification.id}
                className="pointer-events-auto animate-in slide-in-from-top duration-300"
              >
                <div className="relative">
                  <Alert
                    variant={notification.variant}
                    title={notification.title}
                    message={notification.message}
                    showLink={false}
                  />
                  <button
                    onClick={() => removeNotification(notification.id)}
                    className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                  >
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M6 18L18 6M6 6l12 12"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </ComponentCard>

        {/* Static Alert Examples */}
        <ComponentCard title="Success Alert">
          <div className="space-y-4">
            <Alert
              variant="success"
              title="Success Message"
              message="Operation completed successfully."
              showLink={true}
              linkHref="/"
              linkText="Learn more"
            />
            <Alert
              variant="success"
              title="Success Message"
              message="Your changes have been saved."
              showLink={false}
            />
          </div>
        </ComponentCard>

        <ComponentCard title="Warning Alert">
          <div className="space-y-4">
            <Alert
              variant="warning"
              title="Warning Message"
              message="Be cautious when performing this action."
              showLink={true}
              linkHref="/"
              linkText="Learn more"
            />
            <Alert
              variant="warning"
              title="Warning Message"
              message="This action cannot be undone."
              showLink={false}
            />
          </div>
        </ComponentCard>

        <ComponentCard title="Error Alert">
          <div className="space-y-4">
            <Alert
              variant="error"
              title="Error Message"
              message="Something went wrong. Please try again."
              showLink={true}
              linkHref="/"
              linkText="Learn more"
            />
            <Alert
              variant="error"
              title="Error Message"
              message="Failed to save changes. Please check your connection."
              showLink={false}
            />
          </div>
        </ComponentCard>

        <ComponentCard title="Info Alert">
          <div className="space-y-4">
            <Alert
              variant="info"
              title="Info Message"
              message="Here's some useful information for you."
              showLink={true}
              linkHref="/"
              linkText="Learn more"
            />
            <Alert
              variant="info"
              title="Info Message"
              message="New features are available. Check them out!"
              showLink={false}
            />
          </div>
        </ComponentCard>
      </div>
    </>
  );
}