"use client";

import { useMemo } from "react";
import { CheckCircle2, Clock, Calendar, Loader2 } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useT, useLocale } from "@/shared/i18n/client";
import { Badge } from "@/presentation/components/ui/badge";
import { ScrollArea } from "@/presentation/components/ui/scroll-area";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import type {
  OrderInstallationRequest,
  OrderInstallationRequestGroup,
} from "@/domain/entities/telematics-order";

interface Props {
  orderId: number;
  reference: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const SCHEDULED = "scheduled";

function hasResponded(r: OrderInstallationRequest): boolean {
  if (r.status === "pending") return false;
  if (r.proposed_dates.length > 0 || r.status === SCHEDULED) return true;
  // Demandes scindées en groupes : répondu si au moins un groupe a proposé.
  return (r.groups ?? []).some(
    (g) => g.proposed_dates.length > 0 || g.status === SCHEDULED
  );
}

export default function InstallerAvailabilitiesDialog({
  orderId,
  reference,
  open,
  onOpenChange,
}: Props) {
  const t = useT();
  const tr = t.telematics.installerAvailabilities;
  const locale = useLocale();
  const container = useRepositories();

  const { data, loading, error } = useApiQuery(
    () => container.telematicsOrderRepository.getInstallationRequests(orderId),
    { deps: [orderId, open], enabled: open }
  );

  const requests = useMemo(() => data ?? [], [data]);
  const respondedCount = requests.filter(hasResponded).length;
  const scheduledList = requests.filter((r) => r.status === SCHEDULED);

  const fmtChip = (iso: string) =>
    new Date(iso).toLocaleDateString(locale === "fr" ? "fr-FR" : "en-US", {
      weekday: "short",
      day: "2-digit",
      month: "short",
    });

  // Puces de dates pour un jeu de créneaux (groupe ou demande legacy).
  const DateChips = ({
    dates,
    selectedDate,
  }: {
    dates: string[];
    selectedDate: string | null;
  }) =>
    dates.length === 0 ? null : (
      <div className="flex flex-wrap gap-2 mt-2">
        {dates.map((d) => {
          const selected =
            !!selectedDate &&
            new Date(d).getTime() === new Date(selectedDate).getTime();
          return (
            <span
              key={d}
              className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs ${
                selected
                  ? "border-emerald-500 bg-emerald-600 text-white"
                  : "border-border bg-background text-foreground"
              }`}
            >
              <Calendar className="w-3 h-3" />
              {fmtChip(d)}
              {selected && <CheckCircle2 className="w-3 h-3" />}
            </span>
          );
        })}
      </div>
    );

  // Après une contre-proposition du client, les créneaux pertinents sont ceux
  // qu'il a suggérés ; sinon ceux proposés par l'installateur.
  const relevantDates = (g: OrderInstallationRequestGroup) =>
    g.client_suggested_dates.length > 0 ? g.client_suggested_dates : g.proposed_dates;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl" onOpenAutoFocus={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>{tr.title}</DialogTitle>
          <DialogDescription>{tr.lead(reference)}</DialogDescription>
        </DialogHeader>

        <div className="flex items-center justify-between">
          <p className="text-sm font-semibold">{tr.responsesTitle}</p>
          {requests.length > 0 && (
            <p className="text-xs text-muted-foreground">
              {tr.responsesCount(respondedCount, requests.length)}
            </p>
          )}
        </div>

        {loading ? (
          <div className="flex items-center justify-center py-10">
            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
          </div>
        ) : error ? (
          <p className="text-sm text-destructive py-6 text-center">{tr.loadError}</p>
        ) : requests.length === 0 ? (
          <p className="text-sm text-muted-foreground py-6 text-center">
            {tr.noResponses}
          </p>
        ) : (
          <ScrollArea className="max-h-[55vh] pr-3">
            <div className="space-y-3">
              {scheduledList.map((s) => (
                <div
                  key={`banner-${s.id}`}
                  className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 flex items-start gap-2.5"
                >
                  <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-semibold text-emerald-800">
                      {tr.scheduledBanner(s.selected_date ? fmtChip(s.selected_date) : "—")}
                    </p>
                    {s.installer_name && (
                      <p className="text-xs text-emerald-700">
                        {tr.scheduledWith(s.installer_name)}
                      </p>
                    )}
                  </div>
                </div>
              ))}

              {requests.map((r) => {
                const responded = hasResponded(r);
                const isScheduled = r.status === SCHEDULED;
                const groups = r.groups ?? [];
                return (
                  <div
                    key={r.id}
                    className={`rounded-lg border p-4 ${
                      isScheduled ? "border-emerald-300 bg-emerald-50/40" : "border-border"
                    }`}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <p className="font-semibold text-sm">
                          {r.installer_name || `#${r.assigned_user_id ?? "?"}`}
                        </p>
                        {r.reference && (
                          <p className="text-xs text-muted-foreground font-mono">
                            {r.reference}
                          </p>
                        )}
                      </div>
                      <Badge
                        variant="secondary"
                        className={`shrink-0 gap-1 ${
                          responded
                            ? "bg-emerald-100 text-emerald-700"
                            : "bg-amber-100 text-amber-700"
                        }`}
                      >
                        {responded ? (
                          <CheckCircle2 className="w-3 h-3" />
                        ) : (
                          <Clock className="w-3 h-3" />
                        )}
                        {responded ? tr.responded : tr.awaiting}
                      </Badge>
                    </div>

                    {groups.length > 0 ? (
                      // Demande scindée en groupes : un bloc de créneaux par groupe.
                      <div className="mt-3 space-y-2">
                        {groups.map((g) => (
                          <div
                            key={g.id}
                            className="rounded-md border border-border bg-background/60 p-2.5"
                          >
                            <div className="flex items-center justify-between gap-2">
                              <span
                                className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium border"
                                style={{
                                  color: g.status_color,
                                  borderColor: g.status_color,
                                  backgroundColor: `${g.status_color}14`,
                                }}
                              >
                                {g.status_label}
                              </span>
                              <span className="text-xs text-muted-foreground">
                                {(g.vehicles ?? [])
                                  .map((v) => v.plate || v.model || `#${v.id}`)
                                  .join(", ")}
                              </span>
                            </div>
                            <DateChips
                              dates={relevantDates(g)}
                              selectedDate={g.selected_date}
                            />
                          </div>
                        ))}
                      </div>
                    ) : (
                      // Demande legacy : créneaux au niveau demande.
                      <DateChips
                        dates={
                          r.client_suggested_dates.length > 0
                            ? r.client_suggested_dates
                            : r.proposed_dates
                        }
                        selectedDate={r.selected_date}
                      />
                    )}
                  </div>
                );
              })}
            </div>
          </ScrollArea>
        )}
      </DialogContent>
    </Dialog>
  );
}