'use client';

import * as React from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

// 关闭图标组件
const CloseIcon = ({ className }: { className?: string }) => (
  <i className={cn('iconfont icon-close', className)} />
);

function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
}

function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay-dark fixed inset-0 z-50 backdrop-blur-sm',
        className
      )}
      {...props}
    />
  );
}

function AlertDialogContent({
  className,
  showCloseButton = true,
  showOverlay = true,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
  showCloseButton?: boolean;
  showOverlay?: boolean;
}) {
  return (
    <AlertDialogPortal>
      {showOverlay && <AlertDialogOverlay />}
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-surface-base-normal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] rounded-2xl p-6 shadow-lg duration-200',
          className
        )}
        {...props}
      >
        {props.children}
        {showCloseButton && (
          <AlertDialogPrimitive.Cancel asChild>
            <div className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center">
              <CloseIcon className="text-txt-primary-normal !text-[16px]" />
            </div>
          </AlertDialogPrimitive.Cancel>
        )}
      </AlertDialogPrimitive.Content>
    </AlertDialogPortal>
  );
}

function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('mb-4 flex flex-col gap-4 text-left', className)}
      {...props}
    />
  );
}

function AlertDialogFooter({
  className,
  variant = 'horizontal',
  ...props
}: React.ComponentProps<'div'> & {
  variant?: 'horizontal' | 'vertical';
}) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex gap-4 pt-8',
        variant === 'horizontal' ? 'flex-row justify-end' : 'flex-col',
        className
      )}
      {...props}
    />
  );
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <div className="flex items-start justify-between">
      <AlertDialogPrimitive.Title
        data-slot="alert-dialog-title"
        className={cn('txt-title-l text-txt-primary-normal w-full break-words', className)}
        {...props}
      />
    </div>
  );
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('txt-body-l text-txt-primary-normal w-full break-words', className)}
      {...props}
    />
  );
}

function AlertDialogIcon({ className, children, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-icon"
      className={cn('flex h-[148px] items-center justify-center px-10', className)}
      {...props}
    >
      <div className="flex h-[148px] w-[148px] items-center justify-center">{children}</div>
    </div>
  );
}

function AlertDialogAction({
  className,
  variant = 'primary',
  loading,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
  variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
  loading?: boolean;
}) {
  return (
    <AlertDialogPrimitive.Action asChild>
      <Button variant={variant} loading={loading} className={cn(className)} {...props} />
    </AlertDialogPrimitive.Action>
  );
}

function AlertDialogCancel({
  className,
  variant = 'tertiary',
  loading,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & {
  variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
  loading?: boolean;
}) {
  return (
    <AlertDialogPrimitive.Cancel asChild>
      <Button variant={variant} loading={loading} className={cn(className)} {...props} />
    </AlertDialogPrimitive.Cancel>
  );
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogIcon,
  AlertDialogAction,
  AlertDialogCancel,
};
