'use client';

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

import * as AvatarGroup from '@/components/ui/avatar-group';
import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as Input from '@/components/ui/input';
import * as Kbd from '@/components/ui/kbd';
import * as ProgressBar from '@/components/ui/progress-bar';
import * as SegmentedControl from '@/components/ui/segmented-control';
import * as Table from '@/components/ui/table';

type Data = {
  id: string;
  company: {
    name: string;
    category: string;
    logo: string;
  };
  description: string;
  teamMembers: {
    avatars: string[];
    count?: number;
  };
  deadline: string;
  progress: number;
};

const data: Data[] = [
  {
    id: '1',
    company: {
      name: 'Spotify',
      category: 'Music & Podcast',
      logo: 'https://alignui.com/images/major-brands/spotify.svg',
    },
    description: 'Spotify mobile app UX enhancements and rebranding project.',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 9,
    },
    deadline: '29/09/2023',
    progress: 100,
  },
  {
    id: '2',
    company: {
      name: 'Opensea',
      category: 'NFT Marketplace',
      logo: 'https://alignui.com/images/major-brands/opensea.svg',
    },
    description: 'Mobile & Desktop App Design',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 4,
    },
    deadline: '02/11/2023',
    progress: 60,
  },
  {
    id: '3',
    company: {
      name: 'Zoom',
      category: 'Video Conferencing',
      logo: 'https://alignui.com/images/major-brands/zoom.svg',
    },
    description: 'Integration of advanced security features.',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 3,
    },
    deadline: '20/11/2023',
    progress: 45,
  },
  {
    id: '4',
    company: {
      name: 'Notion',
      category: 'Note-Taking and Organization',
      logo: 'https://alignui.com/images/major-brands/notion.svg',
    },
    description: 'Redesign of user interface and addition of new features.',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 1,
    },
    deadline: '05/01/2024',
    progress: 30,
  },
  {
    id: '5',
    company: {
      name: 'Skype',
      category: 'Video & Voice Communication',
      logo: 'https://alignui.com/images/major-brands/skype.svg',
    },
    description: 'Migration to a new infrastructure for improved performance.',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 6,
    },
    deadline: '20/03/2024',
    progress: 10,
  },
  {
    id: '6',
    company: {
      name: 'Slack',
      category: 'Team Collaboration',
      logo: 'https://alignui.com/images/major-brands/slack.svg',
    },
    description: 'Integration with third-party productivity tools.',
    teamMembers: {
      avatars: [
        'https://alignui.com/images/avatar/illustration/james.png',
        'https://alignui.com/images/avatar/illustration/sophia.png',
        'https://alignui.com/images/avatar/illustration/arthur.png',
        'https://alignui.com/images/avatar/illustration/emma.png',
      ],
      count: 2,
    },
    deadline: '15/06/2024',
    progress: 5,
  },
];

const columns: ColumnDef<Data>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox.Root
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
      />
    ),
    cell: () => (
      <Checkbox.Root
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
      />
    ),
  },
  {
    id: 'company',
    accessorKey: 'company.name',
    header: ({ column }) => (
      <Table.SortableHeader
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Company Name
      </Table.SortableHeader>
    ),
    cell: () => (
      <div className='flex w-[214px] items-center gap-3'>
        <div className='bg-bg-white-0 ring-stroke-soft-200 flex size-10 items-center justify-center rounded-full ring-1 ring-inset'>
          <img src={row.original.company.logo} alt='' className='size-7' />
        </div>
        <div className='flex min-w-0 flex-1 flex-col'>
          <span className='text-label-sm text-text-strong-950'>
            {row.original.company.name}
          </span>
          <span className='text-paragraph-xs text-text-sub-600 truncate'>
            {row.original.company.category}
          </span>
        </div>
      </div>
    ),
  },
  {
    id: 'description',
    accessorKey: 'description',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[276px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Description
      </Table.SortableHeader>
    ),
    cell: () => (
      <span className='text-paragraph-sm text-text-strong-950 line-clamp-2 whitespace-normal'>
        {row.original.description}
      </span>
    ),
  },
  {
    id: 'teamMembers',
    accessorKey: 'teamMembers',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[132px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Team Members
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <AvatarGroup.Root size='24'>
        {row.original.teamMembers.avatars.map((avatar, index) => (
          <Avatar.Root key={index}>
            <Avatar.Image src={avatar} />
          </Avatar.Root>
        ))}
        {row.original.teamMembers.count && (
          <AvatarGroup.Overflow>
            +{row.original.teamMembers.count}
          </AvatarGroup.Overflow>
        )}
      </AvatarGroup.Root>
    ),
  },
  {
    id: 'deadline',
    accessorKey: 'deadline',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[96px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Deadline
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <span className='text-paragraph-sm text-text-sub-600'>
        {row.original.deadline}
      </span>
    ),
  },
  {
    id: 'progress',
    accessorKey: 'progress',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[172px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Progress
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <div className='w-full max-w-48'>
        <div className='flex items-center gap-2'>
          <ProgressBar.Root value={row.original.progress} />
          <span className='text-paragraph-xs text-text-sub-600'>
            {row.original.progress}%
          </span>
        </div>
      </div>
    ),
  },
  {
    id: 'actions',
    enableHiding: false,
    cell: () => (
      <Button.Root variant='neutral' mode='ghost' size='xsmall'>
        <Button.Icon as={MoreHorizontal} />
      </Button.Root>
    ),
  },
];

export default function TaskProgressTable() {
  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;

    return data.filter((item) => {
      if (filter === 'active') return item.progress > 0 && item.progress < 100;
      if (filter === 'completed') return item.progress === 100;
      return true;
    });
  }, [filter]);

  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='active'>
                Ongoing
              </SegmentedControl.Trigger>
              <SegmentedControl.Trigger value='completed'>
                Completed
              </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 tasks...' />
              <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>
  );
}