import React from 'react';
import { Avatar, StatusBadge } from './leadUi';
import { leadFullName, leadInitials, type Lead } from '../../types';

export type SortKey = 'name' | 'company' | 'status' | 'connections' | 'updated_at';

export interface SortConfig {
  key: SortKey;
  direction: 'asc' | 'desc';
}

interface LeadListProps {
  leads: Lead[];
  connectionCount: (leadId: number) => number;
  sortConfig: SortConfig;
  onSort: (key: SortKey) => void;
  onEdit: (lead: Lead) => void;
  onDelete: (lead: Lead) => void;
}

const COLUMNS: { key: SortKey | null; label: string; className?: string }[] = [
  { key: 'name', label: 'Kontakt' },
  { key: 'company', label: 'Unternehmen' },
  { key: 'status', label: 'Status' },
  { key: null, label: 'Erreichbarkeit' },
  { key: 'connections', label: 'Verbindungen' },
  { key: null, label: 'Angelegt von' },
  { key: 'updated_at', label: 'Geaendert' },
];

export const LeadList: React.FC<LeadListProps> = ({
  leads,
  connectionCount,
  sortConfig,
  onSort,
  onEdit,
  onDelete,
}) => (
  <div className="overflow-hidden rounded-2xl border border-ink-200 bg-surface shadow-card">
    <div className="scrollbar-slim overflow-x-auto">
      <table className="w-full border-collapse text-left">
        <thead>
          <tr className="border-b border-ink-200 bg-ink-50">
            {COLUMNS.map((column) => (
              <th
                key={column.label}
                onClick={column.key ? () => onSort(column.key!) : undefined}
                className={`px-5 py-3.5 text-[10px] font-extrabold uppercase tracking-wider text-ink-400 ${
                  column.key ? 'cursor-pointer select-none transition hover:text-brand-600' : ''
                }`}
              >
                <span className="flex items-center gap-1.5">
                  {column.label}
                  {column.key && sortConfig.key === column.key && (
                    <svg
                      className={`h-3 w-3 transition-transform ${
                        sortConfig.direction === 'desc' ? 'rotate-180' : ''
                      }`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 15l7-7 7 7" />
                    </svg>
                  )}
                </span>
              </th>
            ))}
            <th className="px-5 py-3.5" />
          </tr>
        </thead>
        <tbody className="divide-y divide-ink-100">
          {leads.map((lead) => (
            <tr
              key={lead.id}
              onClick={() => onEdit(lead)}
              className="group cursor-pointer transition hover:bg-brand-50/40"
            >
              <td className="px-5 py-3">
                <div className="flex items-center gap-3">
                  <Avatar src={lead.avatar} initials={leadInitials(lead)} size="sm" />
                  <div className="min-w-0">
                    <p className="truncate text-sm font-bold text-ink-900 transition group-hover:text-brand-700">
                      {leadFullName(lead)}
                    </p>
                    {lead.position && <p className="truncate text-xs text-ink-400">{lead.position}</p>}
                  </div>
                </div>
              </td>
              <td className="px-5 py-3">
                <p className="truncate text-sm text-ink-700">{lead.company || '—'}</p>
                {lead.city && <p className="truncate text-xs text-ink-400">{lead.city}</p>}
              </td>
              <td className="px-5 py-3">
                <StatusBadge status={lead.status} />
              </td>
              <td className="px-5 py-3">
                <div className="space-y-0.5 text-xs">
                  {lead.email ? (
                    <a
                      href={`mailto:${lead.email}`}
                      onClick={(event) => event.stopPropagation()}
                      className="block truncate text-ink-600 transition hover:text-brand-600"
                    >
                      {lead.email}
                    </a>
                  ) : (
                    <span className="text-ink-300">keine E-Mail</span>
                  )}
                  {(lead.phone || lead.mobile) && (
                    <span className="block truncate text-ink-400">{lead.phone || lead.mobile}</span>
                  )}
                </div>
              </td>
              <td className="px-5 py-3">
                <span className="inline-flex min-w-7 justify-center rounded-md bg-ink-100 px-2 py-0.5 text-xs font-extrabold text-ink-600">
                  {connectionCount(lead.id)}
                </span>
              </td>
              <td className="px-5 py-3">
                <p className="truncate text-xs text-ink-500">{lead.created_by_name || '—'}</p>
              </td>
              <td className="px-5 py-3">
                <p className="whitespace-nowrap text-xs text-ink-400">
                  {lead.updated_at ? new Date(lead.updated_at).toLocaleDateString('de-DE') : '—'}
                </p>
              </td>
              <td className="px-5 py-3 text-right">
                <button
                  onClick={(event) => {
                    event.stopPropagation();
                    onDelete(lead);
                  }}
                  className="rounded-lg p-2 text-ink-300 transition hover:bg-red-50 hover:text-red-600"
                  aria-label={`${leadFullName(lead)} loeschen`}
                >
                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);