/**
 * 警告/提示框组件
 */

import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { ComponentPropsMap, RenderContext } from '../types';

interface AlertBoxProps {
  props: ComponentPropsMap['alert'];
  context: RenderContext;
}

export function AlertBox({ props }: AlertBoxProps) {
  const { type, title, description, dismissible = false } = props;
  const [dismissed, setDismissed] = useState(false);

  if (dismissed) return null;

  const config = {
    info:    { Icon: Info,           bar: 'bg-sky-500',     iconBg: 'bg-sky-500/10',     iconColor: 'text-sky-600 dark:text-sky-400' },
    success: { Icon: CheckCircle,    bar: 'bg-emerald-500', iconBg: 'bg-emerald-500/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
    warning: { Icon: AlertTriangle,  bar: 'bg-amber-500',   iconBg: 'bg-amber-500/10',   iconColor: 'text-amber-600 dark:text-amber-400' },
    error:   { Icon: AlertCircle,    bar: 'bg-rose-500',    iconBg: 'bg-rose-500/10',    iconColor: 'text-rose-600 dark:text-rose-400' },
  }[type] || { Icon: Info, bar: 'bg-sky-500', iconBg: 'bg-sky-500/10', iconColor: 'text-sky-600 dark:text-sky-400' };

  const { Icon } = config;

  return (
    <div className="relative overflow-hidden rounded-lg border border-border/60 bg-card shadow-xs">
      <div className={cn('absolute left-0 top-0 bottom-0 w-1', config.bar)} />
      <div className="flex gap-3 p-3.5 pl-5">
        <div className={cn('h-7 w-7 rounded-md flex items-center justify-center flex-shrink-0', config.iconBg)}>
          <Icon className={cn('h-4 w-4', config.iconColor)} />
        </div>
        <div className="flex-1 min-w-0">
          <div className="text-sm font-semibold text-foreground leading-tight">{title}</div>
          {description && (
            <div className="text-sm text-muted-foreground mt-0.5 leading-relaxed">{description}</div>
          )}
        </div>
        {dismissible && (
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 -mt-1 -mr-1 flex-shrink-0"
            onClick={() => setDismissed(true)}
          >
            <X className="h-4 w-4" />
          </Button>
        )}
      </div>
    </div>
  );
}
