import {
  Participant,
  FieldConfig,
  FieldKey,
} from "@/types/participant-list/provisional-types";
import { isFieldVisible } from "@/components/pages/client/participant-list/common/utils";
import ParticipantAvatar from "@/components/pages/client/participant-list/participants/partials/avatar";
import StatusBadge from "@/components/pages/client/participant-list/participants/partials/status-badge";

type InfoField = {
  key: FieldKey;
  label: string;
  value: string;
};

type ParticipantHeaderProps = {
  participant: Participant;
  infoFields: InfoField[];
  visibilityControls: FieldConfig[];
};

function ParticipantHeader({
  participant,
  infoFields,
  visibilityControls,
}: ParticipantHeaderProps) {
  const { firstName, lastName, id, status } = participant;
  const visible = (key: FieldKey) => isFieldVisible(key, visibilityControls);

  const nameParts = [
    visible("firstName") && firstName,
    visible("lastName") && lastName,
  ].filter(Boolean) as string[];

  const displayName =
    nameParts.length > 0
      ? nameParts.join(" ")
      : visible("id") && id != null
        ? `Participant ID: ${id}`
        : "Participant";

  return (
    <div className="rounded-2xl bg-white dark:bg-neutral-800/50 p-5 space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <ParticipantAvatar
            firstName={firstName}
            lastName={lastName}
            size="md"
            visibilityControls={visibilityControls}
          />
          <div>
            <p className="font-inter font-bold text-gray-900 dark:text-white text-lg">
              {displayName}
            </p>
            {visible("id") && id != null && (
              <p className="text-xs text-gray-400 dark:text-gray-300">#{id}</p>
            )}
          </div>
        </div>
        <StatusBadge status={status} />
      </div>

      {infoFields.length > 0 && (
        <div
          className="grid gap-3"
          style={{
            gridTemplateColumns: `repeat(${infoFields.length}, minmax(0, 1fr))`,
          }}
        >
          {infoFields.map((field) => (
            <div
              key={field.key}
              className="rounded-xl bg-gray-100 dark:bg-neutral-800 p-3"
            >
              <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-300">
                {field.label}
              </p>
              <p className="text-sm font-semibold text-gray-900 dark:text-white mt-1">
                {field.value}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default ParticipantHeader;