'use client';

import { AlignCommandIcon as IconCmd } from '@/components/misc/alignui-icons';
import * as React from 'react';
import {
  ChevronDown,
  CheckCircle2,
  Filter,
  Ban,
  MoreHorizontal,
  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 StatusBadge from '@/components/ui/status-badge';
import * as Table from '@/components/ui/table';

type UserData = {
  id: string;
  companyName: {
    name: string;
    description: string;
    logo: string;
  };
  contactPerson: {
    name: string;
    email: string;
    avatar: string;
    color: 'yellow' | 'blue' | 'sky' | 'purple' | 'red' | 'gray';
  };
  relationship: string;
  contractDetails: {
    fileName: string;
    fileSize: string;
    period: string;
  };
  status: {
    variant: 'completed' | 'disabled';
    label: string;
  };
};

const data: UserData[] = [
  {
    id: '1',
    companyName: {
      name: 'Trello',
      description: 'Project Management',
      logo: 'https://alignui.com/images/major-brands/trello.svg',
    },
    contactPerson: {
      name: 'Nuray Aksoy',
      email: 'nuray@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/nuray.png',
      color: 'red',
    },
    relationship: 'Client-Provider',
    contractDetails: {
      fileName: 'trello-contract.pdf',
      fileSize: '1.8 MB',
      period: 'Aug 2022 - 2024',
    },
    status: {
      variant: 'completed',
      label: 'Active',
    },
  },
  {
    id: '2',
    companyName: {
      name: 'Loom',
      description: 'Video Messaging',
      logo: 'https://alignui.com/images/major-brands/loom.svg',
    },
    contactPerson: {
      name: 'Ravi Patel',
      email: 'ravi@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/ravi.png',
      color: 'purple',
    },
    relationship: 'Partnership Collab.',
    contractDetails: {
      fileName: 'loom-contract.pdf',
      fileSize: '1.5 MB',
      period: 'Sep 2023 - 2024',
    },
    status: {
      variant: 'completed',
      label: 'Active',
    },
  },
  {
    id: '3',
    companyName: {
      name: 'Monday.com',
      description: 'Work Operation System',
      logo: 'https://alignui.com/images/major-brands/monday.svg',
    },
    contactPerson: {
      name: 'Natalia Nowak',
      email: 'natalia@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/natalia.png',
      color: 'sky',
    },
    relationship: 'Vendor-Client',
    contractDetails: {
      fileName: 'mondaycom-contract.pdf',
      fileSize: '1.6 MB',
      period: 'May 2022 - May 2023',
    },
    status: {
      variant: 'completed',
      label: 'Active',
    },
  },
  {
    id: '4',
    companyName: {
      name: 'Zoom',
      description: 'Video Conferencing',
      logo: 'https://alignui.com/images/major-brands/zoom.svg',
    },
    contactPerson: {
      name: 'Juma Omondi',
      email: 'juma@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/juma.png',
      color: 'yellow',
    },
    relationship: 'Partnership Collab.',
    contractDetails: {
      fileName: 'zoom-contract.pdf',
      fileSize: '1.8 MB',
      period: 'Apr 2021 - 2024',
    },
    status: {
      variant: 'completed',
      label: 'Active',
    },
  },
  {
    id: '5',
    companyName: {
      name: 'Linear',
      description: 'Issue Tracking',
      logo: 'https://alignui.com/images/major-brands/linear.svg',
    },
    contactPerson: {
      name: 'Lena Müller',
      email: 'lena@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/lena.png',
      color: 'blue',
    },
    relationship: 'Client-Provider',
    contractDetails: {
      fileName: 'linear-contract.pdf',
      fileSize: '1.2 MB',
      period: 'Jan 2023 - Jan 2025',
    },
    status: {
      variant: 'disabled',
      label: 'Inactive',
    },
  },
  {
    id: '6',
    companyName: {
      name: 'Skype',
      description: 'Video Communication',
      logo: 'https://alignui.com/images/major-brands/skype.svg',
    },
    contactPerson: {
      name: 'Wei Chen',
      email: 'wei@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/wei.png',
      color: 'gray',
    },
    relationship: 'Supplier-Customer',
    contractDetails: {
      fileName: 'skype-contract.pdf',
      fileSize: '1.4 MB',
      period: 'May 2020 - Jan 2023',
    },
    status: {
      variant: 'completed',
      label: 'Active',
    },
  },
  {
    id: '7',
    companyName: {
      name: 'Evernote',
      description: 'Note-taking and Organization',
      logo: 'https://alignui.com/images/major-brands/evernote.svg',
    },
    contactPerson: {
      name: 'Laura Perez',
      email: 'laura@alignui.com',
      avatar: 'https://alignui.com/images/avatar/illustration/laura.png',
      color: 'red',
    },
    relationship: 'Vendor-Client',
    contractDetails: {
      fileName: 'evernote-contract.pdf',
      fileSize: '1.8 MB',
      period: 'Sep 2019 - 2022',
    },
    status: {
      variant: 'disabled',
      label: 'Inactive',
    },
  },
];

const columns: ColumnDef<UserData>[] = [
  {
    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: 'companyName',
    accessorKey: 'companyName.name',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[214px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Company Name
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <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.companyName.logo} alt='' className='size-7' />
        </div>
        <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
          <span className='text-label-sm text-text-strong-950'>
            {row.original.companyName.name}
          </span>
          <span className='text-paragraph-xs text-text-sub-600 truncate'>
            {row.original.companyName.description}
          </span>
        </div>
      </div>
    ),
  },
  {
    id: 'contactPerson',
    accessorKey: 'contactPerson.name',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[186px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Contact Person
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <div className='flex items-center gap-3'>
        <Avatar.Root size='40' color={row.original.contactPerson.color}>
          <Avatar.Image src={row.original.contactPerson.avatar} />
        </Avatar.Root>
        <div className='flex flex-col gap-0.5'>
          <span className='text-label-sm text-text-strong-950'>
            {row.original.contactPerson.name}
          </span>
          <span className='text-paragraph-xs text-text-sub-600'>
            {row.original.contactPerson.email}
          </span>
        </div>
      </div>
    ),
  },
  {
    id: 'relationship',
    accessorKey: 'relationship',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[186px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Relationship
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <div className='flex flex-col gap-0.5'>
        <span className='text-paragraph-sm text-text-strong-950'>
          {row.original.relationship}
        </span>
        <span className='text-paragraph-xs text-text-sub-600'>
          {row.original.contractDetails.period}
        </span>
      </div>
    ),
  },
  {
    id: 'contractDetails',
    accessorKey: 'contractDetails.fileName',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[216px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Contract Details
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <div className='flex w-[186px] items-center gap-3'>
        <FileFormatIcon.Root format='PDF' size='small' color='red' />
        <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
          <span className='text-label-sm text-text-strong-950 truncate'>
            {row.original.contractDetails.fileName}
          </span>
          <span className='text-paragraph-xs text-text-sub-600'>
            {row.original.contractDetails.fileSize}
          </span>
        </div>
      </div>
    ),
  },
  {
    id: 'status',
    accessorKey: 'status.label',
    header: ({ column }) => (
      <Table.SortableHeader
        className='w-[74px]'
        sorted={column.getIsSorted()}
        onSort={() => column.toggleSorting(column.getIsSorted() === 'asc')}
      >
        Status
      </Table.SortableHeader>
    ),
    cell: ({ row }) => (
      <StatusBadge.Root status={row.original.status.variant}>
        <StatusBadge.Icon
          as={row.original.status.variant === 'disabled' ? Ban : CheckCircle2}
        />
        {row.original.status.label}
      </StatusBadge.Root>
    ),
  },
  {
    id: 'actions',
    cell: () => (
      <Button.Root variant='neutral' mode='ghost' size='xsmall'>
        <Button.Icon as={MoreHorizontal} />
      </Button.Root>
    ),
  },
];

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

  // Filtrelenmiş verileri hesapla
  const filteredData = React.useMemo(() => {
    if (filter === 'all') return data;

    return data.filter((item) => {
      if (filter === 'active') return item.status.label === 'Active';
      if (filter === 'inactive') return item.status.label === 'Inactive';
      return true;
    });
  }, [filter]);

  const table = useReactTable({
    data: filteredData,
    columns,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: {
      sorting,
    },
    initialState: {
      sorting: [
        {
          id: 'companyName',
          desc: false,
        },
      ],
    },
  });

  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'>
                Active
              </SegmentedControl.Trigger>
              <SegmentedControl.Trigger value='inactive'>
                Inactive
              </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>
  );
}