'use client'

import { useState } from 'react'
import { Button, IconButton } from '@/components/ui/button'
import Sidebar from '@/components/layout/Sidebar'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogIcon,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'

// CrushLevel Logo 图标组件
const CrushLevelIcon = () => (
  <div className="relative h-[148px] w-[148px]">
    {/* 渐变背景圆 */}
    <div className="absolute inset-[19.531%] flex items-center justify-center">
      <div className="h-[90.188px] w-[90.188px] rounded-full bg-gradient-to-br from-purple-400 via-pink-300 to-cyan-300 opacity-60"></div>
    </div>

    {/* 主要的 C 形状 */}
    <div className="absolute inset-0 flex items-center justify-center">
      <div className="border-gradient-to-r h-16 w-16 rotate-45 transform rounded-full border-8 border-b-transparent border-l-transparent from-purple-400 to-pink-400"></div>
    </div>

    {/* 装饰性轨道 */}
    <div className="absolute top-[25.9%] right-[-1.406%] bottom-[15.064%] left-[-0.337%] flex items-center justify-center">
      <div className="h-[40.839px] w-[145.312px] rotate-[340.328deg] transform rounded-full border-2 border-purple-300 opacity-40"></div>
    </div>
  </div>
)

export default function DemoPage() {
  const [loading1, setLoading1] = useState(false)
  const [loading2, setLoading2] = useState(false)
  const [loading3, setLoading3] = useState(false)
  const [loading4, setLoading4] = useState(false)

  const handleAsyncAction = (setLoading: (loading: boolean) => void) => {
    setLoading(true)
    // 模拟异步操作
    setTimeout(() => {
      setLoading(false)
    }, 3000)
  }

  return (
    <div className="bg-background-default flex h-screen">
      {/* 侧边栏演示 */}
      <Sidebar />

      {/* 主内容区域 */}
      <div className="flex-1 overflow-auto">
        <div className="container mx-auto space-y-8 p-8">
          <h1 className="text-txt-primary-normal mb-8 text-center text-3xl font-bold">
            Component demo
          </h1>

          {/* 侧边栏演示说明 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">Collapsible Sidebar</h2>
            <div className="bg-surface-base-normal rounded-2xl p-6">
              <p className="txt-body-l text-txt-primary-normal mb-4">
                The left sidebar supports the following functions:
              </p>
              <ul className="txt-body-l text-txt-secondary-normal list-inside list-disc space-y-2">
                <li>Click the top fold/expand button to toggle the sidebar width</li>
                <li>Navigation menu supports selection status and icon switching</li>
                <li>Chat list shows user avatar, message preview, time, and unread count</li>
                <li>Support user label and temperature display</li>
                <li>The bottom notification function comes with a quantity badge.</li>
                <li>Smooth animation transitions</li>
              </ul>
            </div>
          </section>

          {/* Alert Dialog 演示 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">
              Alert Dialog dialog box Alert Dialog dialog box Alert Dialog dialog box
            </h2>
            <div className="flex flex-wrap gap-4">
              {/* 基础警告对话框 */}
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button variant="destructive">Remove warning</Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Warning</AlertDialogTitle>
                    <AlertDialogDescription>
                      Using AI generation will overwrite the content you have already entered. Do
                      you want to continue?
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction>Continue</AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>

              {/* 带图标的对话框 */}
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button variant="primary">
                    AI generated confirmation AI generated confirmation
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogIcon>
                      <CrushLevelIcon />
                    </AlertDialogIcon>
                    <AlertDialogDescription className="text-center">
                      Using AI generation will overwrite the content you have already entered. Do
                      you want to continue?
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter variant="vertical">
                    <AlertDialogAction>Continue</AlertDialogAction>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>

              {/* 带 Loading 的对话框 */}
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button variant="tertiary">Loading dialog box Loading dialog box</Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>confirm operation</AlertDialogTitle>
                    <AlertDialogDescription>
                      This operation will permanently delete your data. Are you sure you want to
                      continue?
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel loading={loading1}>
                      {loading1 ? '取消中...' : '取消'}
                    </AlertDialogCancel>
                    <AlertDialogAction
                      variant="destructive"
                      loading={loading2}
                      onClick={() => handleAsyncAction(setLoading2)}
                    >
                      {loading2 ? '删除中...' : '确认删除'}
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>

              {/* 无关闭按钮的对话框 */}
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button variant="secondary">No close button</Button>
                </AlertDialogTrigger>
                <AlertDialogContent showCloseButton={false}>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Important Note</AlertDialogTitle>
                    <AlertDialogDescription>
                      This is an important reminder that you must choose an option to proceed.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Oh, I see.</AlertDialogCancel>
                    <AlertDialogAction>Continue operation</AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </section>

          {/* 普通按钮 Loading 演示 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">
              Normal Button Loading Effect Normal Button Loading Effect Normal Button Loading Effect
            </h2>
            <div className="flex flex-wrap gap-4">
              <Button
                variant="primary"
                loading={loading1}
                onClick={() => handleAsyncAction(setLoading1)}
              >
                {loading1 ? '加载中...' : '主要按钮'}
              </Button>

              <Button
                variant="secondary"
                loading={loading2}
                onClick={() => handleAsyncAction(setLoading2)}
              >
                {loading2 ? '处理中...' : '次要按钮'}
              </Button>

              <Button
                variant="destructive"
                loading={loading3}
                onClick={() => handleAsyncAction(setLoading3)}
              >
                {loading3 ? '删除中...' : '删除按钮'}
              </Button>

              <Button
                variant="tertiary"
                size="small"
                loading={loading4}
                onClick={() => handleAsyncAction(setLoading4)}
              >
                Small button
              </Button>
            </div>
          </section>

          {/* 图标按钮 Loading 演示 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">
              Icon button Loading effect Icon button Loading effect Icon button Loading effect
            </h2>
            <div className="flex flex-wrap gap-4">
              <IconButton
                variant="default"
                size="large"
                loading={loading1}
                onClick={() => handleAsyncAction(setLoading1)}
              >
                {!loading1 && <span>🔄</span>}
              </IconButton>

              <IconButton
                variant="tertiary"
                size="small"
                loading={loading2}
                onClick={() => handleAsyncAction(setLoading2)}
              >
                {!loading2 && <span>❤️</span>}
              </IconButton>

              <IconButton
                variant="destructive"
                size="xs"
                loading={loading3}
                onClick={() => handleAsyncAction(setLoading3)}
              >
                {!loading3 && <span>🗑️</span>}
              </IconButton>
            </div>
          </section>

          {/* 块级按钮 Loading 演示 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">
              Block Button Loading Effect Block Button Loading Effect Block Button Loading Effect
            </h2>
            <Button
              variant="primary"
              block
              loading={loading1}
              onClick={() => handleAsyncAction(setLoading1)}
            >
              {loading1 ? '正在提交表单...' : '提交表单'}
            </Button>
          </section>

          {/* 控制按钮 */}
          <section className="space-y-4">
            <h2 className="text-txt-primary-normal text-2xl font-semibold">
              Manually Control Loading Status Manually Control Loading Status Manually Control
              Loading Status
            </h2>
            <div className="flex gap-4">
              <Button variant="secondary" onClick={() => setLoading1(!loading1)}>
                Switch Loading 1 Switch Loading 1 Switch Loading 1
              </Button>
              <Button variant="secondary" onClick={() => setLoading2(!loading2)}>
                Toggle Loading 2 Toggle Loading 2 Toggle Loading 2
              </Button>
              <Button variant="secondary" onClick={() => setLoading3(!loading3)}>
                Toggle Loading 3 Toggle Loading 3 Toggle Loading 3
              </Button>
              <Button variant="secondary" onClick={() => setLoading4(!loading4)}>
                Toggle Loading 4 Toggle Loading 4 Toggle Loading 4
              </Button>
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
