import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { 
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import type { TouristPersona } from '@/types/lead';
import { 
  getSpendPotentialColor, 
  getSpendPotentialLabel 
} from '@/utils/persona-engine';

interface PersonaBadgeProps {
  persona: TouristPersona;
  confidence?: number;
  language?: 'tr' | 'en';
  showDetails?: boolean;
  compact?: boolean;
}

export function PersonaBadge({ 
  persona, 
  confidence, 
  language = 'tr',
  showDetails = false,
  compact = false
}: PersonaBadgeProps) {
  const label = language === 'tr' ? persona.label : persona.sales_label;
  const spendLabel = getSpendPotentialLabel(persona.spend_potential, language);
  const spendColor = getSpendPotentialColor(persona.spend_potential);

  if (compact) {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Badge 
              variant="secondary" 
              className="cursor-help gap-1 text-xs"
            >
              <span>{persona.emoji}</span>
              <span>{label}</span>
              {confidence !== undefined && (
                <span className="text-muted-foreground ml-1">
                  ({Math.round(confidence * 100)}%)
                </span>
              )}
            </Badge>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="max-w-xs">
            <div className="space-y-2">
              <p className="font-medium">{persona.description}</p>
              <div className="flex items-center gap-2 text-sm">
                <span className="text-muted-foreground">
                  {language === 'tr' ? 'Harcama Potansiyeli:' : 'Spend Potential:'}
                </span>
                <span className={spendColor}>{spendLabel}</span>
              </div>
              {confidence !== undefined && (
                <div className="flex items-center gap-2 text-sm">
                  <span className="text-muted-foreground">
                    {language === 'tr' ? 'Güven Skoru:' : 'Confidence:'}
                  </span>
                  <span>{Math.round(confidence * 100)}%</span>
                </div>
              )}
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );
  }

  if (!showDetails) {
    return (
      <div className="inline-flex items-center gap-2">
        <Badge variant="secondary" className="gap-1">
          <span>{persona.emoji}</span>
          <span>{label}</span>
        </Badge>
        <Badge variant="outline" className={spendColor}>
          {spendLabel}
        </Badge>
        {confidence !== undefined && (
          <span className="text-sm text-muted-foreground">
            {Math.round(confidence * 100)}% {language === 'tr' ? 'güven' : 'confidence'}
          </span>
        )}
      </div>
    );
  }

  return (
    <Card>
      <CardContent className="p-4 space-y-3">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-2">
            <span className="text-2xl">{persona.emoji}</span>
            <div>
              <h4 className="font-semibold">{label}</h4>
              <p className="text-sm text-muted-foreground">{persona.description}</p>
            </div>
          </div>
          {confidence !== undefined && (
            <Badge variant="outline" className="ml-2">
              {Math.round(confidence * 100)}%
            </Badge>
          )}
        </div>

        <div className="grid grid-cols-2 gap-3 text-sm">
          <div>
            <span className="text-muted-foreground">
              {language === 'tr' ? 'Harcama Potansiyeli' : 'Spend Potential'}
            </span>
            <div className={`font-medium ${spendColor}`}>
              {spendLabel}
            </div>
          </div>
          {confidence !== undefined && (
            <div>
              <span className="text-muted-foreground">
                {language === 'tr' ? 'Güven Skoru' : 'Confidence Score'}
              </span>
              <div className="font-medium">
                {Math.round(confidence * 100)}%
              </div>
            </div>
          )}
        </div>

        {persona.key_signals && persona.key_signals.length > 0 && (
          <div>
            <span className="text-sm text-muted-foreground">
              {language === 'tr' ? 'Tespit Edilen Sinyaller:' : 'Detected Signals:'}
            </span>
            <div className="flex flex-wrap gap-1 mt-1">
              {persona.key_signals.map((signal, index) => (
                <Badge key={index} variant="outline" className="text-xs">
                  {signal}
                </Badge>
              ))}
            </div>
          </div>
        )}

        {persona.recommended_services && persona.recommended_services.length > 0 && (
          <div>
            <span className="text-sm text-muted-foreground">
              {language === 'tr' ? 'Önerilen Hizmetler:' : 'Recommended Services:'}
            </span>
            <ul className="mt-1 space-y-1">
              {persona.recommended_services.slice(0, 3).map((service, index) => (
                <li key={index} className="text-sm flex items-center gap-1">
                  <span className="text-primary">•</span>
                  <span>{service}</span>
                </li>
              ))}
              {persona.recommended_services.length > 3 && (
                <li className="text-sm text-muted-foreground">
                  +{persona.recommended_services.length - 3} {language === 'tr' ? 'daha fazla' : 'more'}
                </li>
              )}
            </ul>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
