import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { MoreHorizontal, Shield } from 'lucide-react';
import type { AgentSkill, AgentScope, AgentSkillCategory, SkillTrustLevel } from '@/types/agent';

const SCOPE_COLORS: Record<AgentScope, string> = {
  internal: 'bg-blue-500/10 text-blue-600 border-blue-200',
  external: 'bg-green-500/10 text-green-600 border-green-200',
  both: 'bg-purple-500/10 text-purple-600 border-purple-200',
};

const CATEGORY_LABELS: Record<AgentSkillCategory, string> = {
  content: 'Content',
  crm: 'CRM',
  communication: 'Communication',
  automation: 'Automation',
  search: 'Search',
  analytics: 'Analytics',
  growth: 'Growth',
};

const TRUST_STYLES: Record<SkillTrustLevel, { label: string; className: string; tooltip: string }> = {
  auto:    { label: 'Auto',    className: 'bg-green-500/10 text-green-700 border-green-200',   tooltip: 'Runs without approval' },
  notify:  { label: 'Notify',  className: 'bg-amber-500/10 text-amber-700 border-amber-200',   tooltip: 'Runs and notifies admin' },
  approve: { label: 'Approval',className: 'bg-red-500/10 text-red-700 border-red-200',         tooltip: 'Requires admin approval' },
};

function handlerLabel(handler: string) {
  const [type] = handler.split(':');
  return type.charAt(0).toUpperCase() + type.slice(1);
}

interface SkillCardProps {
  skill: AgentSkill;
  onToggle: (id: string, enabled: boolean) => void;
  onEdit: (skill: AgentSkill) => void;
  onToggleMcp?: (id: string, exposed: boolean) => void;
}

export function SkillCard({ skill, onToggle, onEdit, onToggleMcp }: SkillCardProps) {
  return (
    <Card
      className={`cursor-pointer transition-all group ${
        skill.enabled
          ? "border-primary/30 bg-primary/5 hover:shadow-sm"
          : "border-border/50 bg-muted/20 hover:border-border"
      }`}
      onClick={() => onEdit(skill)}
    >
      <CardContent className="p-4 space-y-3">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0 flex-1">
            <h3 className="font-medium text-sm truncate">{skill.name}</h3>
            {skill.description && (
              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
                {skill.description}
              </p>
            )}
          </div>
          <div className="flex items-center gap-1 shrink-0">
            {onToggleMcp && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    className={`h-7 w-7 transition-colors ${skill.mcp_exposed ? 'text-primary' : 'opacity-30 hover:opacity-60'}`}
                    onClick={(e) => { e.stopPropagation(); onToggleMcp(skill.id, !skill.mcp_exposed); }}
                  >
                    <Shield className="h-3.5 w-3.5" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="bottom">
                  {skill.mcp_exposed ? 'Exposed via MCP' : 'Not exposed via MCP'}
                </TooltipContent>
              </Tooltip>
            )}
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={(e) => { e.stopPropagation(); onEdit(skill); }}
            >
              <MoreHorizontal className="h-4 w-4" />
            </Button>
            <Switch
              checked={skill.enabled}
              onCheckedChange={(v) => onToggle(skill.id, v)}
              onClick={(e) => e.stopPropagation()}
              className="shrink-0"
            />
          </div>
        </div>

        <div className="flex flex-wrap gap-1.5">
          <Badge variant="outline" className={SCOPE_COLORS[skill.scope]}>
            {skill.scope}
          </Badge>
          <Badge variant="secondary" className="text-[10px]">
            {CATEGORY_LABELS[skill.category]}
          </Badge>
          <Badge variant="outline" className="text-[10px]">
            {handlerLabel(skill.handler)}
          </Badge>
          {skill.trust_level && (
            <Tooltip>
              <TooltipTrigger asChild>
                <Badge variant="outline" className={`text-[10px] ${TRUST_STYLES[skill.trust_level].className}`}>
                  {TRUST_STYLES[skill.trust_level].label}
                </Badge>
              </TooltipTrigger>
              <TooltipContent side="bottom">
                Trust: {TRUST_STYLES[skill.trust_level].tooltip}
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      </CardContent>
    </Card>
  );
}
