import { BuildTable } from "@/components/blocks/Table/table";
import {
  ActionIcon,
  Button,
  Flex,
  Group,
  Stack,
  Text,
} from "@mantine/core";
import { IconEdit, IconPlus } from "@tabler/icons-react";
import type { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
import { useNavigate } from "react-router";

type PromptRow = {
  id: string;
  name: string;
  key: string;
  value: string;
  created_by: string;
  updated_by: string;
};

const PromptsClientPage: React.FC<{
  tableProps: { data: PromptRow[]; totalRows: number };
}> = ({ tableProps: { data, totalRows } }) => {
  const navigate = useNavigate();

  const handleEdit = (row: PromptRow) => {
    navigate(`prompts/edit/${row.id}`);
    navigate(`edit/${row.id}`);
  };

  const handleCreatePrompt = () => {
    navigate("prompts/create");
    navigate("create");
  };

  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as PromptRow;
    navigate(`prompts/edit/${row.id}`);
    navigate(`edit/${row.id}`);
  };

  return (
    <Stack>
      {/* 🔥 Create Button Section */}
      <Flex justify="flex-end">
        <Group>
          <Button
            size="compact-lg"
            fz={12}
            variant="filled"
            color="blue.1"
            autoContrast
            leftSection={
              <IconPlus style={{ height: "12px", marginRight: "-6px" }} />
            }
            onClick={handleCreatePrompt}
          >
            Create New Prompt
          </Button>
        </Group>
      </Flex>

      {/* 🔥 Table Section */}
      {data.length > 0 ? (
        <BuildTable
          data={data}
          columns={columns(handleEdit)}
          totalRows={totalRows}
          onRowClick={handleRowClick}
        />
      ) : (
        <Flex justify="center" align="center" py={50}>
          <Text fz="h2" fw="bold" ta="center">
            No Prompts Available
          </Text>
        </Flex>
      )}
    </Stack>
  );
};

export default PromptsClientPage;

const columns = (
  onEdit: (row: PromptRow) => void,
): MRT_ColumnDef<PromptRow>[] => [
  {
    header: "Prompt Name",
    accessorKey: "name",
    minSize: 200,
  },
  {
    header: "Value",
    accessorFn: (row) => (
      <Text size="sm" lineClamp={2}>
        {row.value}
      </Text>
    ),
    minSize: 300,
  },
  {
    header: "Created By",
    accessorKey: "created_by",
    minSize: 150,
  },
  {
    header: "Updated By",
    accessorKey: "updated_by",
    minSize: 150,
  },
  {
    header: "Edit",
    accessorFn: (row) => (
      <ActionIcon
        variant="light"
        color="blue"
        onClick={(e) => {
          e.stopPropagation();
          onEdit(row);
        }}
      >
        <IconEdit size={16} />
      </ActionIcon>
    ),
    minSize: 100,
  },
];