"use client";

import { useMemo, useState } from "react";
import {
  Loader2,
  Package,
  PackageCheck,
  User,
  UserPlus,
  UserCheck,
  MapPin,
  Mail,
  Phone,
  ArrowRight,
  ArrowLeft,
  Clock,
  Check,
  Trash2,
} from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useT } from "@/shared/i18n/client";
import { Button } from "@/presentation/components/ui/button";
import { Badge } from "@/presentation/components/ui/badge";
import { Checkbox } from "@/presentation/components/ui/checkbox";
import { ScrollArea } from "@/presentation/components/ui/scroll-area";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import type { TelematicsOrderDetail } from "@/domain/entities/telematics-order";

interface RequestInstallationDialogProps {
  order: TelematicsOrderDetail | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
  /** Ids des véhicules déjà affectés (non réaffectables). */
  assignedVehicleIds: Set<number>;
  /** Map id véhicule → installateur(s) déjà affecté(s), pour affichage. */
  vehicleInstallers: Map<number, string[]>;
}

type Step = 1 | 2 | 3;

export default function RequestInstallationDialog({
  order,
  open,
  onOpenChange,
  onSuccess,
  assignedVehicleIds,
  vehicleInstallers,
}: RequestInstallationDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-4xl" onOpenAutoFocus={(e) => e.preventDefault()}>
        {/* Le contenu est démonté à la fermeture (Radix) : l'état du wizard
            (étape, sélection) se réinitialise naturellement à chaque ouverture. */}
        {open && order && (
          <Wizard
            order={order}
            onOpenChange={onOpenChange}
            onSuccess={onSuccess}
            assignedVehicleIds={assignedVehicleIds}
            vehicleInstallers={vehicleInstallers}
          />
        )}
      </DialogContent>
    </Dialog>
  );
}

interface WizardProps {
  order: TelematicsOrderDetail;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
  assignedVehicleIds: Set<number>;
  vehicleInstallers: Map<number, string[]>;
}

function Wizard({
  order,
  onOpenChange,
  onSuccess,
  assignedVehicleIds,
  vehicleInstallers,
}: WizardProps) {
  const t = useT();
  const tr = t.telematics.requestInstallation;
  const container = useRepositories();

  const [step, setStep] = useState<Step>(1);
  // Sélection de travail : véhicules cochés en attente d'affectation à un groupe.
  const [selectedVehicles, setSelectedVehicles] = useState<number[]>([]);
  // Groupes construits dans le dialog : chacun = véhicules + installateur(s).
  const [groups, setGroups] = useState<
    { vehicleIds: number[]; installerIds: number[] }[]
  >([]);
  // Sélecteur d'installateurs (pour le groupe en cours de création).
  const [pickerOpen, setPickerOpen] = useState(false);
  const [pickerInstallers, setPickerInstallers] = useState<number[]>([]);

  const { data: installers, loading: installersLoading } = useApiQuery(
    () => container.installationRepository.getInstallerOptions(),
    { deps: [] }
  );

  const installerName = useMemo(() => {
    const map = new Map<number, string>();
    for (const i of installers ?? []) map.set(i.id, i.name);
    return map;
  }, [installers]);

  const vehicleById = useMemo(() => {
    const map = new Map<number, TelematicsOrderDetail["vehicles"][number]>();
    for (const v of order.vehicles ?? []) map.set(v.id, v);
    return map;
  }, [order.vehicles]);

  // Regroupement des véhicules par site de livraison, dans l'ordre d'apparition.
  // Les véhicules sans site sont rassemblés dans un groupe « Sans site ».
  const vehicleSiteGroups = useMemo(() => {
    const map = new Map<
      string,
      { key: string; siteName: string | null; vehicles: TelematicsOrderDetail["vehicles"] }
    >();
    for (const v of order.vehicles ?? []) {
      const key =
        v.site_id != null
          ? `id:${v.site_id}`
          : v.site_name
            ? `name:${v.site_name}`
            : "none";
      let g = map.get(key);
      if (!g) {
        g = { key, siteName: v.site_name ?? null, vehicles: [] };
        map.set(key, g);
      }
      g.vehicles.push(v);
    }
    return Array.from(map.values());
  }, [order.vehicles]);

  const mutation = useApiMutation(
    () =>
      container.telematicsOrderRepository.requestInstallation(order.id, {
        assignments: groups.map((g) => ({
          vehicle_ids: g.vehicleIds,
          installer_ids: g.installerIds,
        })),
      }),
    {
      successMessage: tr.success,
      onSuccess: () => {
        onOpenChange(false);
        onSuccess();
      },
    }
  );

  const boxesCount = useMemo(
    () => order.lines.reduce((sum, l) => sum + l.quantity, 0),
    [order]
  );
  const vehiclesCount = order.vehicles?.length ?? 0;

  // Véhicules déjà placés dans un groupe (cette session).
  const groupedVehicleIds = useMemo(() => {
    const s = new Set<number>();
    for (const g of groups) for (const id of g.vehicleIds) s.add(id);
    return s;
  }, [groups]);

  // Affectables = ni affectés côté serveur, ni déjà placés dans un groupe.
  const availableVehicleIds = useMemo(
    () =>
      (order.vehicles ?? [])
        .filter(
          (v) => !assignedVehicleIds.has(v.id) && !groupedVehicleIds.has(v.id)
        )
        .map((v) => v.id),
    [order.vehicles, assignedVehicleIds, groupedVehicleIds]
  );
  const allAvailableSelected =
    availableVehicleIds.length > 0 &&
    selectedVehicles.length === availableVehicleIds.length;

  // On ne peut soumettre que lorsque tous les véhicules affectables sont placés.
  const remainingCount = availableVehicleIds.length;
  const canSubmit = groups.length > 0 && remainingCount === 0;

  // Une commande peut être livrée sur plusieurs sites : on affiche chaque site
  // avec son contact dédié (et non plus seulement le premier shipment).
  const shipments = order.shipments ?? [];
  const sitesCount = shipments.length;
  const location =
    sitesCount === 0
      ? "—"
      : sitesCount === 1
        ? shipments[0].site_name || shipments[0].address || "—"
        : tr.sitesCount(sitesCount);

  const toggleVehicle = (id: number) =>
    setSelectedVehicles((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );

  const toggleAllVehicles = () =>
    setSelectedVehicles((prev) =>
      prev.length === availableVehicleIds.length ? [] : [...availableVehicleIds]
    );

  // Sélection/désélection en masse des véhicules affectables d'un même site.
  const toggleSiteVehicles = (siteVehicleIds: number[]) => {
    const available = siteVehicleIds.filter((id) =>
      availableVehicleIds.includes(id)
    );
    if (available.length === 0) return;
    setSelectedVehicles((prev) => {
      const allSelected = available.every((id) => prev.includes(id));
      if (allSelected) return prev.filter((id) => !available.includes(id));
      const set = new Set(prev);
      for (const id of available) set.add(id);
      return Array.from(set);
    });
  };

  const togglePickerInstaller = (id: number) =>
    setPickerInstallers((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );

  const openPicker = () => {
    if (selectedVehicles.length === 0) return;
    setPickerInstallers([]);
    setPickerOpen(true);
  };

  // Valide le groupe en cours : véhicules sélectionnés → installateurs choisis.
  const confirmGroup = () => {
    if (selectedVehicles.length === 0 || pickerInstallers.length === 0) return;
    setGroups((prev) => [
      ...prev,
      {
        vehicleIds: [...selectedVehicles],
        installerIds: [...pickerInstallers],
      },
    ]);
    setSelectedVehicles([]);
    setPickerInstallers([]);
    setPickerOpen(false);
  };

  const removeGroup = (index: number) =>
    setGroups((prev) => prev.filter((_, i) => i !== index));

  const submit = () => {
    if (!canSubmit) return;
    mutation.mutate(undefined);
  };

  const lead =
    step === 1
      ? tr.step1Lead(order.reference)
      : step === 2
        ? tr.step2Lead(order.reference)
        : tr.step3Lead(order.reference);
  const title =
    step === 1 ? tr.step1Title : step === 2 ? tr.step2Title : tr.step3Title;

  return (
    <>
      <DialogHeader>
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <DialogTitle>{title}</DialogTitle>
            <DialogDescription className="mt-1">{lead}</DialogDescription>
          </div>
          <StepDots step={step} />
        </div>
      </DialogHeader>

        {/* Step 1 — order delivered intro */}
        {step === 1 && (
          <div className="flex flex-col items-center text-center py-6 px-4 gap-3">
            <div className="w-16 h-16 rounded-full bg-emerald-50 flex items-center justify-center">
              <PackageCheck className="w-8 h-8 text-emerald-500" />
            </div>
            <h3 className="text-lg font-semibold">{tr.step1Heading}</h3>
            <p className="text-sm text-muted-foreground max-w-md">
              {tr.step1Body(boxesCount, location, vehiclesCount)}
            </p>
            <div className="flex items-center gap-3 mt-3">
              <Button variant="outline" onClick={() => onOpenChange(false)}>
                <Clock className="w-4 h-4 mr-2" />
                {tr.remindLater}
              </Button>
              <Button onClick={() => setStep(2)}>
                {tr.launch}
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </div>
          </div>
        )}

        {/* Step 2 — order summary */}
        {step === 2 && (
          <>
            <ScrollArea className="max-h-[55vh] pr-3">
              <div className="rounded-lg border border-border p-4 space-y-4">
                <h4 className="text-sm font-semibold">{tr.summaryTitle}</h4>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Field icon={<Package className="w-4 h-4" />} label={tr.boxesLabel}>
                    <div className="flex flex-wrap gap-1.5">
                      {order.lines.map((l) => (
                        <Badge key={l.id} variant="secondary" className="text-xs">
                          {l.product_name}
                          <span className="ml-1 text-muted-foreground">
                            {tr.qtyLabel}: {l.quantity}
                          </span>
                        </Badge>
                      ))}
                    </div>
                  </Field>
                  <Field icon={<User className="w-4 h-4" />} label={tr.clientLabel}>
                    <p className="font-medium">{order.organization.name}</p>
                    {order.demandeur?.name && (
                      <p className="text-xs text-muted-foreground">
                        {order.demandeur.name}
                      </p>
                    )}
                  </Field>
                </div>

                {/* Sites de livraison et contact dédié à chacun */}
                <div>
                  <p className="text-sm font-medium mb-2 flex items-center gap-1.5">
                    <MapPin className="w-4 h-4 text-muted-foreground" />
                    {tr.sitesTitle}{" "}
                    <span className="text-muted-foreground">({sitesCount})</span>
                  </p>
                  <div className="space-y-2">
                    {shipments.map((s, i) => (
                      <div
                        key={`${s.site_name}-${i}`}
                        className="rounded-lg border border-border p-3"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <p className="font-medium text-sm">{s.site_name || "—"}</p>
                          <Badge variant="secondary" className="text-xs shrink-0">
                            {tr.unitsLabel(s.units)}
                          </Badge>
                        </div>
                        {s.address && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {s.address}
                          </p>
                        )}
                        <div className="mt-2 space-y-1 text-xs text-muted-foreground">
                          {s.contact_name && (
                            <p className="flex items-center gap-1.5">
                              <User className="w-3 h-3" />
                              {s.contact_name}
                            </p>
                          )}
                          {s.contact_phone && (
                            <p className="flex items-center gap-1.5">
                              <Phone className="w-3 h-3" />
                              {s.contact_phone}
                            </p>
                          )}
                          {s.contact_email && (
                            <p className="flex items-center gap-1.5">
                              <Mail className="w-3 h-3" />
                              {s.contact_email}
                            </p>
                          )}
                          {!s.contact_name &&
                            !s.contact_phone &&
                            !s.contact_email && (
                              <p className="italic">{tr.noContact}</p>
                            )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </ScrollArea>
            <div className="flex items-center justify-end gap-3 pt-2">
              <Button variant="outline" onClick={() => setStep(1)}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                {tr.back}
              </Button>
              <Button onClick={() => setStep(3)}>
                {tr.next}
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </div>
          </>
        )}

        {/* Step 3 — build assignment groups (vehicles → installers) */}
        {step === 3 && (
          <>
            {/* En-tête figé : reste visible pendant le défilement de la liste. */}
            <div className="flex items-center justify-between gap-2">
              <p className="text-sm font-medium">
                {tr.selectVehiclesTitle}{" "}
                <span className="text-muted-foreground">
                  ({tr.vehiclesSelectedCount(selectedVehicles.length)})
                </span>
              </p>
              <div className="flex items-center gap-3 shrink-0">
                {availableVehicleIds.length > 0 && (
                  <button
                    type="button"
                    onClick={toggleAllVehicles}
                    className="text-xs font-medium text-primary hover:underline"
                  >
                    {allAvailableSelected ? tr.deselectAll : tr.selectAll}
                  </button>
                )}
                <Button
                  size="sm"
                  onClick={openPicker}
                  disabled={selectedVehicles.length === 0}
                >
                  <UserPlus className="w-4 h-4 mr-2" />
                  {tr.assignSelected(selectedVehicles.length)}
                </Button>
              </div>
            </div>

            <ScrollArea className="max-h-[60vh] pr-3">
              <div className="space-y-5">
                {/* Vehicles to assign */}
                <div>
                  {vehiclesCount === 0 ? (
                    <p className="text-sm text-muted-foreground rounded-lg border border-dashed border-border py-4 text-center">
                      {tr.noVehicles}
                    </p>
                  ) : (
                    <div className="space-y-4">
                      {vehicleSiteGroups.map((siteGroup) => {
                        const siteVehicleIds = siteGroup.vehicles.map((v) => v.id);
                        const siteAvailableIds = siteVehicleIds.filter((id) =>
                          availableVehicleIds.includes(id)
                        );
                        const siteAllSelected =
                          siteAvailableIds.length > 0 &&
                          siteAvailableIds.every((id) =>
                            selectedVehicles.includes(id)
                          );
                        return (
                          <div
                            key={siteGroup.key}
                            className="overflow-hidden rounded-lg border border-border"
                          >
                            <div className="flex items-center justify-between gap-2 bg-muted/40 px-3 py-2">
                              <p className="flex items-center gap-1.5 text-sm font-medium">
                                <MapPin className="w-3.5 h-3.5 text-muted-foreground" />
                                {siteGroup.siteName || tr.siteGroupNoSite}
                                <span className="text-xs text-muted-foreground">
                                  ({tr.siteVehiclesCount(siteGroup.vehicles.length)})
                                </span>
                              </p>
                              {siteAvailableIds.length > 0 && (
                                <button
                                  type="button"
                                  onClick={() => toggleSiteVehicles(siteVehicleIds)}
                                  className="text-xs font-medium text-primary hover:underline shrink-0"
                                >
                                  {siteAllSelected
                                    ? tr.selectSiteNone
                                    : tr.selectSiteAll}
                                </button>
                              )}
                            </div>
                            <div className="overflow-x-auto">
                              <table className="w-full text-sm">
                                <thead className="bg-muted/50 text-xs text-muted-foreground">
                                  <tr>
                                    <th className="w-10 px-3 py-2" />
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colPlate}
                                    </th>
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colVehicle}
                                    </th>
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colYear}
                                    </th>
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colVin}
                                    </th>
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colBox}
                                    </th>
                                    <th className="text-left font-medium px-3 py-2">
                                      {tr.colAssignment}
                                    </th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {siteGroup.vehicles.map((v) => {
                                    const serverAssigned = assignedVehicleIds.has(v.id);
                                    const groupIndex = groups.findIndex((g) =>
                                      g.vehicleIds.includes(v.id)
                                    );
                                    const inGroup = groupIndex >= 0;
                                    const locked = serverAssigned || inGroup;
                                    const checked = selectedVehicles.includes(v.id);
                                    const serverNames = vehicleInstallers.get(v.id);
                                    const groupNames = inGroup
                                      ? groups[groupIndex].installerIds.map(
                                          (id) => installerName.get(id) ?? `#${id}`
                                        )
                                      : [];
                                    return (
                                      <tr
                                        key={v.id}
                                        onClick={() => !locked && toggleVehicle(v.id)}
                                        className={`border-t border-border ${
                                          serverAssigned
                                            ? "opacity-60"
                                            : locked
                                              ? ""
                                              : "cursor-pointer hover:bg-muted/40"
                                        } ${checked ? "bg-muted/40" : ""}`}
                                      >
                                        <td className="px-3 py-2">
                                          <Checkbox
                                            checked={locked || checked}
                                            disabled={locked}
                                            className="pointer-events-none"
                                          />
                                        </td>
                                        <td className="px-3 py-2">{v.plate || "—"}</td>
                                        <td className="px-3 py-2">{v.model || "—"}</td>
                                        <td className="px-3 py-2">{v.year || "—"}</td>
                                        <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
                                          {v.vin || "—"}
                                        </td>
                                        <td className="px-3 py-2">{v.box || "—"}</td>
                                        <td className="px-3 py-2">
                                          {serverAssigned && serverNames?.length ? (
                                            <Badge
                                              variant="secondary"
                                              className="text-[10px]"
                                            >
                                              {tr.assignedTo(serverNames.join(", "))}
                                            </Badge>
                                          ) : inGroup ? (
                                            <Badge className="bg-primary/10 text-primary text-[10px] hover:bg-primary/10">
                                              {tr.groupBadge(
                                                groupIndex + 1,
                                                groupNames.join(", ")
                                              )}
                                            </Badge>
                                          ) : (
                                            <span className="text-muted-foreground">
                                              —
                                            </span>
                                          )}
                                        </td>
                                      </tr>
                                    );
                                  })}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>

                {/* Draft groups */}
                {groups.length > 0 && (
                  <div>
                    <p className="text-sm font-semibold mb-2">
                      {tr.groupsTitle}{" "}
                      <span className="text-muted-foreground">
                        ({groups.length})
                      </span>
                    </p>
                    <div className="space-y-2">
                      {groups.map((g, idx) => (
                        <div
                          key={idx}
                          className="rounded-lg border border-border p-3"
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0 space-y-2">
                              <div className="flex items-center gap-2">
                                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[11px] font-semibold">
                                  {idx + 1}
                                </span>
                                <span className="text-xs font-medium text-muted-foreground">
                                  {tr.groupVehiclesCount(g.vehicleIds.length)}
                                </span>
                              </div>
                              <div className="flex flex-wrap gap-1.5">
                                {g.vehicleIds.map((id) => (
                                  <Badge
                                    key={id}
                                    variant="secondary"
                                    className="text-xs"
                                  >
                                    {vehicleById.get(id)?.plate ||
                                      vehicleById.get(id)?.model ||
                                      `#${id}`}
                                  </Badge>
                                ))}
                              </div>
                              <p className="text-xs text-muted-foreground flex items-center gap-1.5 flex-wrap">
                                <UserCheck className="w-3.5 h-3.5 shrink-0" />
                                {g.installerIds
                                  .map((id) => installerName.get(id) ?? `#${id}`)
                                  .join(", ")}
                              </p>
                            </div>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => removeGroup(idx)}
                              className="shrink-0 text-muted-foreground hover:text-destructive"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </ScrollArea>

            <div className="flex items-center justify-between gap-3 pt-2">
              <Button variant="outline" onClick={() => setStep(2)}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                {tr.back}
              </Button>
              <div className="flex items-center gap-3">
                <p className="text-xs text-muted-foreground">
                  {remainingCount > 0
                    ? tr.remainingToAssign(remainingCount)
                    : tr.allAssignedReady}
                </p>
                <Button onClick={submit} disabled={mutation.loading || !canSubmit}>
                  {mutation.loading ? (
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  ) : (
                    <Check className="w-4 h-4 mr-2" />
                  )}
                  {tr.submitGroups(groups.length)}
                </Button>
              </div>
            </div>
          </>
        )}

        {/* Installer picker — choose installer(s) for the selected vehicles */}
        <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
          <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
            <DialogHeader>
              <DialogTitle>{tr.pickInstallersTitle}</DialogTitle>
              <DialogDescription>
                {tr.pickInstallersLead(selectedVehicles.length)}
              </DialogDescription>
            </DialogHeader>

            {!installersLoading && (installers?.length ?? 0) === 0 ? (
              <p className="text-sm text-muted-foreground py-6 text-center">
                {tr.noInstallers}
              </p>
            ) : (
              <ScrollArea className="max-h-[50vh] pr-3">
                <div className="rounded-lg border border-border divide-y divide-border">
                  {(installers ?? []).map((inst) => {
                    const checked = pickerInstallers.includes(inst.id);
                    return (
                      <div
                        key={inst.id}
                        role="button"
                        tabIndex={0}
                        onClick={() => togglePickerInstaller(inst.id)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter" || e.key === " ") {
                            e.preventDefault();
                            togglePickerInstaller(inst.id);
                          }
                        }}
                        className="w-full flex items-center gap-3 px-4 py-3 text-left cursor-pointer hover:bg-muted/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                      >
                        <Checkbox checked={checked} className="pointer-events-none" />
                        <span className="font-medium text-sm">{inst.name}</span>
                      </div>
                    );
                  })}
                </div>
              </ScrollArea>
            )}

            <div className="flex items-center justify-end gap-3 pt-2">
              <Button variant="outline" onClick={() => setPickerOpen(false)}>
                {t.common.cancel}
              </Button>
              <Button
                onClick={confirmGroup}
                disabled={pickerInstallers.length === 0}
              >
                <Check className="w-4 h-4 mr-2" />
                {tr.confirmGroup}
              </Button>
            </div>
          </DialogContent>
        </Dialog>
    </>
  );
}

function StepDots({ step }: { step: Step }) {
  return (
    <div className="flex items-center gap-1.5 shrink-0">
      {([1, 2, 3] as Step[]).map((s) => (
        <span
          key={s}
          className={`w-6 h-6 rounded-full text-xs font-semibold flex items-center justify-center ${
            s === step
              ? "bg-foreground text-background"
              : s < step
                ? "bg-emerald-100 text-emerald-600"
                : "bg-muted text-muted-foreground"
          }`}
        >
          {s < step ? <Check className="w-3.5 h-3.5" /> : s}
        </span>
      ))}
    </div>
  );
}

function Field({
  icon,
  label,
  children,
}: {
  icon: React.ReactNode;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-1 min-w-0">
      <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
        <span className="text-muted-foreground">{icon}</span>
        {label}
      </p>
      <div className="text-sm">{children}</div>
    </div>
  );
}