perinco-CRM/src/components/acquisition/AcquisitionTable.tsx

import React from 'react';
import { formatEuro, type Acquisition } from '../../types';

/*
 * Die Liste der gefundenen Projekte. Genau die Spalten, die beim Durchgehen
 * zaehlen - alles Weitere steht im Formular und in der Opportunity.
 *
 * Der Titel ist ein Link, sobald einer hinterlegt ist. Ohne Link bleibt er
 * einfacher Text: ein Link, der nirgends hinfuehrt, ist schlimmer als keiner.
 */

export type AcquisitionSortKey = 'found_at' | 'sender' | 'provider' | 'channel' | 'title' | 'consultant';

export interface AcquisitionSortConfig {
  key: AcquisitionSortKey;
  direction: 'asc' | 'desc';
}

interface AcquisitionTableProps {
  entries: Acquisition[];
  sortConfig: AcquisitionSortConfig;
  onSort: (key: AcquisitionSortKey) => void;
  editingId: number | null;
  busyId: number | null;
  onEdit: (entry: Acquisition) => void;
  onDelete: (entry: Acquisition) => void;
  onConvert: (entry: Acquisition) => void;
}

const COLUMNS: { key: AcquisitionSortKey | null; label: string; className?: string }[] = [
  { key: 'found_at', label: 'Datum' },
  { key: 'sender', label: 'Von' },
  { key: 'provider', label: 'Anbieter' },
  { key: 'channel', label: 'Kanal' },
  { key: 'title', label: 'Projekttitel' },
  { key: 'consultant', label: 'Berater' },
  { key: null, label: 'Opportunity' },
  { key: null, label: '', className: 'text-right' },
];

/** Farbe je Kanal, damit sich die Liste beim Durchsehen sortiert anfuehlt. */
const CHANNEL_STYLES: Record<string, string> = {
  Mail: 'bg-sky-50 text-sky-700 border-sky-200',
  Telefon: 'bg-amber-50 text-amber-700 border-amber-200',
  Portal: 'bg-violet-50 text-violet-700 border-violet-200',
  LinkedIn: 'bg-blue-50 text-blue-700 border-blue-200',
  XING: 'bg-teal-50 text-teal-700 border-teal-200',
  Empfehlung: 'bg-brand-50 text-brand-700 border-brand-200',
  Sonstiges: 'bg-ink-100 text-ink-600 border-ink-200',
};

/** Kurzform des Funddatums plus Alter in Tagen als Titelhinweis. */
function formatFound(value: string): { label: string; title: string } {
  const date = new Date(`${value.slice(0, 10)}T00:00:00`);
  if (Number.isNaN(date.getTime())) return { label: '—', title: '' };

  const days = Math.round((Date.now() - date.getTime()) / 86_400_000);
  const age = days <= 0 ? 'heute' : days === 1 ? 'vor 1 Tag' : `vor ${days} Tagen`;
  return {
    label: date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }),
    title: `Gefunden ${age}`,
  };
}

/**
 * Nur absolute http- und https-Adressen werden zum Link. Das Backend legt
 * ohnehin nur solche ab; die Pruefung hier faengt Altbestand und Eintraege ab,
 * die auf anderem Weg in die Tabelle gekommen sind. "hays.de/projekt/1" wuerde
 * der Browser sonst als Pfad innerhalb des CRM auflegen und ins Leere fuehren.
 */
function safeLink(value: string | null): string | null {
  if (!value) return null;
  return /^https?:\/\//i.test(value) ? value : null;
}

/**
 * Kennzeichen fuer eine Bewerbung, die ins Archiv zurueckgefallen ist: sie war
 * schon eine Opportunity, und die ist weg. Ohne den Hinweis stuende sie
 * unerklaerlich im Archiv.
 */
function returnedNote(entry: Acquisition): string | null {
  if (entry.converted_at === null) return null;
  if (entry.opportunity_deleted_at) return 'Opportunity im Papierkorb';
  return 'Opportunity gelöscht';
}

/** Kurze Zusammenfassung der Angaben, die keine eigene Spalte haben. */
function extras(entry: Acquisition): string[] {
  const parts: string[] = [];
  if (entry.company) parts.push(entry.company);
  if (entry.fixed_price !== null) parts.push(`${formatEuro(entry.fixed_price)} Festpreis`);
  else if (entry.daily_rate !== null) parts.push(`${formatEuro(entry.daily_rate)}/Tag`);
  if (entry.duration_days !== null) parts.push(`${entry.duration_days} PT`);
  return parts;
}

const SortIcon: React.FC<{ active: boolean; direction: 'asc' | 'desc' }> = ({ active, direction }) => (
  <svg
    className={`h-3 w-3 shrink-0 transition ${active ? 'text-brand-600' : 'text-ink-300'} ${
      active && direction === 'asc' ? 'rotate-180' : ''
    }`}
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
  >
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
  </svg>
);

export const AcquisitionTable: React.FC<AcquisitionTableProps> = ({
  entries,
  sortConfig,
  onSort,
  editingId,
  busyId,
  onEdit,
  onDelete,
  onConvert,
}) => (
  <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 min-w-[1000px] text-left">
        <thead className="border-b border-ink-200 bg-ink-50">
          <tr>
            {COLUMNS.map((column) => (
              <th
                key={column.label || 'aktionen'}
                className={`px-4 py-3 text-[10px] font-extrabold uppercase tracking-wider text-ink-500 ${
                  column.className ?? ''
                }`}
              >
                {column.key ? (
                  <button
                    onClick={() => onSort(column.key!)}
                    className="flex items-center gap-1.5 transition hover:text-brand-700"
                  >
                    {column.label}
                    <SortIcon active={sortConfig.key === column.key} direction={sortConfig.direction} />
                  </button>
                ) : (
                  column.label
                )}
              </th>
            ))}
          </tr>
        </thead>

        <tbody className="divide-y divide-ink-100">
          {entries.map((entry) => {
            const found = formatFound(entry.found_at);
            const link = safeLink(entry.link);
            const extraParts = extras(entry);
            const returned = returnedNote(entry);
            const isBusy = busyId === entry.id;

            return (
              <tr
                key={entry.id}
                className={`transition ${editingId === entry.id ? 'bg-brand-50' : 'hover:bg-ink-50'}`}
              >
                <td className="whitespace-nowrap px-4 py-3 text-sm tabular-nums text-ink-700" title={found.title}>
                  {found.label}
                </td>
                <td className="px-4 py-3 text-sm text-ink-700">{entry.sender || '—'}</td>
                <td className="px-4 py-3 text-sm font-bold text-ink-800">{entry.provider || '—'}</td>
                <td className="px-4 py-3">
                  {entry.channel ? (
                    <span
                      className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider ${
                        CHANNEL_STYLES[entry.channel] ?? CHANNEL_STYLES.Sonstiges
                      }`}
                    >
                      {entry.channel}
                    </span>
                  ) : (
                    <span className="text-sm text-ink-400">—</span>
                  )}
                </td>

                <td className="max-w-sm px-4 py-3">
                  {link ? (
                    <a
                      href={link}
                      target="_blank"
                      rel="noopener noreferrer"
                      title={`${entry.title} - öffnet ${link}`}
                      className="inline-flex items-baseline gap-1 text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600"
                    >
                      <span className="truncate">{entry.title}</span>
                      <span aria-hidden>↗</span>
                    </a>
                  ) : (
                    <span className="text-sm font-bold text-ink-900">{entry.title}</span>
                  )}
                  {extraParts.length > 0 && (
                    <p className="mt-0.5 truncate text-[11px] text-ink-400">{extraParts.join(' · ')}</p>
                  )}
                  {returned && (
                    <span
                      title={
                        entry.opportunity_deleted_at
                          ? 'Diese Bewerbung war schon eine Opportunity. Die liegt im Papierkorb - wird sie dort zurückgeholt, verschwindet dieser Eintrag wieder.'
                          : 'Diese Bewerbung war schon eine Opportunity. Die ist endgültig gelöscht, deshalb steht die Bewerbung wieder hier.'
                      }
                      className="mt-1 inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-amber-700"
                    >
                      {returned}
                    </span>
                  )}
                </td>

                <td className="px-4 py-3 text-sm text-ink-700">{entry.consultant || '—'}</td>

                <td className="px-4 py-3">
                  <button
                    onClick={() => onConvert(entry)}
                    disabled={isBusy}
                    title="Als neue Opportunity in der Phase „Neu“ anlegen. Der Eintrag verschwindet danach aus dieser Liste."
                    className="flex items-center gap-1.5 whitespace-nowrap rounded-xl bg-brand-500 px-3 py-1.5 text-xs font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-50"
                  >
                    <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 4v16m8-8H4" />
                    </svg>
                    {isBusy ? 'Lege an...' : 'Opportunity'}
                  </button>
                </td>

                <td className="whitespace-nowrap px-4 py-3 text-right">
                  <div className="inline-flex gap-1">
                    <button
                      onClick={() => onEdit(entry)}
                      title="Bearbeiten"
                      aria-label={`${entry.title} bearbeiten`}
                      className="rounded-lg p-2 text-ink-400 transition hover:bg-brand-50 hover:text-brand-700"
                    >
                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                        />
                      </svg>
                    </button>
                    <button
                      onClick={() => onDelete(entry)}
                      title="Löschen"
                      aria-label={`${entry.title} löschen`}
                      className="rounded-lg p-2 text-ink-400 transition hover:bg-red-50 hover:text-red-600"
                    >
                      <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>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  </div>
);