craftvia/src/components/planning/recommendations-panel.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { Info, Lightbulb, MapPin, X } from "lucide-react";
import { formatDistance } from "@/lib/geo/distance";
import { formatDayShort, formatMinutes } from "@/lib/planning/text";
import { buttonCls } from "@/components/work-orders/button-cls";
import type { BoardOrder } from "@/server/services/planning/data";

export type Recommendation = {
  teamId: string;
  teamName: string;
  day: string;
  distanceKm: number;
  nearOrder: { id: string; number: string };
  freeMinutes: number;
  requiredMinutes: number;
  tight: boolean;
  suggestedStart: string;
  text: string;
};

type Response = {
  status: "ok" | "no_coordinates" | "not_schedulable";
  hint: string | null;
  requiredMinutes: number;
  recommendations: Recommendation[];
  nearby: { status: string; radiusKm: number; items: (BoardOrder & { distanceKm: number })[] };
};

/** Suggestions for one unplanned order (L13). "Übernehmen" only prefills the schedule popover. */
export function RecommendationsPanel({
  workOrderId,
  locale,
  onTake,
  onPlanTogether,
  onClose,
}: {
  workOrderId: string;
  locale: string;
  onTake: (rec: Recommendation) => void;
  onPlanTogether: (order: BoardOrder, rec: Recommendation | null, requiredMinutes: number) => void;
  onClose: () => void;
}) {
  const t = useTranslations("planning");
  const [data, setData] = useState<Response | null>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/v1/planning/recommendations?workOrderId=${encodeURIComponent(workOrderId)}&locale=${locale === "en" ? "en" : "de"}`, { signal: ctrl.signal })
      .then((r) => (r.ok ? (r.json() as Promise<Response>) : Promise.reject(new Error(String(r.status)))))
      .then(setData)
      .catch(() => {
        if (!ctrl.signal.aborted) setFailed(true);
      });
    return () => ctrl.abort();
  }, [workOrderId, locale]);

  const headingId = `rec-${workOrderId}`;
  return (
    <section aria-labelledby={headingId} className="rounded-lg border border-[var(--info)] bg-background p-3 text-sm">
      <div className="flex items-start justify-between gap-2">
        <div>
          <h3 id={headingId} className="flex items-center gap-1.5 font-heading font-semibold">
            <Lightbulb className="size-4 text-[var(--info)]" aria-hidden />
            {t("recommend.title")}
          </h3>
          <p className="text-xs text-muted-foreground">{t("recommend.sub")}</p>
        </div>
        <button type="button" onClick={onClose} aria-label={t("recommend.close")} className="grid size-11 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-muted">
          <X className="size-4" aria-hidden />
        </button>
      </div>

      {!data && !failed && (
        <p role="status" className="mt-2 text-xs text-muted-foreground">
          {t("recommend.loading")}
        </p>
      )}
      {failed && (
        <p role="alert" className="mt-2 text-xs text-[var(--risk)]">
          {t("recommend.failed")}
        </p>
      )}
      {data?.hint && (
        <p className="mt-2 flex items-start gap-1.5 text-xs">
          <Info className="mt-0.5 size-3.5 shrink-0 text-[var(--info)]" aria-hidden />
          {data.hint}
        </p>
      )}

      {data && data.recommendations.length > 0 && (
        <ul className="mt-2 space-y-2">
          {data.recommendations.map((r) => (
            <li key={`${r.teamId}-${r.day}`} className="rounded-md border p-2" title={r.text}>
              <p className="text-[13px] font-semibold">
                {t("recommend.card", {
                  day: formatDayShort(r.day, locale),
                  team: r.teamName,
                  distance: formatDistance(r.distanceKm, locale),
                  number: r.nearOrder.number,
                  free: formatMinutes(r.freeMinutes, locale),
                })}
              </p>
              {r.tight && <p className="text-xs font-semibold text-[var(--warn)]">{t("recommend.tight")}</p>}
              <button type="button" onClick={() => onTake(r)} className={`${buttonCls("outline")} mt-1.5 w-full`}>
                {t("recommend.take")}
              </button>
            </li>
          ))}
        </ul>
      )}

      {data && data.nearby.status === "ok" && (
        <div className="mt-3 border-t pt-2">
          <h4 className="text-xs font-semibold">{t("recommend.nearbyTitle")}</h4>
          {data.nearby.items.length === 0 ? (
            <p className="text-xs text-muted-foreground">{t("recommend.nearbyEmpty")}</p>
          ) : (
            <>
              <p className="text-xs text-muted-foreground">{t("recommend.nearbyQuestion", { radius: data.nearby.radiusKm })}</p>
              <ul className="mt-1 space-y-1.5">
                {data.nearby.items.map((o) => (
                  <li key={o.id} className="rounded-md border p-2">
                    <p className="flex items-center gap-1 text-xs">
                      <MapPin className="size-3.5 shrink-0" aria-hidden />
                      <Link href={`/work-orders/${o.id}`} className="font-mono font-semibold underline-offset-2 hover:underline">
                        {o.number}
                      </Link>
                      · {formatDistance(o.distanceKm, locale)}
                    </p>
                    <p className="truncate text-xs text-muted-foreground">{o.customerName}</p>
                    <button type="button" onClick={() => onPlanTogether(o, data.recommendations[0] ?? null, data.requiredMinutes)} className={`${buttonCls("ghost")} mt-1 w-full`}>
                      {t("recommend.planTogether")}
                    </button>
                  </li>
                ))}
              </ul>
            </>
          )}
        </div>
      )}
    </section>
  );
}