"use client";

import {
  Alert,
  Button,
  Group,
  Loader,
  SegmentedControl,
  SimpleGrid,
  Stack,
  Text,
} from "@mantine/core";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ExternalLink, Plus, RefreshCw } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";
import {
  PlanCatalogBadge,
  PlanCatalogSelectModal,
} from "@/components/admin/plans/PlanCatalogSelectModal";
import { PlanSiteInlineEditor } from "@/components/admin/plans/PlanSiteInlineEditor";
import { OpcionaisAdminPanel } from "@/components/admin/plans/OpcionaisAdminPanel";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import {
  getPlanCatalogLabel,
  parsePlanCatalog,
  type PlanCatalogId,
} from "@/lib/planCatalogs";
import { adminPlansService } from "@/services/adminPlansService";
import { useAuthStore } from "@/store/authStore";

function PlanosAdminContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const tab = searchParams.get("tab") === "opcionais" ? "opcionais" : "planos";
  const catalog = parsePlanCatalog(searchParams.get("catalog"));
  const [catalogModalOpen, setCatalogModalOpen] = useState(false);

  const token = useAuthStore((s) => s.token);
  const user = useAuthStore((s) => s.user);
  const queryClient = useQueryClient();

  const { data, isLoading, isError, refetch, isFetching } = useQuery({
    queryKey: ["admin", "plans", catalog],
    queryFn: () =>
      adminPlansService.list(token!, { per_page: 100, catalog }),
    enabled: Boolean(token) && user?.role === "admin",
  });

  const plans = [...(data?.data ?? [])].sort(
    (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),
  );

  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: ["admin", "plans"] });
    queryClient.invalidateQueries({ queryKey: ["plans", "public"] });
    queryClient.invalidateQueries({ queryKey: ["admin", "addons"] });
  };

  const setTab = (value: string) => {
    const params = new URLSearchParams();
    if (value === "opcionais") params.set("tab", "opcionais");
    params.set("catalog", catalog);
    const q = params.toString();
    router.replace(`/dashboard/planos?${q}`);
  };

  const selectCatalog = (next: PlanCatalogId) => {
    const params = new URLSearchParams();
    if (tab === "opcionais") params.set("tab", "opcionais");
    params.set("catalog", next);
    router.replace(`/dashboard/planos?${params.toString()}`);
  };

  if (user?.role !== "admin") {
    return (
      <DashboardPage title="Planos">
        <Text c="dimmed">Acesso restrito a administradores.</Text>
      </DashboardPage>
    );
  }

  return (
    <DashboardPage title="Planos">
      <PageHeader
        title={getPlanCatalogLabel(catalog)}
        description="Visual igual à home (#planos). Clique em «Editar plano» no card para abrir o formulário e salvar na API."
        actions={
          <Group gap="sm" wrap="wrap">
            <PlanCatalogBadge catalog={catalog} onOpen={() => setCatalogModalOpen(true)} />
            <Button
              variant="default"
              leftSection={<RefreshCw size={16} />}
              loading={isFetching}
              onClick={() => refetch()}
            >
              Atualizar
            </Button>
            <Button
              component="a"
              href="/#planos"
              target="_blank"
              variant="light"
              leftSection={<ExternalLink size={16} />}
            >
              Ver no site
            </Button>
            {tab === "planos" && (
              <Link
                href={`/dashboard/planos/novo?catalog=${catalog}`}
                style={{ textDecoration: "none" }}
              >
                <PrimaryButton leftSection={<Plus size={18} />}>Novo plano</PrimaryButton>
              </Link>
            )}
          </Group>
        }
      />

      <PlanCatalogSelectModal
        opened={catalogModalOpen}
        onClose={() => setCatalogModalOpen(false)}
        value={catalog}
        onSelect={selectCatalog}
      />

      <SegmentedControl
        value={tab}
        onChange={setTab}
        mb="xl"
        data={[
          { label: `Planos (${plans.length})`, value: "planos" },
          { label: "Opcionais", value: "opcionais" },
        ]}
      />

      {tab === "opcionais" ? (
        <OpcionaisAdminPanel catalog={catalog} />
      ) : (
        <>
          {isLoading && (
            <Group justify="center" py="xl">
              <Loader color="nogahost" />
            </Group>
          )}

          {isError && (
            <Alert color="red" title="Erro ao carregar planos" mb="lg">
              Confirme que o backend está ativo e que você está logado como admin.{" "}
              <Button variant="subtle" size="compact-sm" onClick={() => refetch()}>
                Tentar novamente
              </Button>
            </Alert>
          )}

          {!isLoading && !isError && plans.length === 0 && (
            <Alert color="blue" title="Nenhum plano neste catálogo">
              Rode as migrations e o seed:{" "}
              <Text span ff="monospace" size="sm">
                php artisan migrate --seed
              </Text>
              . Ou crie planos com «Novo plano».
            </Alert>
          )}

          {!isLoading && !isError && plans.length > 0 && (
            <Stack gap="md">
              <Text size="sm" c="dimmed">
                {plans.filter((p) => p.active).length} ativo(s) · {plans.length} neste
                catálogo
              </Text>
              <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
                {plans.map((plan) => (
                  <PlanSiteInlineEditor
                    key={plan.id}
                    plan={plan}
                    token={token!}
                    onSaved={invalidate}
                  />
                ))}
              </SimpleGrid>
            </Stack>
          )}
        </>
      )}
    </DashboardPage>
  );
}

export default function PlanosDashboardPage() {
  return (
    <Suspense fallback={<Loader color="nogahost" m="xl" />}>
      <PlanosAdminContent />
    </Suspense>
  );
}