'use client';

import { cn } from '@/lib/cn';
import { User, Phone, Calendar } from 'lucide-react';

export interface DealCardData {
  id: string;
  number?: number | null;
  title: string;
  contactName?: string | null;
  contactPhone?: string | null;
  source?: string | null;
  amount?: number | null;
  stage?: { name: string; color: string; type: string } | null;
  assignee?: { firstName: string; lastName: string } | null;
  _count?: { activities: number; timeline: number };
  createdAt: string;
}

interface DealCardProps {
  deal: DealCardData;
  onClick?: () => void;
  compact?: boolean;
}

const sourceLabels: Record<string, string> = {
  LANDING: 'Лендинг',
  MANUAL: 'Вручную',
  WEBHOOK: 'Вебхук',
  IMPORT: 'Импорт',
  REFERRAL: 'Реферал',
  PHONE: 'Телефон',
  SOCIAL: 'Соцсети',
};

export function DealCard({ deal, onClick, compact }: DealCardProps) {
  return (
    <div
      onClick={onClick}
      className={cn(
        'bg-card rounded-lg border border-border p-3 cursor-pointer',
        'hover:shadow-md hover:border-primary/30 transition-all',
        compact && 'p-2',
      )}
    >
      <div className="flex items-start justify-between gap-2 mb-2">
        <h4 className="text-sm font-medium text-text truncate flex-1">
          {deal.number != null && <span className="text-muted font-normal">#{deal.number} </span>}
          {deal.title}
        </h4>
        {deal.amount != null && deal.amount > 0 && (
          <span className="text-xs font-semibold text-primary whitespace-nowrap">
            {deal.amount.toLocaleString('ru-RU')} ₽
          </span>
        )}
      </div>

      {deal.contactName && (
        <div className="flex items-center gap-1.5 text-xs text-muted mb-1">
          <User className="h-3 w-3" />
          <span className="truncate">{deal.contactName}</span>
        </div>
      )}

      {deal.contactPhone && (
        <div className="flex items-center gap-1.5 text-xs text-muted mb-1">
          <Phone className="h-3 w-3" />
          <span>{deal.contactPhone}</span>
        </div>
      )}

      <div className="flex items-center justify-between mt-2 pt-2 border-t border-border/50">
        <div className="flex items-center gap-2">
          {deal.source && (
            <span className="text-[10px] text-muted bg-background px-1.5 py-0.5 rounded">
              {sourceLabels[deal.source] || deal.source}
            </span>
          )}
          {deal.assignee && (
            <span className="text-[10px] text-muted">
              {deal.assignee.firstName} {deal.assignee.lastName?.[0]}.
            </span>
          )}
        </div>
        <div className="flex items-center gap-1 text-[10px] text-muted">
          <Calendar className="h-3 w-3" />
          {new Date(deal.createdAt).toLocaleDateString('ru-RU', {
            day: '2-digit',
            month: '2-digit',
          })}
        </div>
      </div>
    </div>
  );
}
