import {
  ActionIcon,
  Badge,
  Button,
  Group,
  HoverCard,
  Paper,
  SegmentedControl,
  Stack,
  Table,
  Text,
  Tooltip,
} from "@mantine/core";
import { IconEdit, IconSearch, IconTrash } from "@tabler/icons-react";
import {
  flexRender,
  MRT_GlobalFilterTextInput,
  MRT_TableBodyCellValue,
  MRT_TablePagination,
  MRT_ToolbarAlertBanner,
  useMantineReactTable,
  type MRT_ColumnDef,
  type MRT_RowSelectionState,
} from "mantine-react-table";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router";
import { deletePrompt } from "@/lib/features/chatbot/prompt/action";
import PromptTableHeader from "./(widgets)/PromptTableHeader";
import VoiceTab, { type VoiceConfig } from "./(widgets)/VoiceTab";
import type { PromptRow } from "./(widgets)/prompt.types";
import ConfirmModal from "@/layouts/shared/ConfirmModal";

const isVoiceKey = (key: string | null | undefined) =>
  key?.startsWith("voice_") ?? false;

const PromptsClientPage: React.FC<{
  tableProps: { data: PromptRow[]; totalRows: number };
  voiceConfig: VoiceConfig;
}> = ({ tableProps: { data }, voiceConfig }) => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<"pipeline" | "agent" | "voice">(
    "pipeline",
  );
  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
  const [bulkDeleting, setBulkDeleting] = useState(false);

  const pipelineCount = useMemo(
    () => data.filter((r) => r.prompt_key && !isVoiceKey(r.prompt_key)).length,
    [data],
  );
  const agentCount = useMemo(
    () => data.filter((r) => !r.prompt_key).length,
    [data],
  );

  const filteredData = useMemo(() => {
    if (activeTab === "pipeline")
      return data.filter((r) => r.prompt_key && !isVoiceKey(r.prompt_key));
    if (activeTab === "agent") return data.filter((r) => !r.prompt_key);
    return [];
  }, [data, activeTab]);

  const handleTabChange = (val: string) => {
    setActiveTab(val as "pipeline" | "agent" | "voice");
    setRowSelection({});
    setPagination((p) => ({ ...p, pageIndex: 0 }));
  };

  // ── Confirm modal ─────────────────────────────────────────────────────────
  const [confirmState, setConfirmState] = useState<{
    opened: boolean;
    title: string;
    message: string;
    onConfirm: () => void | Promise<void>;
  }>({ opened: false, title: "", message: "", onConfirm: () => {} });

  const openConfirm = useCallback(
    (opts: {
      title: string;
      message: string;
      onConfirm: () => void | Promise<void>;
    }) => {
      setConfirmState({ opened: true, ...opts });
    },
    [],
  );
  const closeConfirm = useCallback(
    () => setConfirmState((s) => ({ ...s, opened: false })),
    [],
  );

  const onDelete = (row: PromptRow) => {
    openConfirm({
      title: "Delete Prompt",
      message: `Delete prompt "${row.prompt_name}"?\n\nAgents using this prompt may stop working.`,
      onConfirm: async () => {
        await deletePrompt(row.id);
        navigate(0);
      },
    });
  };

  const handleBulkDelete = () => {
    const selected = table.getSelectedRowModel().rows.map((r) => r.original);
    openConfirm({
      title: "Delete Prompts",
      message: `Delete ${selected.length} prompt(s)? This cannot be undone.`,
      onConfirm: async () => {
        setBulkDeleting(true);
        try {
          await Promise.all(selected.map((r) => deletePrompt(r.id)));
          setRowSelection({});
          navigate(0);
        } finally {
          setBulkDeleting(false);
        }
      },
    });
  };

  const columns: MRT_ColumnDef<PromptRow>[] = [
    { accessorKey: "prompt_name", header: "Name", minSize: 200 },
    {
      accessorKey: "prompt_key",
      header: "Pipeline Key",
      minSize: 180,
      Cell: ({ row }) => {
        const key = row.original.prompt_key;
        if (!key)
          return (
            <Text size="xs" c="dimmed">
              —
            </Text>
          );
        return (
          <Badge size="sm" variant="light" color="gray">
            {key}
          </Badge>
        );
      },
    },
    {
      accessorKey: "prompt_value",
      header: "Preview",
      minSize: 320,
      enableSorting: false,
      Cell: ({ row }) => (
        <HoverCard
          width={520}
          shadow="md"
          openDelay={200}
          closeDelay={100}
          withArrow
        >
          <HoverCard.Target>
            <Text size="xs" c="dimmed" lineClamp={2} style={{ maxWidth: 300 }}>
              {row.original.prompt_value}
            </Text>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text
              size="xs"
              style={{
                whiteSpace: "pre-wrap",
                maxHeight: 360,
                overflowY: "auto",
              }}
            >
              {row.original.prompt_value}
            </Text>
          </HoverCard.Dropdown>
        </HoverCard>
      ),
    },
    { accessorKey: "created_by", header: "Created By", minSize: 160 },
    { accessorKey: "updated_by", header: "Updated By", minSize: 160 },
    {
      id: "actions",
      header: "Actions",
      enableSorting: false,
      minSize: 100,
      Cell: ({ row }) => (
        <Group gap={6} wrap="nowrap">
          <Tooltip label="Edit prompt">
            <ActionIcon
              size="sm"
              variant="light"
              color="blue"
              onClick={(e) => {
                e.stopPropagation();
                navigate(`edit/${row.original.id}`);
              }}
            >
              <IconEdit size={14} />
            </ActionIcon>
          </Tooltip>
          <Tooltip label="Delete prompt">
            <ActionIcon
              size="sm"
              variant="light"
              color="red"
              onClick={(e) => {
                e.stopPropagation();
                onDelete(row.original);
              }}
            >
              <IconTrash size={14} />
            </ActionIcon>
          </Tooltip>
        </Group>
      ),
    },
  ];

  const table = useMantineReactTable({
    columns,
    data: filteredData,
    enableSorting: true,
    enableRowSelection: true,
    getRowId: (row) => row.id,
    onRowSelectionChange: setRowSelection,
    state: { rowSelection, pagination },
    onPaginationChange: (updater) => {
      const next =
        typeof updater === "function" ? updater(pagination) : updater;
      setPagination(next);
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    initialState: { showGlobalFilter: true },
    paginationDisplayMode: "pages",
    mantinePaginationProps: { rowsPerPageOptions: ["10", "25", "50"], p: 0 },
    mantineSelectCheckboxProps: { color: "blue", size: "xs" },
    mantineSelectAllCheckboxProps: { color: "blue", size: "xs" },
    mantineSearchTextInputProps: { size: "sm" },
    enablePinning: false,
  });

  const selectedCount = table.getSelectedRowModel().rows.length;

  return (
    <Stack>
      <ConfirmModal
        opened={confirmState.opened}
        onClose={closeConfirm}
        title={confirmState.title}
        message={confirmState.message}
        confirmLabel="Delete"
        confirmColor="red"
        onConfirm={confirmState.onConfirm}
      />

      <SegmentedControl
        value={activeTab}
        onChange={handleTabChange}
        size="sm"
        data={[
          { value: "pipeline", label: `Pipeline Prompts (${pipelineCount})` },
          { value: "agent", label: `Agent Prompts (${agentCount})` },
          { value: "voice", label: "Voice Prompts" },
        ]}
        w="fit-content"
      />

      <PromptTableHeader
        activeTab={activeTab}
        onCreate={() => navigate("create")}
      />

      {/* ── Voice tab ─────────────────────────────────────────────────────── */}
      {activeTab === "voice" && <VoiceTab voiceConfig={voiceConfig} />}

      {/* ── Pipeline / Agent table ────────────────────────────────────────── */}
      {activeTab !== "voice" && (
        <>
          <MRT_GlobalFilterTextInput
            table={table}
            variant="default"
            size="sm"
            leftSection={<IconSearch size={16} />}
            c="dark.8"
            p={0}
          />

          {selectedCount > 0 && (
            <Group
              p="sm"
              bg="blue.0"
              style={{
                borderRadius: 8,
                border: "1px solid var(--mantine-color-blue-2)",
              }}
              justify="space-between"
            >
              <Text size="sm" fw={500} c="blue.8">
                {selectedCount} prompt{selectedCount > 1 ? "s" : ""} selected
              </Text>
              <Group gap="xs">
                <Button
                  size="xs"
                  variant="light"
                  color="red"
                  leftSection={<IconTrash size={13} />}
                  loading={bulkDeleting}
                  onClick={handleBulkDelete}
                >
                  Delete Selected
                </Button>
                <Button
                  size="xs"
                  variant="subtle"
                  color="gray"
                  onClick={() => setRowSelection({})}
                >
                  Clear
                </Button>
              </Group>
            </Group>
          )}

          <Paper
            bdrs={4}
            style={{
              overflow: "hidden",
              border: "1px solid var(--mantine-color-white-2)",
            }}
          >
            <Table
              fz={11}
              highlightOnHover
              horizontalSpacing="xl"
              verticalSpacing="xs"
              withColumnBorders
              m="0"
            >
              <Table.Thead>
                {table.getHeaderGroups().map((hg) => (
                  <Table.Tr key={hg.id} c="dark.4" bg="gray.1">
                    {hg.headers.map((header) => (
                      <Table.Th key={header.id} px={12}>
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.Header ??
                                header.column.columnDef.header,
                              header.getContext(),
                            )}
                      </Table.Th>
                    ))}
                  </Table.Tr>
                ))}
              </Table.Thead>
              <Table.Tbody>
                {table.getRowModel().rows.map((row) => (
                  <Table.Tr key={row.id} style={{ cursor: "pointer" }}>
                    {row.getVisibleCells().map((cell) => (
                      <Table.Td
                        key={cell.id}
                        px={12}
                        onClick={() => {
                          if (
                            cell.column.id === "mrt-row-select" ||
                            cell.column.id === "actions"
                          )
                            return;
                          navigate(`edit/${row.original.id}`);
                        }}
                      >
                        <MRT_TableBodyCellValue cell={cell} table={table} />
                      </Table.Td>
                    ))}
                  </Table.Tr>
                ))}
                {filteredData.length === 0 && (
                  <Table.Tr>
                    <Table.Td colSpan={99} ta="center" py="xl" c="dimmed">
                      {activeTab === "pipeline"
                        ? "No pipeline prompts yet. Create one and set a Pipeline Key to control chatbot behaviour from the admin panel."
                        : 'No agent prompts yet. Click "New Prompt" to create one.'}
                    </Table.Td>
                  </Table.Tr>
                )}
              </Table.Tbody>
            </Table>
          </Paper>

          <MRT_TablePagination table={table} />
          <MRT_ToolbarAlertBanner stackAlertBanner table={table} />
        </>
      )}
    </Stack>
  );
};

export default PromptsClientPage;