"use client";

import {
  ActionIcon,
  Alert,
  Badge,
  Button,
  Group,
  Loader,
  Modal,
  Select,
  Stack,
  Switch,
  Text,
  Textarea,
  TextInput,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { notifications } from "@mantine/notifications";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { useState } from "react";
import { DataTable } from "@/components/dashboard/DataTable";
import { HelpDeskAdminLayout } from "@/layouts/HelpDeskAdminLayout";
import { adminHelpService } from "@/services/adminHelpService";
import { useAuthStore } from "@/store/authStore";
import type { HelpArticle } from "@/types/help";

export default function AdminKnowledgePage() {
  const token = useAuthStore((s) => s.token)!;
  const qc = useQueryClient();
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [loadingEdit, setLoadingEdit] = useState(false);

  const { data: categories } = useQuery({
    queryKey: ["hd-kb-categories"],
    queryFn: () => adminHelpService.listCategories(token).then((r) => r.data),
  });

  const {
    data: articlesRes,
    isLoading,
    isError,
    refetch,
  } = useQuery({
    queryKey: ["hd-kb-articles", search, statusFilter],
    queryFn: () =>
      adminHelpService.listArticles(token, {
        search: search || undefined,
        status: statusFilter ?? undefined,
        per_page: 100,
        page: 1,
      }),
  });

  const articles = articlesRes?.data ?? [];

  const form = useForm({
    initialValues: {
      title: "",
      summary: "",
      content: "",
      category_id: "",
      status: "draft",
      featured: false,
      seo_title: "",
      seo_description: "",
    },
    validate: {
      title: (v) => (v.trim() ? null : "Título obrigatório"),
      content: (v) => (v.trim() ? null : "Conteúdo obrigatório"),
    },
  });

  const openCreate = () => {
    setEditId(null);
    form.reset();
    setModalOpen(true);
  };

  const openEdit = async (article: HelpArticle) => {
    setEditId(article.id);
    setLoadingEdit(true);
    setModalOpen(true);
    try {
      const res = await adminHelpService.getArticle(token, article.id);
      const full = res.data;
      form.setValues({
        title: full.title,
        summary: full.summary ?? "",
        content: full.content ?? "",
        category_id: full.categoryId ? String(full.categoryId) : "",
        status: full.status ?? "draft",
        featured: full.featured ?? false,
        seo_title: full.seoTitle ?? "",
        seo_description: full.seoDescription ?? "",
      });
    } catch (e) {
      notifications.show({
        message: e instanceof Error ? e.message : "Erro ao carregar artigo",
        color: "red",
      });
      setModalOpen(false);
    } finally {
      setLoadingEdit(false);
    }
  };

  const saveArticle = useMutation({
    mutationFn: () =>
      adminHelpService.saveArticle(
        token,
        {
          title: form.values.title,
          summary: form.values.summary,
          content: form.values.content,
          category_id: form.values.category_id ? Number(form.values.category_id) : null,
          status: form.values.status,
          featured: form.values.featured,
          seo_title: form.values.seo_title,
          seo_description: form.values.seo_description,
        },
        editId ?? undefined,
      ),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["hd-kb-articles"] });
      setModalOpen(false);
      notifications.show({ message: "FAQ salvo com sucesso", color: "green" });
    },
    onError: (e: Error) => {
      notifications.show({ message: e.message || "Erro ao salvar", color: "red" });
    },
  });

  const deleteArticle = useMutation({
    mutationFn: (id: number) => adminHelpService.deleteArticle(token, id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["hd-kb-articles"] });
      notifications.show({ message: "Artigo removido", color: "gray" });
    },
  });

  const toggleArticle = useMutation({
    mutationFn: (id: number) => adminHelpService.toggleArticle(token, id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["hd-kb-articles"] }),
  });

  return (
    <HelpDeskAdminLayout
      title="Perguntas e respostas (FAQ)"
      subtitle="Edite os artigos exibidos na central de ajuda pública"
      search={search}
      onSearchChange={setSearch}
      searchPlaceholder="Buscar perguntas..."
    >
      <Stack gap="lg">
        <Group justify="space-between" wrap="wrap">
          <Select
            placeholder="Filtrar status"
            clearable
            data={[
              { value: "published", label: "Publicado" },
              { value: "draft", label: "Rascunho" },
            ]}
            value={statusFilter}
            onChange={setStatusFilter}
            w={180}
          />
          <Button leftSection={<Plus size={16} />} onClick={openCreate}>
            Nova pergunta
          </Button>
        </Group>

        {isError && (
          <Alert color="red" title="Erro ao carregar FAQ">
            Verifique login admin e backend.{" "}
            <Button variant="subtle" size="compact-sm" onClick={() => refetch()}>
              Tentar novamente
            </Button>
          </Alert>
        )}

        <DataTable
          loading={isLoading}
          emptyMessage="Nenhuma pergunta cadastrada. Clique em «Nova pergunta» ou importe o conteúdo no backend (seed)."
          columns={[
            {
              key: "title",
              label: "Pergunta",
              render: (a) => (
                <Stack gap={2}>
                  <Text size="sm" fw={700}>
                    {a.title}
                  </Text>
                  {a.summary && (
                    <Text size="xs" c="dimmed" lineClamp={1}>
                      {a.summary}
                    </Text>
                  )}
                </Stack>
              ),
            },
            {
              key: "category",
              label: "Categoria",
              render: (a) => a.category?.name ?? "—",
            },
            {
              key: "status",
              label: "Status",
              render: (a) => (
                <Badge color={a.status === "published" ? "green" : "gray"}>
                  {a.status === "published" ? "Publicado" : "Rascunho"}
                </Badge>
              ),
            },
            {
              key: "views",
              label: "Views",
              render: (a) => String(a.views ?? 0),
            },
            {
              key: "actions",
              label: "Ações",
              render: (a) => (
                <Group gap={4} wrap="nowrap">
                  <ActionIcon variant="subtle" onClick={() => openEdit(a)} aria-label="Editar">
                    <Pencil size={16} />
                  </ActionIcon>
                  <Switch
                    size="xs"
                    checked={a.status === "published"}
                    onChange={() => toggleArticle.mutate(a.id)}
                  />
                  <ActionIcon
                    variant="subtle"
                    color="red"
                    onClick={() => deleteArticle.mutate(a.id)}
                    aria-label="Excluir"
                  >
                    <Trash2 size={16} />
                  </ActionIcon>
                </Group>
              ),
            },
          ]}
          data={articles}
        />
      </Stack>

      <Modal
        opened={modalOpen}
        onClose={() => setModalOpen(false)}
        title={editId ? "Editar pergunta / resposta" : "Nova pergunta / resposta"}
        size="lg"
      >
        {loadingEdit ? (
          <Stack align="center" py="xl">
            <Loader color="blue" />
            <Text size="sm" c="dimmed">
              Carregando conteúdo...
            </Text>
          </Stack>
        ) : (
          <Stack gap="sm">
            <TextInput label="Pergunta (título)" required {...form.getInputProps("title")} />
            <Textarea label="Resumo curto" minRows={2} {...form.getInputProps("summary")} />
            <Textarea
              label="Resposta completa"
              description="Use ## para subtítulos, **negrito**, listas numeradas."
              minRows={10}
              required
              {...form.getInputProps("content")}
            />
            <Select
              label="Categoria"
              data={(categories ?? []).map((c) => ({ value: String(c.id), label: c.name }))}
              clearable
              {...form.getInputProps("category_id")}
            />
            <Select
              label="Status"
              data={[
                { value: "draft", label: "Rascunho" },
                { value: "published", label: "Publicado" },
              ]}
              {...form.getInputProps("status")}
            />
            <Switch label="Destaque" {...form.getInputProps("featured", { type: "checkbox" })} />
            <TextInput label="SEO — Título" {...form.getInputProps("seo_title")} />
            <Textarea label="SEO — Descrição" minRows={2} {...form.getInputProps("seo_description")} />
            <Button
              loading={saveArticle.isPending}
              onClick={() => {
                if (form.validate().hasErrors) return;
                saveArticle.mutate();
              }}
            >
              Salvar
            </Button>
          </Stack>
        )}
      </Modal>
    </HelpDeskAdminLayout>
  );
}