'use client';

import { AlignCommandIcon as IconCmd } from '@/components/misc/alignui-icons';
import * as React from 'react';
import {
  ChevronDown,
  Trash2,
  Pencil,
  Filter,
  Search,
  ArrowUpDown,
} from 'lucide-react';
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  type ColumnDef,
  type SortingState,
} from '@tanstack/react-table';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as FileFormatIcon from '@/components/ui/file-format-icon';
import * as Input from '@/components/ui/input';
import * as Kbd from '@/components/ui/kbd';
import * as SegmentedControl from '@/components/ui/segmented-control';
import * as Table from '@/components/ui/table';

type FileData = {
  id: string;
  fileName: string;
  fileType: 'pdf' | 'doc' | 'docx' | 'pptx' | 'xlsx';
  fileSize: string;
  uploadedBy: {
    name: string;
    email: string;
    avatar: string;
    color: 'yellow' | 'blue' | 'sky' | 'purple' | 'red' | 'gray';
  };
  uploadDate: string;
  lastUpdated: string;
};

const data: FileData[] = [
  {
    id: '1',
    fileName: 'employee-contract.pdf',
    fileType: 'pdf',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'James Brown',
      email: 'james@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/james.png',
      color: 'gray',
    },
    uploadDate: 'July 15, 2023',
    lastUpdated: 'July 17, 2023',
  },
  {
    id: '2',
    fileName: 'project-proposal.docx',
    fileType: 'docx',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Sophia Williams',
      email: 'sophia@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/sophia.png',
      color: 'yellow',
    },
    uploadDate: 'July 17, 2023',
    lastUpdated: 'July 20, 2023',
  },
  {
    id: '3',
    fileName: 'meeting-minutes.pdf',
    fileType: 'pdf',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Arthur Taylor',
      email: 'arthur@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/arthur.png',
      color: 'blue',
    },
    uploadDate: 'July 19, 2023',
    lastUpdated: 'July 21, 2023',
  },
  {
    id: '4',
    fileName: 'marketing-strategy.pptx',
    fileType: 'pptx',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Emma Wright',
      email: 'emma@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/emma.png',
      color: 'sky',
    },
    uploadDate: 'July 21, 2023',
    lastUpdated: 'July 23, 2023',
  },
  {
    id: '5',
    fileName: 'training-manual.pdf',
    fileType: 'pdf',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Matthew Johnson',
      email: 'matthew@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/matthew.png',
      color: 'purple',
    },
    uploadDate: 'July 23, 2023',
    lastUpdated: 'July 25, 2023',
  },
  {
    id: '6',
    fileName: 'policy-guidelines.doc',
    fileType: 'doc',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Laura Perez',
      email: 'laura@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/laura.png',
      color: 'red',
    },
    uploadDate: 'July 25, 2023',
    lastUpdated: 'July 27, 2023',
  },
  {
    id: '7',
    fileName: 'budget-spreadsheet.xlsx',
    fileType: 'xlsx',
    fileSize: '1.2 MB',
    uploadedBy: {
      name: 'Wei Chen',
      email: 'wei@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/wei.png',
      color: 'gray',
    },
    uploadDate: 'July 27, 2023',
    lastUpdated: 'July 29, 2023',
  },
];
const getFileIcon = (fileType: string) => {
  switch (fileType) {
    case 'pdf':
      return <FileFormatIcon.Root format='PDF' size='small' color='red' />;
    case 'doc':
    case 'docx':
      return <FileFormatIcon.Root format='DOC' size='small' color='blue' />;
    case 'pptx':
      return <FileFormatIcon.Root format='PPTX' size='small' color='orange' />;
    case 'xlsx':
      return <FileFormatIcon.Root format='XLS' size='small' color='green' />;
    default:
      return null;
  }
};

export default function FileManagementTable() {
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [filter, setFilter] = React.useState('all');
  const [rowSelection, setRowSelection] = React.useState({});

  const filteredData = React.useMemo(() => {
    if (filter === 'all') return data;
    if (filter === 'employee')
      return data.filter(
        (file) =>
          file.fileName.includes('employee') ||
          file.fileName.includes('training'),
      );
    if (filter === 'company')
      return data.filter(
        (file) =>
          file.fileName.includes('project') ||
          file.fileName.includes('meeting') ||
          file.fileName.includes('marketing') ||
          file.fileName.includes('policy') ||
          file.fileName.includes('budget'),
      );
    return data;
  }, [filter]);

  const columns: ColumnDef<FileData>[] = [
    {
      id: 'select',
      header: ({ table }) => (
        <Checkbox.Root
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label='Select all'
        />
      ),
      cell: ({ row }) => (
        <Checkbox.Root
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label='Select row'
        />
      ),
    },
    {
      id: 'fileName',
      accessorKey: 'fileName',
      header: ({ column }) => (
        <Table.SortableHeader
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          File Name
        </Table.SortableHeader>
      ),
      cell: ({ row }) => (
        <div className='flex items-center gap-3'>
          {getFileIcon(row.original.fileType)}
          <div className='flex flex-col gap-0.5'>
            <span className='text-paragraph-sm text-text-strong-950'>
              {row.original.fileName}
            </span>
            <span className='text-paragraph-xs text-text-sub-600'>
              {row.original.fileSize}
            </span>
          </div>
        </div>
      ),
    },
    {
      id: 'uploadedBy',
      accessorKey: 'uploadedBy.name',
      header: ({ column }) => (
        <Table.SortableHeader
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Uploaded By
        </Table.SortableHeader>
      ),
      cell: ({ row }) => (
        <div className='flex items-center gap-3'>
          <Avatar.Root size='40' color={row.original.uploadedBy.color}>
            <Avatar.Image src={row.original.uploadedBy.avatar} />
          </Avatar.Root>
          <div className='flex flex-col gap-0.5'>
            <span className='text-paragraph-sm text-text-strong-950'>
              {row.original.uploadedBy.name}
            </span>
            <span className='text-paragraph-xs text-text-sub-600'>
              {row.original.uploadedBy.email}
            </span>
          </div>
        </div>
      ),
    },
    {
      id: 'uploadDate',
      accessorKey: 'uploadDate',
      header: ({ column }) => (
        <Table.SortableHeader
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Upload Date
        </Table.SortableHeader>
      ),
      cell: ({ row }) => (
        <span className='text-paragraph-sm text-text-sub-600'>
          {row.original.uploadDate}
        </span>
      ),
    },
    {
      id: 'lastUpdated',
      accessorKey: 'lastUpdated',
      header: ({ column }) => (
        <Table.SortableHeader
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Last Updated
        </Table.SortableHeader>
      ),
      cell: ({ row }) => (
        <span className='text-paragraph-sm text-text-sub-600'>
          {row.original.lastUpdated}
        </span>
      ),
    },
    {
      id: 'actions',
      enableHiding: false,
      cell: () => (
        <div className='flex items-center justify-between'>
          <Button.Root variant='neutral' mode='ghost' size='xsmall'>
            <Button.Icon as={Trash2} />
          </Button.Root>
          <Button.Root variant='neutral' mode='ghost' size='xsmall'>
            <Button.Icon as={Pencil} />
          </Button.Root>
        </div>
      ),
    },
  ];

  const table = useReactTable({
    data: filteredData,
    columns,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      rowSelection,
    },
  });

  return (
    <div className='w-full max-w-[1104px]'>
      <div className='mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
        <div className='w-full sm:w-[320px]'>
          <SegmentedControl.Root defaultValue='all' onValueChange={setFilter}>
            <SegmentedControl.List>
              <SegmentedControl.Trigger value='all'>
                All
              </SegmentedControl.Trigger>
              <SegmentedControl.Trigger value='employee'>
                Employee
              </SegmentedControl.Trigger>
              <SegmentedControl.Trigger value='company'>
                Company
              </SegmentedControl.Trigger>
            </SegmentedControl.List>
          </SegmentedControl.Root>
        </div>

        <div className='flex w-full flex-col gap-3 sm:w-auto sm:flex-row'>
          <Input.Root size='small' className='w-full sm:w-auto'>
            <Input.Wrapper>
              <Input.Icon as={Search} />
              <Input.Input placeholder='Search...' />
              <Kbd.Root>
                <IconCmd className='size-2.5' />1
              </Kbd.Root>
            </Input.Wrapper>
          </Input.Root>
          <div className='flex w-full gap-3 sm:w-auto'>
            <Button.Root
              variant='neutral'
              mode='stroke'
              size='small'
              className='flex-1 sm:flex-initial'
            >
              <Button.Icon as={Filter} className='text-text-sub-600' />
              <span className='text-paragraph-sm text-text-sub-600'>
                Filter
              </span>
            </Button.Root>
            <Button.Root
              variant='neutral'
              mode='stroke'
              size='small'
              className='flex-1 sm:flex-initial'
            >
              <Button.Icon as={ArrowUpDown} className='text-text-soft-400' />
              <span className='text-paragraph-sm text-text-sub-600'>
                Sort by
              </span>
              <Button.Icon as={ChevronDown} className='text-text-soft-400' />
            </Button.Root>
          </div>
        </div>
      </div>

      <div className='overflow-x-auto'>
        <Table.Root>
          <Table.Header>
            {table.getHeaderGroups().map((headerGroup) => (
              <Table.Row key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  const customClass = header.id === 'select' ? 'pr-0' : '';

                  return (
                    <Table.Head key={header.id} className={customClass}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext(),
                          )}
                    </Table.Head>
                  );
                })}
              </Table.Row>
            ))}
          </Table.Header>
          <Table.Body>
            {table.getRowModel().rows?.length > 0 &&
              table.getRowModel().rows.map((row, i, arr) => (
                <React.Fragment key={row.id}>
                  <Table.Row data-state={row.getIsSelected() && 'selected'}>
                    {row.getVisibleCells().map((cell) => {
                      const customCellClass =
                        cell.column.id === 'select' ? 'pr-0' : '';

                      return (
                        <Table.Cell key={cell.id} className={customCellClass}>
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext(),
                          )}
                        </Table.Cell>
                      );
                    })}
                  </Table.Row>
                  {i < arr.length - 1 && <Table.RowDivider />}
                </React.Fragment>
              ))}
          </Table.Body>
        </Table.Root>
      </div>
    </div>
  );
}