import React, { useMemo } from 'react';
import { Modal } from '../ui/Modal';
import { UserAvatar } from '../ui/UserAvatar';
import { formatEventRange, parseSqlDateTime } from './calendarUtils';
import {
  leadFullName,
  userColor,
  type AppUser,
  type CalendarEvent,
  type Lead,
} from '../../types';

interface UserDetailModalProps {
  user: AppUser;
  leads: Lead[];
  events: CalendarEvent[];
  onClose: () => void;
  onOpenLead: (leadId: number) => void;
}

/** Detailfenster fuer einen im Kalender markierten Benutzer. */
export const UserDetailModal: React.FC<UserDetailModalProps> = ({
  user,
  leads,
  events,
  onClose,
  onOpenLead,
}) => {
  const color = userColor(user);

  const ownedLeads = useMemo(
    () =>
      leads
        .filter((lead) => lead.owner_id === user.id)
        .sort((a, b) => leadFullName(a).localeCompare(leadFullName(b), 'de')),
    [leads, user.id]
  );

  // Die naechsten Termine, an denen der Benutzer beteiligt ist (Ersteller
  // oder Teilnehmer).
  const upcoming = useMemo(() => {
    const now = Date.now();
    return events
      .filter(
        (event) =>
          (event.created_by === user.id ||
            event.participants.some((participant) => participant.id === user.id)) &&
          parseSqlDateTime(event.ends_at).getTime() >= now
      )
      .sort(
        (a, b) =>
          parseSqlDateTime(a.starts_at).getTime() - parseSqlDateTime(b.starts_at).getTime()
      )
      .slice(0, 5);
  }, [events, user.id]);

  return (
    <Modal
      title={user.name}
      subtitle={`@${user.username} · ${user.role === 'admin' ? 'Administrator' : 'Benutzer'}`}
      onClose={onClose}
      size="md"
      footer={
        <button
          type="button"
          onClick={onClose}
          className="w-full rounded-xl border border-ink-200 py-3 text-sm font-bold text-ink-600 transition hover:bg-ink-100"
        >
          Schliessen
        </button>
      }
    >
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <UserAvatar user={user} size={64} shape="rounded" />
          <div className="min-w-0">
            <p className="truncate text-base font-extrabold text-ink-900">{user.name}</p>
            <p className="truncate text-sm text-ink-400">{user.email || 'Keine E-Mail hinterlegt'}</p>
            <p className="mt-1 flex items-center gap-2 text-xs font-bold text-ink-400">
              <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
              Kalenderfarbe
            </p>
          </div>
        </div>

        <section>
          <h3 className="mb-2 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">
            Naechste Termine
          </h3>
          {upcoming.length === 0 ? (
            <p className="rounded-xl border border-dashed border-ink-200 px-4 py-5 text-center text-xs font-semibold text-ink-400">
              Keine anstehenden Termine.
            </p>
          ) : (
            <ul className="space-y-2">
              {upcoming.map((event) => (
                <li
                  key={event.id}
                  className="rounded-xl border border-ink-200 bg-surface px-3 py-2.5 text-sm"
                >
                  <p className="truncate font-bold text-ink-900">{event.title}</p>
                  <p className="text-xs text-ink-400">
                    {parseSqlDateTime(event.starts_at).toLocaleDateString('de-DE', {
                      weekday: 'short',
                      day: '2-digit',
                      month: '2-digit',
                    })}{' '}
                    · {formatEventRange(event)}
                  </p>
                </li>
              ))}
            </ul>
          )}
        </section>

        <section>
          <h3 className="mb-2 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">
            Zustaendig fuer {ownedLeads.length} {ownedLeads.length === 1 ? 'Kontakt' : 'Kontakte'}
          </h3>
          {ownedLeads.length === 0 ? (
            <p className="rounded-xl border border-dashed border-ink-200 px-4 py-5 text-center text-xs font-semibold text-ink-400">
              Aktuell keine Kontakte zugeordnet.
            </p>
          ) : (
            <ul className="scrollbar-slim max-h-48 space-y-2 overflow-y-auto">
              {ownedLeads.map((lead) => (
                <li key={lead.id}>
                  <button
                    type="button"
                    onClick={() => onOpenLead(lead.id)}
                    className="w-full rounded-xl border border-ink-200 bg-surface px-3 py-2 text-left transition hover:border-brand-300 hover:bg-brand-50/40"
                  >
                    <span className="block truncate text-sm font-bold text-ink-900">
                      {leadFullName(lead)}
                    </span>
                    {lead.company && (
                      <span className="block truncate text-xs text-ink-400">{lead.company}</span>
                    )}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>
    </Modal>
  );
};