import type { Lead } from '@/types/lead';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { PersonaBadge } from '@/components/planner/PersonaBadge';
import { getSpendPotentialColor, getSpendPotentialLabel } from '@/types/persona';
import { Calendar, Users, MapPin, Mail, Phone } from 'lucide-react';

interface LeadCardProps {
  lead: Lead;
  onContact: (leadId: string) => void;
}

export function LeadCard({ lead, onContact }: LeadCardProps) {
  const persona = lead.tourist_persona;
  const confidence = lead.persona_confidence || 0;

  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            {persona && (
              <div className="flex flex-col gap-2">
                <PersonaBadge persona={persona} />
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <p className="text-xs text-muted-foreground cursor-help">
                        Güven: {Math.round(confidence * 100)}%
                      </p>
                    </TooltipTrigger>
                    <TooltipContent className="max-w-xs">
                      <p className="font-semibold mb-2">{persona.description}</p>
                      <p className="text-xs mb-2">Tespit edilen sinyaller:</p>
                      <ul className="text-xs list-disc list-inside">
                        {persona.key_signals.map((signal, idx) => (
                          <li key={idx}>{signal}</li>
                        ))}
                      </ul>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            )}
            <div>
              <CardTitle className="text-lg">
                {lead.country || 'Bilinmeyen Ülke'}
              </CardTitle>
              <Badge 
                className={getSpendPotentialColor(persona?.spend_potential)}
              >
                {getSpendPotentialLabel(persona?.spend_potential)}
              </Badge>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex items-center gap-2 text-sm">
            <Mail className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">{lead.email}</span>
          </div>
          {lead.whatsapp && (
            <div className="flex items-center gap-2 text-sm">
              <Phone className="h-4 w-4 text-muted-foreground" />
              <span className="text-muted-foreground">{lead.whatsapp}</span>
            </div>
          )}
        </div>

        <div className="space-y-2">
          <div className="flex items-center gap-2 text-sm">
            <MapPin className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{lead.destination}</span>
          </div>
          <div className="flex items-center gap-2 text-sm">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">
              {new Date(lead.start_date).toLocaleDateString('tr-TR')} - 
              {new Date(lead.end_date).toLocaleDateString('tr-TR')}
            </span>
          </div>
          <div className="flex items-center gap-2 text-sm">
            <Users className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">
              {lead.number_of_travelers} kişi
            </span>
          </div>
        </div>

        {persona && persona.recommended_services.length > 0 && (
          <div>
            <p className="text-sm font-medium mb-2">Önerilen Hizmetler</p>
            <div className="flex flex-wrap gap-1">
              {persona.recommended_services.slice(0, 3).map((service, idx) => (
                <Badge key={idx} variant="outline" className="text-xs">
                  {service}
                </Badge>
              ))}
              {persona.recommended_services.length > 3 && (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Badge variant="outline" className="text-xs cursor-help">
                        +{persona.recommended_services.length - 3} daha
                      </Badge>
                    </TooltipTrigger>
                    <TooltipContent>
                      <ul className="text-xs list-disc list-inside">
                        {persona.recommended_services.slice(3).map((service, idx) => (
                          <li key={idx}>{service}</li>
                        ))}
                      </ul>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              )}
            </div>
          </div>
        )}

        <Button 
          onClick={() => onContact(lead.id)} 
          className="w-full"
        >
          İletişime Geç
        </Button>
      </CardContent>
    </Card>
  );
}
