"use client";

import { ADMIN_MODULES } from "@/lib/admin-modules";
import { StatusPill } from "@/components/admin/NegocioShell";
import { useAdmin } from "@/context/AdminContext";

export function ModulePlaceholder({ moduleId }: { moduleId: string }) {
  const { authenticated, loading } = useAdmin();
  const mod = ADMIN_MODULES.find((m) => m.id === moduleId);

  if (loading || !authenticated || !mod) return null;

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center gap-3">
        <p className="ot-eyebrow">Fase {mod.phase}</p>
        <StatusPill status={mod.status} />
      </div>
      <h1 className="font-serif text-4xl">{mod.title}</h1>
      <p className="text-ot-muted max-w-2xl leading-relaxed">{mod.description}</p>

      <div className="bg-white border border-black/10 p-6 max-w-2xl">
        <p className="text-[11px] tracking-[0.16em] uppercase text-ot-gold">
          Estado del módulo
        </p>
        <h2 className="font-serif text-2xl mt-2">En desarrollo / en progreso</h2>
        <p className="text-sm text-ot-muted mt-3 leading-relaxed">
          Este módulo ya forma parte del panel de negocio para que puedas ver qué
          operaciones controlará. La lógica completa (APIs, pantallas y flujos)
          se implementará en una siguiente etapa. Por ahora solo está identificado
          y reservado en el menú.
        </p>
        <ul className="mt-4 text-sm space-y-2 list-disc pl-5 text-ot-ink/90">
          {moduleId === "cancelaciones" ? (
            <>
              <li>Cancelar pedidos y registrar motivo</li>
              <li>Solicitudes de devolución</li>
              <li>Reembolsos Wompi (cuando haya producción)</li>
            </>
          ) : null}
          {moduleId === "inventario" ? (
            <>
              <li>Stock por talla y color</li>
              <li>Alertas de inventario bajo</li>
              <li>Ajustes manuales de unidades</li>
            </>
          ) : null}
          {moduleId === "ventas" ? (
            <>
              <li>Ventas del día / semana / mes</li>
              <li>Productos más vendidos</li>
              <li>Visitas y conversión (métricas)</li>
            </>
          ) : null}
          {moduleId === "productos" ? (
            <>
              <li>Activar / ocultar prendas</li>
              <li>Editar precios</li>
              <li>Datos básicos del catálogo</li>
            </>
          ) : null}
        </ul>
      </div>
    </div>
  );
}