import { FolderOpen, Mail, MessageSquare, Cloud, ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { AgentCatalogItem } from '../../../../shared/api-types';

export function TemplateSelectCard({
  item,
  selected,
  onSelect,
}: {
  item: AgentCatalogItem;
  selected: boolean;
  onSelect: () => void;
}) {
  const TYPE_CONFIG = {
    local_directory: { label: 'Local files', icon: <FolderOpen className="w-3.5 h-3.5" />, className: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300' },
    gmail:           { label: 'Gmail',        icon: <Mail className="w-3.5 h-3.5" />,       className: 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300' },
    teams:           { label: 'Teams',        icon: <MessageSquare className="w-3.5 h-3.5" />, className: 'bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300' },
    outlook:         { label: 'Outlook',      icon: <Mail className="w-3.5 h-3.5" />,       className: 'bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300' },
  } as const;
  const badge = TYPE_CONFIG[item.type as keyof typeof TYPE_CONFIG] ?? { label: item.type, icon: <Cloud className="w-3.5 h-3.5" />, className: 'bg-muted text-muted-foreground' };

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onSelect();
        }
      }}
      className={cn(
        'group relative flex flex-col justify-between cursor-pointer rounded-md p-6 border transition-all duration-300',
        'hover:shadow-[0_2px_20px_rgb(0,0,0,0.07)] ',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
        selected
          ? 'border-border bg-background'
          : 'border-border/60 bg-background hover:border-border',
      )}
    >
      <div>
        {/* Top row: type badge + selected indicator */}
        <div className="flex items-center justify-between mb-5">
          <span className={cn('inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold', badge.className)}>
            {badge.icon}
            {badge.label}
          </span>
        </div>

        {/* Title */}
        <h3 className="text-2xl font-bold tracking-tight text-foreground mb-3 leading-[1.15] line-clamp-2">
          {item.name}
        </h3>

        {/* Description */}
        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
          {item.description}
        </p>
      </div>

      {/* Bottom: data-type chips + arrow CTA */}
      <div className="flex items-end justify-between pt-4 mt-5 border-t border-border/50">
        <div className="flex flex-wrap gap-1 max-w-[75%]">
          {(item.supportedDataTypes ?? []).slice(0, 3).map((t) => (
            <span key={t} className="text-[10px] px-2 py-0.5 rounded-md bg-muted text-muted-foreground capitalize font-medium">
              {t}
            </span>
          ))}
          {(item.supportedDataTypes ?? []).length > 3 && (
            <span className="text-[10px] px-2 py-0.5 rounded-md bg-muted text-muted-foreground font-medium">
              +{(item.supportedDataTypes ?? []).length - 3}
            </span>
          )}
        </div>
        <div className={cn(
          'flex items-center justify-center w-8 h-8 rounded-full transition-colors shrink-0',
          selected
            ? 'bg-primary text-primary-foreground'
            : 'bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary',
        )}>
          <ArrowRight className="w-4 h-4" />
        </div>
      </div>
    </div>
  );
}
