igny8/frontend/src/components/dashboard/NeedsAttentionBar.tsx

/**
 * NeedsAttentionBar - Collapsible alert bar for items requiring user action
 * Shows pending reviews, sync failures, setup incomplete, automation failures
 */

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { 
  AlertIcon, 
  ChevronDownIcon, 
  ChevronUpIcon,
  CheckCircleIcon,
  CloseIcon,
} from '../../icons';
import Button from '../ui/button/Button';
import IconButton from '../ui/button/IconButton';

export interface AttentionItem {
  id: string;
  type: 'pending_review' | 'sync_failed' | 'setup_incomplete' | 'automation_failed' | 'credits_low';
  title: string;
  description: string;
  count?: number;
  actionLabel: string;
  actionHref?: string;
  onAction?: () => void;
  secondaryActionLabel?: string;
  secondaryActionHref?: string;
  onSecondaryAction?: () => void;
}

interface NeedsAttentionBarProps {
  items: AttentionItem[];
  onDismiss?: (id: string) => void;
}

const typeConfig = {
  pending_review: {
    icon: CheckCircleIcon,
    bgColor: 'bg-warning-50 dark:bg-warning-900/20',
    borderColor: 'border-warning-200 dark:border-warning-800',
    iconColor: 'text-warning-500',
    titleColor: 'text-warning-800 dark:text-warning-200',
  },
  sync_failed: {
    icon: AlertIcon,
    bgColor: 'bg-error-50 dark:bg-error-900/20',
    borderColor: 'border-error-200 dark:border-error-800',
    iconColor: 'text-error-500',
    titleColor: 'text-error-800 dark:text-error-200',
  },
  setup_incomplete: {
    icon: AlertIcon,
    bgColor: 'bg-brand-50 dark:bg-brand-900/20',
    borderColor: 'border-brand-200 dark:border-brand-800',
    iconColor: 'text-brand-500',
    titleColor: 'text-brand-800 dark:text-brand-200',
  },
  automation_failed: {
    icon: AlertIcon,
    bgColor: 'bg-error-50 dark:bg-error-900/20',
    borderColor: 'border-error-200 dark:border-error-800',
    iconColor: 'text-error-500',
    titleColor: 'text-error-800 dark:text-error-200',
  },
  credits_low: {
    icon: AlertIcon,
    bgColor: 'bg-warning-50 dark:bg-warning-900/20',
    borderColor: 'border-warning-200 dark:border-warning-800',
    iconColor: 'text-warning-500',
    titleColor: 'text-warning-800 dark:text-warning-200',
  },
};

export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBarProps) {
  const [isCollapsed, setIsCollapsed] = useState(false);

  if (items.length === 0) {
    return null;
  }

  return (
    <div className="mb-4">
      {/* Header */}
      <Button
        onClick={() => setIsCollapsed(!isCollapsed)}
        variant="ghost"
        tone="warning"
        fullWidth
        className="flex items-center justify-between px-5 py-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-t-xl hover:bg-warning-100 dark:hover:bg-warning-900/30"
        endIcon={isCollapsed ? (
          <ChevronDownIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
        ) : (
          <ChevronUpIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
        )}
      >
        <div className="flex items-center gap-2.5">
          <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
          <span className="text-base font-semibold text-warning-800 dark:text-warning-200">
            Needs Attention ({items.length})
          </span>
        </div>
      </Button>

      {/* Content */}
      {!isCollapsed && (
        <div className="border border-t-0 border-warning-200 dark:border-warning-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
          <div className="flex flex-wrap gap-3">
            {items.map((item) => {
              const config = typeConfig[item.type];
              const Icon = config.icon;

              return (
                <div
                  key={item.id}
                  className={`flex items-start gap-3 px-4 py-3 rounded-lg border ${config.bgColor} ${config.borderColor} min-w-[220px] flex-1 max-w-[380px]`}
                >
                  <Icon className={`w-5 h-5 mt-0.5 flex-shrink-0 ${config.iconColor}`} />
                  <div className="flex-1 min-w-0">
                    <div className={`text-base font-semibold ${config.titleColor}`}>
                      {item.count ? `${item.count} ${item.title}` : item.title}
                    </div>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mt-1 line-clamp-1">
                      {item.description}
                    </p>
                    <div className="flex items-center gap-3 mt-2">
                      {item.actionHref ? (
                        <Link
                          to={item.actionHref}
                          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
                        >
                          {item.actionLabel} →
                        </Link>
                      ) : item.onAction ? (
                        <Button
                          onClick={item.onAction}
                          variant="ghost"
                          tone="brand"
                          size="xs"
                        >
                          {item.actionLabel}
                        </Button>
                      ) : null}
                      {item.secondaryActionHref && (
                        <Link
                          to={item.secondaryActionHref}
                          className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
                        >
                          {item.secondaryActionLabel}
                        </Link>
                      )}
                    </div>
                  </div>
                  {onDismiss && (
                    <IconButton
                      icon={<CloseIcon className="w-4 h-4" />}
                      onClick={() => onDismiss(item.id)}
                      variant="ghost"
                      tone="neutral"
                      size="sm"
                      aria-label="Dismiss"
                    />
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}