duty-teller/webapp-next/src/components/day-detail/DayDetailContent.tsx

/**
 * Shared content for day detail: title and sections (duty, unavailable, vacation, events).
 * Ported from webapp/js/dayDetail.js buildDayDetailContent.
 */

"use client";

import { useMemo } from "react";
import { useTranslation } from "@/i18n/use-translation";
import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
import { ContactLinks } from "@/components/contact";
import type { DutyWithUser } from "@/types";
import { cn } from "@/lib/utils";

const NBSP = "\u00a0";

export interface DayDetailContentProps {
  /** YYYY-MM-DD key for the day. */
  dateKey: string;
  /** Duties overlapping this day. */
  duties: DutyWithUser[];
  /** Calendar event summary strings for this day. */
  eventSummaries: string[];
  className?: string;
}

export function DayDetailContent({
  dateKey,
  duties,
  eventSummaries,
  className,
}: DayDetailContentProps) {
  const { t } = useTranslation();
  const todayKey = localDateString(new Date());
  const ddmm = dateKeyToDDMM(dateKey);
  const title =
    dateKey === todayKey ? t("duty.today") + ", " + ddmm : ddmm;

  const fromLabel = t("hint.from");
  const toLabel = t("hint.to");

  const dutyList = useMemo(
    () =>
      duties
        .filter((d) => d.event_type === "duty")
        .sort(
          (a, b) =>
            new Date(a.start_at || 0).getTime() -
            new Date(b.start_at || 0).getTime()
        ),
    [duties]
  );

  const unavailableList = useMemo(
    () => duties.filter((d) => d.event_type === "unavailable"),
    [duties]
  );

  const vacationList = useMemo(
    () => duties.filter((d) => d.event_type === "vacation"),
    [duties]
  );

  const dutyRows = useMemo(() => {
    const hasTimes = dutyList.some((it) => it.start_at || it.end_at);
    return hasTimes
      ? getDutyMarkerRows(dutyList, dateKey, NBSP, fromLabel, toLabel)
      : dutyList.map((d) => ({
          id: d.id,
          timePrefix: "",
          fullName: d.full_name ?? "",
          phone: d.phone,
          username: d.username,
        }));
  }, [dutyList, dateKey, fromLabel, toLabel]);

  const uniqueUnavailable = useMemo(
    () => [
      ...new Set(
        unavailableList.map((d) => d.full_name ?? "").filter(Boolean)
      ),
    ],
    [unavailableList]
  );

  const uniqueVacation = useMemo(
    () => [
      ...new Set(vacationList.map((d) => d.full_name ?? "").filter(Boolean)),
    ],
    [vacationList]
  );

  const summaries = eventSummaries ?? [];

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      <h2
        id="day-detail-title"
        className="text-[1.1rem] font-semibold leading-tight m-0"
      >
        {title}
      </h2>
      <div className="flex flex-col gap-4">
        {dutyList.length > 0 && (
          <section
            className="day-detail-section-duty"
            aria-labelledby="day-detail-duty-heading"
          >
            <h3
              id="day-detail-duty-heading"
              className="text-[0.8rem] font-semibold text-duty m-0 mb-1"
            >
              {t("event_type.duty")}
            </h3>
            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-2.5 [&_li]:flex [&_li]:flex-col [&_li]:gap-1">
              {dutyRows.map((r) => (
                <li key={r.id}>
                  {r.timePrefix && (
                    <span className="text-muted-foreground">{r.timePrefix} — </span>
                  )}
                  <span className="font-semibold">{r.fullName}</span>
                  <ContactLinks
                    phone={r.phone}
                    username={r.username}
                    layout="inline"
                    showLabels={true}
                    className="text-[0.85rem] mt-0.5"
                  />
                </li>
              ))}
            </ul>
          </section>
        )}

        {uniqueUnavailable.length > 0 && (
          <section
            className="day-detail-section-unavailable"
            aria-labelledby="day-detail-unavailable-heading"
          >
            <h3
              id="day-detail-unavailable-heading"
              className="text-[0.8rem] font-semibold text-unavailable m-0 mb-1"
            >
              {t("event_type.unavailable")}
            </h3>
            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
              {uniqueUnavailable.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
          </section>
        )}

        {uniqueVacation.length > 0 && (
          <section
            className="day-detail-section-vacation"
            aria-labelledby="day-detail-vacation-heading"
          >
            <h3
              id="day-detail-vacation-heading"
              className="text-[0.8rem] font-semibold text-vacation m-0 mb-1"
            >
              {t("event_type.vacation")}
            </h3>
            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
              {uniqueVacation.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
          </section>
        )}

        {summaries.length > 0 && (
          <section
            className="day-detail-section-events"
            aria-labelledby="day-detail-events-heading"
          >
            <h3
              id="day-detail-events-heading"
              className="text-[0.8rem] font-semibold text-accent m-0 mb-1"
            >
              {t("hint.events")}
            </h3>
            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
              {summaries.map((s) => (
                <li key={String(s)}>{String(s)}</li>
              ))}
            </ul>
          </section>
        )}
      </div>
    </div>
  );
}