import ConfirmDeleteButton from '@/components/common/confirm-delete-button';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { TableBar } from '@/components/common/table-bar';
import { Badge } from '@/components/ui/badge';
import { useTableData } from '@/data/useTableData';
import QueryBuilder from '@/lib/query-builder';
import { router } from '@inertiajs/react';
import { ArrowSquareOutIcon, ChatCircleIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

type TMarketComment = {
  id: number;
  content: string;
  likes_count: number;
  parent_id: number | null;
  created_at: string;
  user: { id: number; first_name: string; last_name: string } | null;
  market: { id: number; title: string; slug: string } | null;
};

const MarketComments = () => {
  const builder = QueryBuilder();
  builder.sort('created_at', 'desc');

  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/market-comments${builder.build()}`,
  );
  const { t } = useTranslation();

  return (
    <div>
      <PageHeading
        title={t('Market Comments')}
        description={t('View and moderate user comments across all markets.')}
      />

      <TableBar builder={builder} searchFields={['content']} />

      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'market',
            header: t('Market'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return comment.market ? (
                <button
                  className="flex items-center gap-1 text-left font-medium text-primary hover:underline"
                  onClick={() =>
                    router.visit(`/admin/markets/${comment.market!.id}`)
                  }
                >
                  <span className="line-clamp-1 max-w-[180px]">
                    {comment.market.title}
                  </span>
                  <ArrowSquareOutIcon className="size-3.5 shrink-0" />
                </button>
              ) : (
                <span className="text-black/40 dark:text-white/40">-</span>
              );
            },
          },
          {
            accessorKey: 'user',
            header: t('Author'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return comment.user ? (
                <span className="font-medium">
                  {comment.user.first_name} {comment.user.last_name}
                </span>
              ) : (
                <span className="text-black/40 dark:text-white/40">
                  {t('Deleted user')}
                </span>
              );
            },
          },
          {
            accessorKey: 'content',
            header: t('Comment'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return (
                <p className="line-clamp-2 max-w-sm text-sm">
                  {comment.content}
                </p>
              );
            },
          },
          {
            accessorKey: 'parent_id',
            header: t('Type'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return (
                <Badge
                  variant={comment.parent_id ? 'secondary' : 'successSubtle'}
                >
                  <ChatCircleIcon className="mr-1 size-3" />
                  {comment.parent_id ? t('Reply') : t('Comment')}
                </Badge>
              );
            },
          },
          {
            accessorKey: 'likes_count',
            header: t('Likes'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return (
                <span className="text-sm text-black/60 dark:text-white/60">
                  {comment.likes_count}
                </span>
              );
            },
          },
          {
            accessorKey: 'created_at',
            header: t('Date'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return (
                <span className="text-sm text-black/60 dark:text-white/60">
                  {dayjs(comment.created_at).format('MMM D, YYYY HH:mm')}
                </span>
              );
            },
          },
          {
            id: 'actions',
            header: t('Actions'),
            cell: ({ row }) => {
              const comment = row.original as TMarketComment;
              return (
                <ConfirmDeleteButton
                  url={`/api/admin/market-comments/${comment.id}`}
                  onSuccess={refresh}
                  description={t(
                    'This will permanently delete this comment and all its replies.',
                  )}
                />
              );
            },
          },
        ]}
      />
    </div>
  );
};

MarketComments.title = 'Market Comments';

export default MarketComments;