'use client';

import { keepPreviousData, useQuery } from '@tanstack/react-query';
import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
import { Icons } from '@/components/icons';
import { Card, CardContent } from '@/components/ui/card';
import { DataTable } from '@/components/ui/table/data-table';
import { useDataTable } from '@/hooks/use-data-table';
import { getSortingStateParser } from '@/lib/parsers';
import { auditLogsQueryOptions } from '../api/queries';
import { auditLogColumns } from './audit-log-columns';
import { AuditLogToolbar } from './audit-log-toolbar';

const columnIds = auditLogColumns.map((column) => column.id).filter(Boolean) as string[];

export function AuditLogTable() {
  const [params] = useQueryStates({
    page: parseAsInteger.withDefault(1),
    perPage: parseAsInteger.withDefault(10),
    search: parseAsString,
    user: parseAsString,
    module: parseAsString,
    action: parseAsString,
    dateFrom: parseAsString,
    dateTo: parseAsString,
    sort: getSortingStateParser(columnIds).withDefault([])
  });

  const filters = {
    page: params.page,
    limit: params.perPage,
    ...(params.search && { search: params.search }),
    ...(params.user && { user: params.user }),
    ...(params.module && { module: params.module }),
    ...(params.action && { action: params.action }),
    ...(params.dateFrom && { dateFrom: params.dateFrom }),
    ...(params.dateTo && { dateTo: params.dateTo }),
    ...(params.sort.length > 0 && { sort: JSON.stringify(params.sort) })
  };

  const { data, error, isFetching, isPending } = useQuery({
    ...auditLogsQueryOptions(filters),
    placeholderData: keepPreviousData
  });

  const { table } = useDataTable({
    data: data?.audit_logs ?? [],
    columns: auditLogColumns,
    pageCount: data ? Math.max(1, Math.ceil(data.total_audit_logs / params.perPage)) : 1,
    shallow: true,
    debounceMs: 300,
    initialState: {
      sorting: [{ id: 'created_at', desc: true }]
    }
  });

  if (error) {
    return (
      <Card className='border-dashed'>
        <CardContent className='flex flex-col items-center justify-center gap-4 py-12 text-center'>
          <div className='bg-muted flex h-12 w-12 items-center justify-center rounded-full'>
            <Icons.warning className='text-muted-foreground h-6 w-6' />
          </div>
          <div className='space-y-1'>
            <h3 className='text-lg font-semibold'>ไม่สามารถโหลดประวัติการใช้งานได้</h3>
            <p className='text-muted-foreground text-sm'>{error.message}</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  if ((isPending && !data) || !data) {
    return (
      <Card className='border-dashed'>
        <CardContent className='flex flex-col items-center justify-center gap-4 py-12 text-center'>
          <Icons.spinner className='text-muted-foreground h-6 w-6 animate-spin' />
          <p className='text-muted-foreground text-sm'>กำลังโหลดประวัติการใช้งาน</p>
        </CardContent>
      </Card>
    );
  }

  const hasActiveFilters = Boolean(
    params.search || params.user || params.module || params.action || params.dateFrom || params.dateTo
  );

  if (data.audit_logs.length === 0) {
    return (
      <div className='space-y-4'>
        <AuditLogToolbar table={table} isFetching={isFetching} />
        <Card className='border-dashed'>
          <CardContent className='flex flex-col items-center justify-center gap-4 py-12 text-center'>
            <div className='bg-muted flex h-12 w-12 items-center justify-center rounded-full'>
              <Icons.forms className='text-muted-foreground h-6 w-6' />
            </div>
            <div className='space-y-1'>
              <h3 className='text-lg font-semibold'>
                {hasActiveFilters ? 'ไม่พบประวัติที่ตรงกับตัวกรอง' : 'ยังไม่มีประวัติการใช้งาน'}
              </h3>
              <p className='text-muted-foreground max-w-md text-sm'>
                {hasActiveFilters
                  ? 'ลองปรับคำค้นหา วันที่ โมดูล หรือผู้ใช้งาน แล้วค้นหาอีกครั้ง'
                  : 'เมื่อมีการเข้าสู่ระบบหรือทำรายการสำคัญในระบบ ข้อมูลจะแสดงที่หน้านี้'}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <DataTable table={table}>
      <AuditLogToolbar table={table} isFetching={isFetching} />
    </DataTable>
  );
}
