'use client';

import { User } from 'lucide-react';
import { StageBadge } from './stage-badge';
import type { EntityConfig, EntityCardData } from '../types';

interface EntityTableProps {
  config: EntityConfig;
  data: EntityCardData[];
  onRowClick: (entityId: string) => void;
}

export function EntityTable({ config, data, onRowClick }: EntityTableProps) {
  // Build enum label map from config
  const enumLabels: Record<string, Record<string, string>> = {};
  for (const field of config.systemFields) {
    if (field.type === 'enum' && field.enumOptions) {
      enumLabels[field.key] = Object.fromEntries(field.enumOptions.map((o) => [o.value, o.label]));
    }
  }

  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>
            {config.features.pipelines && (
              <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>
          {data.map((item) => (
            <tr
              key={item.id}
              onClick={() => onRowClick(item.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">
                {item.number != null ? `#${item.number}` : '—'}
              </td>
              <td className="px-4 py-3">
                <span className="font-medium text-text">{item.title}</span>
              </td>
              <td className="px-4 py-3">
                <div>
                  {item.contactName && <div className="text-text">{item.contactName}</div>}
                  {item.contactPhone && (
                    <div className="text-xs text-muted">{item.contactPhone}</div>
                  )}
                </div>
              </td>
              {config.features.pipelines && (
                <td className="px-4 py-3">
                  {item.stage && (
                    <StageBadge
                      name={item.stage.name}
                      color={item.stage.color}
                      type={item.stage.type}
                    />
                  )}
                </td>
              )}
              <td className="px-4 py-3 text-muted">
                {item.source ? enumLabels['source']?.[item.source as string] || item.source : '—'}
              </td>
              <td className="px-4 py-3">
                {item.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">
                      {item.assignee.firstName} {item.assignee.lastName}
                    </span>
                  </div>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </td>
              <td className="px-4 py-3 text-right">
                {item.amount != null && item.amount > 0 ? (
                  <span className="font-medium">{item.amount.toLocaleString('ru-RU')} ₽</span>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </td>
              <td className="px-4 py-3 text-muted">
                {new Date(item.createdAt).toLocaleDateString('ru-RU', {
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                })}
              </td>
            </tr>
          ))}
          {data.length === 0 && (
            <tr>
              <td
                colSpan={config.features.pipelines ? 8 : 7}
                className="text-center py-12 text-muted"
              >
                Нет {config.label.genitive}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
