'use client';

import { User } from 'lucide-react';
import { StageBadge } from './stage-badge';
import type { DealCardData } from './deal-card';

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

interface DealTableProps {
  deals: DealCardData[];
  onDealClick: (dealIdOrNumber: string) => void;
}

export function DealTable({ deals, onDealClick }: DealTableProps) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-border bg-background/50">
            <th className="text-left px-4 py-3 text-muted font-medium w-12">#</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Название</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Контакт</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Стадия</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Источник</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Ответственный</th>
            <th className="text-right px-4 py-3 text-muted font-medium">Сумма</th>
            <th className="text-left px-4 py-3 text-muted font-medium">Создана</th>
          </tr>
        </thead>
        <tbody>
          {deals.map((deal) => (
            <tr
              key={deal.id}
              onClick={() => onDealClick(deal.number != null ? String(deal.number) : deal.id)}
              className="border-b border-border/50 hover:bg-background/30 cursor-pointer transition-colors"
            >
              <td className="px-4 py-3 text-muted text-xs font-mono">
                {deal.number != null ? `#${deal.number}` : '—'}
              </td>
              <td className="px-4 py-3">
                <span className="font-medium text-text">{deal.title}</span>
              </td>
              <td className="px-4 py-3">
                <div>
                  {deal.contactName && <div className="text-text">{deal.contactName}</div>}
                  {deal.contactPhone && (
                    <div className="text-xs text-muted">{deal.contactPhone}</div>
                  )}
                </div>
              </td>
              <td className="px-4 py-3">
                {deal.stage && (
                  <StageBadge
                    name={deal.stage.name}
                    color={deal.stage.color}
                    type={deal.stage.type}
                  />
                )}
              </td>
              <td className="px-4 py-3 text-muted">
                {deal.source ? sourceLabels[deal.source] || deal.source : '—'}
              </td>
              <td className="px-4 py-3">
                {deal.assignee ? (
                  <div className="flex items-center gap-1.5">
                    <div className="h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center">
                      <User className="h-3 w-3 text-primary" />
                    </div>
                    <span className="text-text">
                      {deal.assignee.firstName} {deal.assignee.lastName}
                    </span>
                  </div>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </td>
              <td className="px-4 py-3 text-right">
                {deal.amount != null && deal.amount > 0 ? (
                  <span className="font-medium">{deal.amount.toLocaleString('ru-RU')} ₽</span>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </td>
              <td className="px-4 py-3 text-muted">
                {new Date(deal.createdAt).toLocaleDateString('ru-RU', {
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                })}
              </td>
            </tr>
          ))}
          {deals.length === 0 && (
            <tr>
              <td colSpan={8} className="text-center py-12 text-muted">
                Нет сделок
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
