'use client';

import { Bot, Pencil, Trash2, ToggleLeft, ToggleRight, Star, Cpu, Volume2 } from 'lucide-react';
import type { AiAgent } from '@client/api/ai-agents';
import { useLanguage } from '@client/contexts/LanguageContext';

const ROLE_COLORS: Record<string, { bg: string; text: string }> = {
  orders: { bg: 'hsl(var(--warning-bg))', text: 'hsl(var(--warning))' },
  reservations: { bg: 'hsl(var(--info-bg))', text: 'hsl(var(--info))' },
  campaigns: { bg: 'hsl(210 40% 96%)', text: 'hsl(270 60% 50%)' },
  voice: { bg: 'hsl(var(--success-bg))', text: 'hsl(var(--success))' },
  chat: { bg: 'hsl(var(--primary-light))', text: 'hsl(var(--primary))' },
  general: { bg: 'hsl(var(--muted))', text: 'hsl(var(--muted-foreground))' },
};

interface Props {
  agent: AiAgent;
  onEdit: (agent: AiAgent) => void;
  onDelete: (agent: AiAgent) => void;
  onToggle: (agent: AiAgent) => void;
}

export default function AgentCard({ agent, onEdit, onDelete, onToggle }: Props) {
  const { t } = useLanguage();
  const roleStyle = ROLE_COLORS[agent.role] || ROLE_COLORS.general;

  return (
    <div className="card p-5 flex flex-col gap-4 group hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: roleStyle.bg }}>
            <Bot size={20} style={{ color: roleStyle.text }} />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="font-semibold text-sm" style={{ color: 'hsl(var(--foreground))' }}>{agent.name}</h3>
              {agent.is_default && (
                <Star size={12} style={{ color: 'hsl(var(--warning))' }} fill="hsl(var(--warning))" />
              )}
            </div>
            <span className="inline-block text-xs font-medium px-2 py-0.5 rounded-full mt-0.5"
              style={{ backgroundColor: roleStyle.bg, color: roleStyle.text }}>
              {t(`aiAgentConfig.roles.${agent.role}`, agent.role.charAt(0).toUpperCase() + agent.role.slice(1))}
            </span>
          </div>
        </div>
        <button onClick={() => onToggle(agent)} title={agent.is_active ? t('aiAgentConfig.active', 'Active') : t('aiAgentConfig.inactive', 'Inactive')}>
          {agent.is_active
            ? <ToggleRight size={24} style={{ color: 'hsl(var(--success))' }} />
            : <ToggleLeft size={24} style={{ color: 'hsl(var(--muted-foreground))' }} />}
        </button>
      </div>

      {agent.description && (
        <p className="text-xs line-clamp-2" style={{ color: 'hsl(var(--muted-foreground))' }}>{agent.description}</p>
      )}

      <div className="flex flex-wrap gap-2">
        {agent.llm_provider_name && (
          <span className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-lg"
            style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--foreground))' }}>
            <Cpu size={11} />
            {agent.llm_provider_name}{agent.llm_model_name ? ` / ${agent.llm_model_name}` : ''}
          </span>
        )}
        {agent.voice_provider_name && (
          <span className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-lg"
            style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--foreground))' }}>
            <Volume2 size={11} />
            {agent.voice_provider_name}{agent.voice_model_name ? ` / ${agent.voice_model_name}` : ''}
          </span>
        )}
      </div>

      {agent.capabilities && Object.keys(agent.capabilities).length > 0 && (
        <div className="flex flex-wrap gap-1">
          {Object.entries(agent.capabilities)
            .filter(([, v]) => v === true)
            .map(([k]) => (
              <span key={k} className="text-xs px-1.5 py-0.5 rounded"
                style={{ backgroundColor: 'hsl(var(--success-bg))', color: 'hsl(var(--success))' }}>
                {t(`aiAgentConfig.capabilities.${k}`, k.replace(/_/g, ' '))}
              </span>
            ))}
        </div>
      )}

      <div className="flex items-center gap-1 pt-1 border-t" style={{ borderColor: 'hsl(var(--border))' }}>
        <button className="btn-ghost text-xs px-2 py-1.5 flex items-center gap-1.5 flex-1 justify-center"
          style={{ color: 'hsl(var(--primary))' }} onClick={() => onEdit(agent)}>
          <Pencil size={13} /> {t('aiAgentConfig.edit', 'Edit')}
        </button>
        <button className="btn-ghost text-xs px-2 py-1.5 flex items-center gap-1.5 flex-1 justify-center"
          style={{ color: 'hsl(var(--danger))' }} onClick={() => onDelete(agent)}>
          <Trash2 size={13} /> {t('aiAgentConfig.delete', 'Delete')}
        </button>
      </div>
    </div>
  );
}