import { notFound } from "next/navigation";
import { FileUp } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { requireUser } from "@/lib/session";
import { can } from "@/lib/permissions";
import { ImportarDashboard } from "@/components/importar/importar-dashboard";

export const dynamic = "force-dynamic";

export default async function ImportarPage() {
  const user = await requireUser();
  if (!can(user.role, "usuario:manage")) notFound();

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3">
        <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
          <FileUp className="h-3.5 w-3.5" />
          Importación masiva
        </div>
        <h2 className="text-2xl font-semibold tracking-tight">Importar Excel</h2>
        <p className="max-w-3xl text-sm text-muted-foreground">
          Sube una planilla Excel para crear o actualizar fichas con vista previa y validación antes de importar.
        </p>
      </div>

      <Card className="border-border shadow-sm">
        <CardContent className="p-4 text-sm text-muted-foreground">
          Acceso exclusivo para administradores. La importación no afecta documentos ni historial adjunto.
        </CardContent>
      </Card>

      <ImportarDashboard />
    </div>
  );
}