'use client';

import { AlignCommandIcon as IconCmd } from '@/components/misc/alignui-icons';
import * as React from 'react';
import {
  ChevronDown,
  Database,
  Filter,
  Laptop,
  MoreHorizontal,
  PenLine,
  PieChart,
  Search,
  ShieldCheck,
  Sparkles,
  ArrowUpDown,
  User,
} 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 Badge from '@/components/ui/badge';
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 SegmentedControl from '@/components/ui/segmented-control';
import { StarRating } from '@/components/ui/svg-rating-icons';
import * as Table from '@/components/ui/table';

type CourseData = {
  id: string;
  courseName: string;
  courseIcon?: React.ReactNode;
  categories: {
    name: string;
    color:
      | 'blue'
      | 'purple'
      | 'green'
      | 'yellow'
      | 'orange'
      | 'red'
      | 'pink'
      | 'gray'
      | 'sky'
      | 'teal';
    additionalCount?: number;
  }[];
  duration: string;
  instructor: {
    name: string;
    avatar: string;
  };
  rating: number;
  additionalCount?: number;
};

const data: CourseData[] = [
  {
    id: '1',
    courseName: 'Leadership Skills',
    courseIcon: <User className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Team', color: 'blue', additionalCount: 4 },
      { name: 'Communication', color: 'purple', additionalCount: 4 },
    ],
    duration: '3 weeks',
    instructor: {
      name: 'Horizon Shift',
      avatar: 'https://alignui.com/images/logo/horizon.svg',
    },
    rating: 4.5,
  },
  {
    id: '2',
    courseName: 'Data Science Fundamentals',
    courseIcon: <Database className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Data', color: 'orange' },
      { name: 'Analytics', color: 'red', additionalCount: 2 },
    ],
    duration: '6 weeks',
    instructor: {
      name: 'Orandis',
      avatar: 'https://alignui.com/images/logo/orandis.svg',
    },
    rating: 4,
  },
  {
    id: '3',
    courseName: 'Web Development Basics',
    courseIcon: <Laptop className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Programming', color: 'pink' },
      { name: 'Wen', color: 'blue', additionalCount: 2 },
    ],
    duration: '8 weeks',
    instructor: {
      name: 'Phoenix',
      avatar: 'https://alignui.com/images/logo/phoenix.svg',
    },
    rating: 5,
  },
  {
    id: '4',
    courseName: 'Digital Marketing',
    courseIcon: <PieChart className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Marketing', color: 'green' },
      { name: 'Social Media', color: 'purple', additionalCount: 2 },
    ],
    duration: '2 weeks',
    instructor: {
      name: 'Catalyst',
      avatar: 'https://alignui.com/images/logo/catalyst.svg',
    },
    rating: 3,
  },
  {
    id: '5',
    courseName: 'Graphic Design Mastery',
    courseIcon: <PenLine className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Design', color: 'yellow' },
      { name: 'Creativity', color: 'green', additionalCount: 4 },
    ],
    duration: '12 weeks',
    instructor: {
      name: 'Aurora',
      avatar: 'https://alignui.com/images/logo/aurora.svg',
    },
    rating: 4.5,
  },
  {
    id: '6',
    courseName: 'Cybersecurity Basics',
    courseIcon: <ShieldCheck className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'Security', color: 'sky' },
      { name: 'Programming', color: 'pink' },
      { name: 'IT', color: 'purple' },
    ],
    duration: '4 weeks',
    instructor: {
      name: 'Orandis',
      avatar: 'https://alignui.com/images/logo/orandis.svg',
    },
    rating: 4,
  },
  {
    id: '7',
    courseName: 'Artificial Intelligence',
    courseIcon: <Sparkles className='text-text-sub-600 size-5' />,
    categories: [
      { name: 'AI', color: 'purple' },
      { name: 'Machine Learning', color: 'orange', additionalCount: 4 },
    ],
    duration: '6 weeks',
    instructor: {
      name: 'Apex',
      avatar: 'https://alignui.com/images/logo/apex.svg',
    },
    rating: 5,
  },
];
const getCategoryBadges = (
  categories: {
    name: string;
    color:
      | 'blue'
      | 'purple'
      | 'green'
      | 'yellow'
      | 'orange'
      | 'red'
      | 'pink'
      | 'gray'
      | 'sky'
      | 'teal';
    additionalCount?: number;
  }[],
) => {
  // Get the additionalCount from first category with this property
  const additionalCount = categories.find(
    (cat) => cat.additionalCount !== undefined,
  )?.additionalCount;

  return (
    <div className='flex items-center gap-2'>
      {categories.map((category, index) => (
        <Badge.Root
          color={category.color}
          variant='lighter'
          key={index}
          size='medium'
        >
          <span className='whitespace-nowrap'>{category.name}</span>
        </Badge.Root>
      ))}
      {additionalCount && (
        <Badge.Root color='gray' variant='lighter'>
          +{additionalCount}
        </Badge.Root>
      )}
    </div>
  );
};

export default function CourseCatalogTable() {
  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 === 'in-progress') {
      return data.filter((course) => course.rating < 5);
    }
    if (filter === 'completed') {
      return data.filter((course) => course.rating === 5);
    }
    return data;
  }, [filter]);

  const columns: ColumnDef<CourseData>[] = [
    {
      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: 'courseName',
      accessorKey: 'courseName',
      header: ({ column }) => (
        <Table.SortableHeader
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Course Name
        </Table.SortableHeader>
      ),
      cell: () => (
        <div className='flex w-[260px] items-center gap-3'>
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-8 items-center justify-center rounded-full ring-1 ring-inset'>
            {row.original.courseIcon}
          </div>
          <span className='text-label-sm text-text-strong-950'>
            {row.original.courseName}
          </span>
        </div>
      ),
    },
    {
      id: 'instructor',
      accessorKey: 'instructor.name',
      header: ({ column }) => (
        <Table.SortableHeader
          className='w-[176px]'
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Instructor
        </Table.SortableHeader>
      ),
      cell: () => (
        <div className='flex items-center gap-3'>
          <Avatar.Root size='32'>
            <Avatar.Image src={row.original.instructor.avatar} />
          </Avatar.Root>
          <span className='text-paragraph-sm text-text-strong-950'>
            {row.original.instructor.name}
          </span>
        </div>
      ),
    },
    {
      id: 'category',
      accessorKey: 'categories',
      header: ({ column }) => (
        <Table.SortableHeader
          className='w-[216px]'
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Category
        </Table.SortableHeader>
      ),
      cell: ({ row }) => getCategoryBadges(row.original.categories),
    },
    {
      id: 'rating',
      accessorKey: 'rating',
      header: ({ column }) => (
        <Table.SortableHeader
          className='w-[136px]'
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Course Rating
        </Table.SortableHeader>
      ),
      cell: ({ row }) => <StarRating rating={row.original.rating} />,
    },
    {
      id: 'duration',
      accessorKey: 'duration',
      header: ({ column }) => (
        <Table.SortableHeader
          className='w-[116px]'
          sorted={column.getIsSorted()}
          onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Duration
        </Table.SortableHeader>
      ),
      cell: ({ row }) => (
        <span className='text-paragraph-sm text-text-sub-600'>
          {row.original.duration}
        </span>
      ),
    },
    {
      id: 'actions',
      enableHiding: false,
      cell: () => (
        <Button.Root variant='neutral' mode='ghost' size='xsmall'>
          <Button.Icon as={MoreHorizontal} />
        </Button.Root>
      ),
    },
  ];

  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='in-progress'>
                In Progress
              </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...' />
              <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>
  );
}