"use client";

import { MapPin, Navigation, Layers } from "lucide-react";
import { Card, CardContent, Badge } from "@/components/ds";
import { DeliveryBreadcrumbs } from "@/modules/delivery/components/DeliveryBreadcrumbs";
import { createDeliveryPhasePage } from "@/modules/delivery/components/DeliveryPhaseGate";
import { useDeliveryCapabilities } from "@/modules/delivery/hooks/useDeliveryCapabilities";
import { DeliveryPageLoader } from "@/modules/delivery/pages/shared";
import type { PhaseGateConfig } from "@/modules/delivery/types";

function MapSkeleton({ title }: { title: string }) {
  return (
    <div className="space-y-4">
      <DeliveryBreadcrumbs current={title} />
      <div className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface-muted)]">
        <div className="flex aspect-[16/9] min-h-[320px] flex-col items-center justify-center gap-3 p-6 text-center">
          <Layers className="h-12 w-12 text-[var(--delivery-accent)] opacity-60" />
          <p className="text-sm font-medium text-secondary">رابط نقشه عملیاتی</p>
          <p className="max-w-md text-xs text-[var(--muted)]">
            مارکر رانندگان، pickup، delivery، خوشه‌بندی، ترافیک و پیش‌نمایش مسیر.
          </p>
          <div className="flex gap-2">
            <Badge tone="info">
              <MapPin className="ml-1 inline h-3 w-3" />
              Live Markers
            </Badge>
            <Badge tone="info">
              <Navigation className="ml-1 inline h-3 w-3" />
              Route Preview
            </Badge>
          </div>
        </div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,var(--delivery-accent-soft),transparent_50%)]" />
      </div>
      <Card>
        <CardContent className="p-4 text-sm text-[var(--muted)]">
          اتصال WebSocket/SSE برای به‌روزرسانی لحظه‌ای موقعیت در فاز ۱۰.۷ پیاده‌سازی می‌شود.
        </CardContent>
      </Card>
    </div>
  );
}

export function createDeliveryMapPage(config: PhaseGateConfig, title?: string) {
  const pageTitle = title ?? config.title;
  const PhasePage = createDeliveryPhasePage(config, true);

  return function DeliveryMapPage() {
    const caps = useDeliveryCapabilities();
    if (caps.isLoading) return <DeliveryPageLoader />;
    if (caps.data?.features?.[config.feature] === true) {
      return <MapSkeleton title={pageTitle} />;
    }
    return <PhasePage />;
  };
}