'use client';

import { Bot, MessageSquare, Settings2 } from 'lucide-react';
import { cn } from '@/lib/utils';

interface BotRouteCardProps {
  id: string;
  botName: string;
  sourceType: string;
  active: boolean;
  messageCount: number;
  isSelected: boolean;
  onToggleActive: (id: string, active: boolean) => void;
  onConfigure: (id: string) => void;
}

const sourceTypeColors: Record<string, { bg: string; text: string; border: string }> = {
  WEB_LEAD:        { bg: 'bg-blue-500/15',   text: 'text-blue-400',   border: 'border-blue-500/25' },
  EMAIL_INQUIRY:   { bg: 'bg-purple-500/15',  text: 'text-purple-400', border: 'border-purple-500/25' },
  SMS_CAMPAIGN:    { bg: 'bg-cyan-500/15',    text: 'text-cyan-400',   border: 'border-cyan-500/25' },
  PHONE_CALL:      { bg: 'bg-green-500/15',   text: 'text-green-400',  border: 'border-green-500/25' },
  REFERRAL:        { bg: 'bg-amber-500/15',   text: 'text-amber-400',  border: 'border-amber-500/25' },
  SOCIAL_MEDIA:    { bg: 'bg-pink-500/15',    text: 'text-pink-400',   border: 'border-pink-500/25' },
  WALK_IN:         { bg: 'bg-orange-500/15',  text: 'text-orange-400', border: 'border-orange-500/25' },
  API:             { bg: 'bg-indigo-500/15',  text: 'text-indigo-400', border: 'border-indigo-500/25' },
};

const defaultColor = { bg: 'bg-slate-500/15', text: 'text-slate-400', border: 'border-slate-500/25' };

function getSourceColor(type: string) {
  const key = type.toUpperCase().replace(/[\s-]+/g, '_');
  return sourceTypeColors[key] || defaultColor;
}

export default function BotRouteCard({
  id,
  botName,
  sourceType,
  active,
  messageCount,
  isSelected,
  onToggleActive,
  onConfigure,
}: BotRouteCardProps) {
  const colors = getSourceColor(sourceType);

  return (
    <div
      className={cn(
        'group relative rounded-xl border p-4 transition-all duration-300',
        'bg-slate-800/40 backdrop-blur-sm',
        isSelected
          ? 'border-cyan-400/60 shadow-[0_0_20px_rgba(34,211,238,0.15)] bg-cyan-500/[0.06]'
          : active
            ? 'border-slate-600/50 hover:border-slate-500/60'
            : 'border-slate-700/30 opacity-60 hover:opacity-80'
      )}
    >
      {/* Top row: Bot icon + name + source badge */}
      <div className="flex items-start gap-3">
        <div
          className={cn(
            'flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0',
            active ? 'bg-cyan-500/10 border border-cyan-500/20' : 'bg-slate-700/50 border border-slate-600/30'
          )}
        >
          <Bot className={cn('h-5 w-5', active ? 'text-cyan-400' : 'text-slate-500')} />
        </div>

        <div className="flex-1 min-w-0">
          <h3 className="text-sm font-bold text-white truncate">{botName}</h3>
          <span
            className={cn(
              'inline-flex items-center mt-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider border',
              colors.bg,
              colors.text,
              colors.border
            )}
          >
            {sourceType.replace(/_/g, ' ')}
          </span>
        </div>
      </div>

      {/* Bottom row: toggle + message count + configure */}
      <div className="flex items-center justify-between mt-4 pt-3 border-t border-slate-700/30">
        {/* Active/Paused toggle */}
        <button
          onClick={() => onToggleActive(id, !active)}
          className="flex items-center gap-2 group/toggle"
        >
          <div
            className={cn(
              'relative h-5 w-9 rounded-full transition-colors duration-300',
              active ? 'bg-cyan-500' : 'bg-slate-600'
            )}
          >
            <div
              className={cn(
                'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-300',
                active ? 'translate-x-4' : 'translate-x-0.5'
              )}
            />
          </div>
          <span
            className={cn(
              'text-[11px] font-semibold uppercase tracking-wider',
              active ? 'text-cyan-400' : 'text-slate-500'
            )}
          >
            {active ? 'Active' : 'Paused'}
          </span>
        </button>

        {/* Message count */}
        <div className="flex items-center gap-1.5 text-slate-500">
          <MessageSquare className="h-3.5 w-3.5" />
          <span className="text-xs font-medium num">{messageCount.toLocaleString()}</span>
        </div>

        {/* Configure button */}
        <button
          onClick={() => onConfigure(id)}
          className={cn(
            'flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider transition-all duration-200',
            'border border-slate-600/50 text-slate-400',
            'hover:border-cyan-500/40 hover:text-cyan-400 hover:bg-cyan-500/5'
          )}
        >
          <Settings2 className="h-3.5 w-3.5" />
          Configure
        </button>
      </div>

      {/* Selected glow ring */}
      {isSelected && (
        <div className="absolute inset-0 rounded-xl border-2 border-cyan-400/30 pointer-events-none" />
      )}
    </div>
  );
}
