import React, { useState } from 'react';
import AlertModal, { AlertModalVariant } from '../components/ui/alert/AlertModal';
import { Modal } from '../components/ui/modal';
import Button from '../components/ui/button/Button';
import { Dropdown } from '../components/ui/dropdown/Dropdown';
import { DropdownItem } from '../components/ui/dropdown/DropdownItem';
import { Pagination } from '../components/ui/pagination/Pagination';
import { Card, CardImage, CardTitle, CardDescription, CardAction, CardIcon } from '../components/ui/card/Card';
import ChartTab from '../components/common/ChartTab';
import PageMeta from '../components/common/PageMeta';

export default function Components() {
  // Alert modals state
  const [alertModal, setAlertModal] = useState<{
    isOpen: boolean;
    variant: AlertModalVariant;
  }>({
    isOpen: false,
    variant: 'info',
  });

  // Regular modals state
  const [defaultModal, setDefaultModal] = useState(false);
  const [centeredModal, setCenteredModal] = useState(false);
  const [formModal, setFormModal] = useState(false);
  const [fullScreenModal, setFullScreenModal] = useState(false);

  const openAlertModal = (variant: AlertModalVariant) => {
    setAlertModal({ isOpen: true, variant });
  };

  const alertMessages = {
    success: {
      title: 'Well Done!',
      message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
    },
    info: {
      title: 'Information Alert!',
      message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
    },
    warning: {
      title: 'Warning Alert!',
      message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
    },
    danger: {
      title: 'Danger Alert!',
      message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
    },
  };

  return (
    <>
      <PageMeta
        title="React.js Components Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Components Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <div className="grid grid-cols-1 gap-5 xl:grid-cols-2 xl:gap-6">
        {/* Default Modal Card */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Default Modal
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">
              <Button
                variant="primary"
                onClick={() => setDefaultModal(true)}
              >
                Open Modal
              </Button>
            </div>
          </div>
        </div>

        {/* Vertically Centered Modal Card */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Vertically Centered Modal
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">
              <Button
                variant="primary"
                onClick={() => setCenteredModal(true)}
              >
                Open Modal
              </Button>
            </div>
          </div>
        </div>

        {/* Form In Modal Card */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Form In Modal
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">
              <Button
                variant="primary"
                onClick={() => setFormModal(true)}
              >
                Open Modal
              </Button>
            </div>
          </div>
        </div>

        {/* Full Screen Modal Card */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Full Screen Modal
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">
              <Button
                variant="primary"
                onClick={() => setFullScreenModal(true)}
              >
                Open Modal
              </Button>
            </div>
          </div>
        </div>

        {/* Modal Based Alerts Card */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Modal Based Alerts
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">
              <div className="flex flex-wrap items-center gap-3">
                <button
                  onClick={() => openAlertModal('success')}
                  className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-success-500 shadow-theme-xs hover:bg-success-600 transition-colors"
                >
                  Success Alert
                </button>
                <button
                  onClick={() => openAlertModal('info')}
                  className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-blue-light-500 shadow-theme-xs hover:bg-blue-light-600 transition-colors"
                >
                  Info Alert
                </button>
                <button
                  onClick={() => openAlertModal('warning')}
                  className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-warning-500 shadow-theme-xs hover:bg-warning-600 transition-colors"
                >
                  Warning Alert
                </button>
                <button
                  onClick={() => openAlertModal('danger')}
                  className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-error-500 shadow-theme-xs hover:bg-error-600 transition-colors"
                >
                  Danger Alert
                </button>
              </div>
            </div>
          </div>
        </div>
        </div>

      {/* Dropdowns, Buttons Group, Ribbons, Spinners, Tabs, Tooltips, Pagination, Cards */}
      <DropdownsShowcase />
      <ButtonGroupsShowcase />
      <RibbonsShowcase />
      <SpinnersShowcase />
      <TabsShowcase />
      <TooltipsShowcase />
      <PaginationShowcase />
      <CardsShowcase />

      {/* Alert Modals */}
      <AlertModal
        isOpen={alertModal.isOpen}
        onClose={() => setAlertModal({ ...alertModal, isOpen: false })}
        title={alertMessages[alertModal.variant].title}
        message={alertMessages[alertModal.variant].message}
        variant={alertModal.variant}
      />

      {/* Default Modal */}
      <Modal
        isOpen={defaultModal}
        onClose={() => setDefaultModal(false)}
        className="max-w-md"
      >
        <div className="p-6">
          <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
            Modal Heading
          </h2>
          <p className="text-gray-600 dark:text-gray-400 mb-6">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
            euismod est quis mauris lacinia pharetra.
          </p>
          <div className="flex justify-end gap-4">
            <Button variant="outline" onClick={() => setDefaultModal(false)}>
              Close
            </Button>
            <Button variant="primary" onClick={() => setDefaultModal(false)}>
              Save Changes
            </Button>
          </div>
        </div>
      </Modal>

      {/* Vertically Centered Modal */}
      <Modal
        isOpen={centeredModal}
        onClose={() => setCenteredModal(false)}
        className="max-w-md"
      >
        <div className="p-6">
          <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
            Vertically Centered Modal
          </h2>
          <p className="text-gray-600 dark:text-gray-400 mb-6">
            This modal is centered vertically on the screen. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit.
          </p>
          <div className="flex justify-end gap-4">
            <Button variant="outline" onClick={() => setCenteredModal(false)}>
              Close
            </Button>
            <Button variant="primary" onClick={() => setCenteredModal(false)}>
              Save Changes
            </Button>
          </div>
        </div>
      </Modal>

      {/* Form In Modal */}
      <Modal
        isOpen={formModal}
        onClose={() => setFormModal(false)}
        className="max-w-2xl"
      >
        <div className="p-6">
          <h2 className="text-xl font-bold mb-6 text-gray-800 dark:text-white">
            Personal Information
          </h2>
          <form className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  First Name
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                  defaultValue="Emirhan"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Last Name
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                  defaultValue="Boruch"
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Email
                </label>
                <input
                  type="email"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                  defaultValue="emirhanboruch55@gmail.com"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Phone
                </label>
                <input
                  type="tel"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                  defaultValue="+09 363 398 46"
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Bio
              </label>
              <textarea
                rows={4}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                defaultValue="Team Manager"
              />
            </div>
            <div className="flex justify-end gap-4 pt-4">
              <Button variant="outline" onClick={() => setFormModal(false)}>
                Close
              </Button>
              <Button variant="primary" onClick={() => setFormModal(false)}>
                Save Changes
              </Button>
            </div>
          </form>
        </div>
      </Modal>

      {/* Full Screen Modal */}
      <Modal
        isOpen={fullScreenModal}
        onClose={() => setFullScreenModal(false)}
        className="max-w-4xl"
        isFullscreen={false}
      >
        <div className="p-8">
          <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
            Full Screen Modal
          </h2>
          <p className="text-gray-600 dark:text-gray-400 mb-6">
            This is a larger modal that takes up more screen space. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Pellentesque euismod est
            quis mauris lacinia pharetra.
          </p>
          <div className="flex justify-end gap-4">
            <Button variant="outline" onClick={() => setFullScreenModal(false)}>
              Close
            </Button>
            <Button variant="primary" onClick={() => setFullScreenModal(false)}>
              Save Changes
            </Button>
          </div>
        </div>
      </Modal>
      </div>
    </>
  );
}

// Dropdowns Showcase Component
function DropdownsShowcase() {
  const [dropdown1, setDropdown1] = useState(false);
  const [dropdown2, setDropdown2] = useState(false);
  const [dropdown3, setDropdown3] = useState(false);

  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Dropdowns</h3>
      </div>
      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
        <div className="space-y-6">
          {/* Default Dropdown */}
          <div className="relative inline-block">
            <button
              onClick={() => setDropdown1(!dropdown1)}
              className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
            >
              Dropdown Default
            </button>
            <Dropdown isOpen={dropdown1} onClose={() => setDropdown1(false)} className="w-48 p-2 mt-2">
              <DropdownItem onItemClick={() => setDropdown1(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                Edit
              </DropdownItem>
              <DropdownItem onItemClick={() => setDropdown1(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                Delete
              </DropdownItem>
            </Dropdown>
          </div>

          {/* Dropdown with Divider */}
          <div className="relative inline-block">
            <button
              onClick={() => setDropdown2(!dropdown2)}
              className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
            >
              Dropdown with Divider
            </button>
            <Dropdown isOpen={dropdown2} onClose={() => setDropdown2(false)} className="w-48 p-2 mt-2">
              <DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                Edit
              </DropdownItem>
              <DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                View
              </DropdownItem>
              <div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
              <DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                Delete
              </DropdownItem>
            </Dropdown>
          </div>

          {/* Dropdown with Icon */}
          <div className="relative inline-block">
            <button
              onClick={() => setDropdown3(!dropdown3)}
              className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
            >
              Dropdown with Icon
            </button>
            <Dropdown isOpen={dropdown3} onClose={() => setDropdown3(false)} className="w-48 p-2 mt-2">
              <DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                </svg>
                Edit
              </DropdownItem>
              <DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                View
              </DropdownItem>
              <div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
              <DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                </svg>
                Delete
              </DropdownItem>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  );
}

// Button Groups Showcase Component
function ButtonGroupsShowcase() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Button Groups</h3>
      </div>
      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
        <div className="space-y-6">
          {/* Default Button Group */}
          <div className="inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800">
            <button className="px-4 py-2 text-sm font-medium text-gray-700 rounded-l-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
              Left
            </button>
            <button className="px-4 py-2 text-sm font-medium text-gray-700 border-l border-r border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:border-gray-700 dark:hover:bg-white/5 dark:hover:text-white">
              Center
            </button>
            <button className="px-4 py-2 text-sm font-medium text-gray-700 rounded-r-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
              Right
            </button>
          </div>

          {/* Icon Button Group */}
          <div className="inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800">
            <button className="p-2 text-gray-700 rounded-l-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
              </svg>
            </button>
            <button className="p-2 text-gray-700 border-l border-r border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:border-gray-700 dark:hover:bg-white/5 dark:hover:text-white">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1z" clipRule="evenodd" />
              </svg>
            </button>
            <button className="p-2 text-gray-700 rounded-r-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M3 10a1 1 0 011 1h12a1 1 0 110-2H4a1 1 0 01-1-1z" clipRule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Ribbons Showcase Component
function RibbonsShowcase() {
  return (
    <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
      {/* Rounded Ribbon */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Rounded Ribbon</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
            <span className="absolute -left-px mt-3 inline-block rounded-r-full bg-brand-500 px-4 py-1.5 text-sm font-medium text-white">Popular</span>
            <div className="p-5 pt-16">
              <p className="text-sm text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate.</p>
            </div>
          </div>
        </div>
      </div>

      {/* Filled Ribbon */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Filled Ribbon</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
            <span className="absolute -left-9 -top-7 mt-3 flex h-14 w-24 -rotate-45 items-end justify-center bg-brand-500 px-4 py-1.5 text-sm font-medium text-white shadow-theme-xs">New</span>
            <div className="p-5 pt-16">
              <p className="text-sm text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Spinners Showcase Component
function SpinnersShowcase() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Spinners</h3>
      </div>
      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
        <div className="flex flex-wrap items-center gap-6">
          {/* Default Spinner */}
          <div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-gray-200 border-t-brand-500"></div>
          
          {/* Small Spinner */}
          <div className="inline-flex h-6 w-6 animate-spin items-center justify-center rounded-full border-2 border-gray-200 border-t-brand-500"></div>
          
          {/* Large Spinner */}
          <div className="inline-flex h-16 w-16 animate-spin items-center justify-center rounded-full border-4 border-gray-200 border-t-brand-500"></div>
          
          {/* Colored Spinners */}
          <div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-success-200 border-t-success-500"></div>
          <div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-error-200 border-t-error-500"></div>
        </div>
      </div>
    </div>
  );
}

// Tabs Showcase Component
function TabsShowcase() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Tabs</h3>
      </div>
      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
        <div className="space-y-6">
          <ChartTab />
        </div>
      </div>
    </div>
  );
}

// Tooltips Showcase Component
function TooltipsShowcase() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Tooltips</h3>
      </div>
      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
        <div className="flex flex-wrap items-center gap-6">
          <button
            className="relative group inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs"
            title="Tooltip Top"
          >
            Tooltip Top
            <span className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap">
              Tooltip Top
              <span className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900"></span>
            </span>
          </button>

          <button
            className="relative group inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs"
            title="Tooltip Right"
          >
            Tooltip Right
            <span className="absolute left-full top-1/2 ml-2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap">
              Tooltip Right
              <span className="absolute right-full top-1/2 -translate-y-1/2 -mr-1 border-4 border-transparent border-r-gray-900"></span>
            </span>
          </button>
        </div>
      </div>
    </div>
  );
}

// Pagination Showcase Component
function PaginationShowcase() {
  const [page1, setPage1] = useState(1);
  const [page2, setPage2] = useState(1);
  const [page3, setPage3] = useState(1);

  return (
    <div className="space-y-5 sm:space-y-6">
      {/* Pagination with Text */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Text</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <Pagination currentPage={page1} totalPages={10} onPageChange={setPage1} variant="text" />
        </div>
      </div>

      {/* Pagination with Text and Icon */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Text and Icon</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <Pagination currentPage={page2} totalPages={10} onPageChange={setPage2} variant="text-icon" />
        </div>
      </div>

      {/* Pagination with Icon */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Icon</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <Pagination currentPage={page3} totalPages={10} onPageChange={setPage3} variant="icon" />
        </div>
      </div>
    </div>
  );
}

// Cards Showcase Component
function CardsShowcase() {
  return (
    <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
      {/* Basic Card */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Basic Card</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <Card>
            <CardTitle>Card Title</CardTitle>
            <CardDescription>This is a basic card with title and description.</CardDescription>
          </Card>
        </div>
      </div>

      {/* Card with Icon */}
      <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div className="px-6 py-5">
          <h3 className="text-base font-medium text-gray-800 dark:text-white/90">Card with Icon</h3>
        </div>
        <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
          <Card>
            <CardIcon>
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                <path fillRule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd" />
              </svg>
            </CardIcon>
            <CardTitle>Card with Icon</CardTitle>
            <CardDescription>This card includes an icon at the top.</CardDescription>
            <CardAction>Learn More</CardAction>
          </Card>
        </div>
      </div>
    </div>
  );
}