'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { ChevronLeft, ChevronRight, Clock, X } from 'lucide-react';
import { format } from 'date-fns';
import type { DateRange } from 'react-day-picker';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as CompactButton from '@/components/ui/compact-button';
import * as DatepickerPrimivites from '@/components/ui/datepicker';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import { cn } from '@/utils/cn';

function EventCalendar() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2024, 0, 15), // January 15, 2024
    to: new Date(2024, 0, 21), // January 21, 2024
  });
  const [participants, setParticipants] = React.useState<number>(10);
  const [openToAll, setOpenToAll] = React.useState<boolean>(true);

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-sm h-fit w-[min(736px,calc(100vw-32px))] min-w-[280px] p-0'>
      {/* Header */}
      <div className='flex items-start justify-between px-5 py-4'>
        <div className='flex items-center gap-[14px]'>
          <div className='bg-bg-white-0 ring-stroke-soft-200 flex size-11 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
            <Clock className='text-text-sub-600 size-6' />
          </div>
          <div className='flex flex-col gap-1'>
            <h2 className='text-label-md text-text-strong-950'>
              Event Calendar
            </h2>
            <p className='text-paragraph-sm text-text-sub-600'>
              Schedule your team meetings and events easily
            </p>
          </div>
        </div>
        <CompactButton.Root variant='ghost' size='large'>
          <CompactButton.Icon>
            <X className='size-5' />
          </CompactButton.Icon>
        </CompactButton.Root>
      </div>

      <div className='border-stroke-soft-200 flex w-full flex-col border-t sm:flex-row'>
        {/* Calendar */}
        <div className='flex-1'>
          <DatepickerPrimivites.Calendar
            mode='range'
            selected={range}
            onSelect={setRange}
            defaultMonth={new Date(2024, 0)}
            numberOfMonths={1}
            weekStartsOn={1}
            showOutsideDays={false}
            classNames={{
              caption:
                'flex justify-center items-center relative h-9 px-3 py-2 rounded-full text-center w-full bg-bg-weak-50 mb-2',
              tbody: 'w-full',
              head: 'w-full',
              nav_button_previous:
                'top-1/2 -translate-y-1/2 left-1.5 !rounded-full',
              nav_button_next:
                'top-1/2 -translate-y-1/2 right-1.5 !rounded-full',
              day: cn(
                // base
                'text-label-sm text-text-sub-600 flex aspect-square h-full w-full items-center justify-center rounded-full text-center outline-none',
                'transition duration-200 ease-out',
                // hover
                'hover:bg-bg-weak-50 hover:text-text-strong-950',
                // selected
                'aria-[selected]:bg-primary-base aria-[selected]:text-static-white',
                // focus visible
                'focus-visible:bg-bg-weak-50 focus-visible:text-text-strong-950 focus:outline-none',
              ),
              table:
                'w-full border-collapse flex justify-center items-center flex-col !mt-0',
              row: 'grid grid-flow-col auto-cols-fr w-full mt-2 gap-2',
              head_cell:
                'text-text-soft-400 text-label-sm uppercase size-10 flex items-center justify-center text-center select-none w-full',
              cell: cn(
                // base
                'group/cell relative h-10 w-full p-0 select-none',
                // range
                '[&:has(.day-range-middle)]:bg-primary-alpha/10',
                // first range el
                '[&:has(.day-range-start):not(:has(.day-range-end))]:bg-primary-alpha/10 [&:has(.day-range-start):not(:has(.day-range-end))]:rounded-l-full [&:has(.day-range-start):not(:has(.day-range-end))]:before:block',
                // last range el
                '[&:has(.day-range-end):not(:has(.day-range-start))]:bg-primary-alpha/10 [&:has(.day-range-end):not(:has(.day-range-start))]:rounded-r-full',
                // hide before if next sibling not selected
                '[&:not(:has(+_*_[type=button]))]:before:hidden',
                // merged bg
                'before:bg-primary-alpha/10 before:absolute before:inset-y-0 before:-right-2 before:hidden before:w-2',
                'last:[&:has(.day-range-middle)]:before:hidden',
                // middle
                '[&:has(.day-range-middle)]:before:block',
                // end specific
                '[&:has(.day-range-end)]:before:right-auto [&:has(.day-range-end)]:before:left-0',
              ),
            }}
            components={{
              IconLeft: () => <ChevronLeft className='size-5 !rounded-full' />,
              IconRight: () => (
                <ChevronRight className='size-5 !rounded-full' />
              ),
            }}
          />
        </div>

        {/* Form Fields */}
        <div className='border-stroke-soft-200 max-w-[368px] flex-1 border-t sm:border-t-0 sm:border-l'>
          {/* Date Inputs */}
          <div className='flex flex-col gap-3 p-5'>
            <div className='flex flex-col gap-1.5'>
              <Label.Root htmlFor='start-date'>
                Start date <Label.Asterisk />
              </Label.Root>
              <div>
                <Input.Root className='w-full'>
                  <Input.Wrapper>
                    <Input.Input
                      id='start-date'
                      type='text'
                      value={
                        range?.from ? format(range.from, 'yyyy-MM-dd') : ''
                      }
                      readOnly
                      className='text-label-sm text-text-sub-600'
                    />
                    <Input.Input
                      type='time'
                      defaultValue='09:00'
                      className='border-stroke-soft-200 text-label-sm text-text-sub-600 border-l pl-4 [&::-webkit-calendar-picker-indicator]:hidden'
                    />
                  </Input.Wrapper>
                </Input.Root>
              </div>
            </div>
            <div className='flex flex-col gap-1.5'>
              <Label.Root htmlFor='end-date'>
                End date <Label.Asterisk />
              </Label.Root>
              <div className='flex'>
                <Input.Root className='w-full'>
                  <Input.Wrapper>
                    <Input.Input
                      id='end-date'
                      type='text'
                      value={range?.to ? format(range.to, 'yyyy-MM-dd') : ''}
                      readOnly
                      className='text-label-sm text-text-sub-600'
                    />
                    <Input.Input
                      type='time'
                      defaultValue='09:00'
                      className='border-stroke-soft-200 text-label-sm text-text-sub-600 border-l pl-4 [&::-webkit-calendar-picker-indicator]:hidden'
                    />
                  </Input.Wrapper>
                </Input.Root>
              </div>
            </div>
          </div>

          {/* Maximum participants */}
          <div className='border-stroke-soft-200 flex flex-col gap-4 border-t p-5'>
            <div className='flex flex-col gap-1.5'>
              <Label.Root htmlFor='participants-inp'>
                Maximum participants
                <IconInfoCustom className='text-text-disabled-300 size-5' />
              </Label.Root>
              <Input.Root>
                <Input.Wrapper>
                  <Input.Input
                    id='participants-inp'
                    type='number'
                    value={participants}
                    onChange={(e) => setParticipants(Number(e.target.value))}
                    required
                  />
                </Input.Wrapper>
              </Input.Root>
            </div>

            {/* Checkbox */}
            <div className='flex items-center gap-2'>
              <Checkbox.Root
                id='open-to-all'
                checked={openToAll}
                onCheckedChange={(checked) => setOpenToAll(checked as boolean)}
              />
              <Label.Root className='text-paragraph-sm' htmlFor='open-to-all'>
                Open to all departments
              </Label.Root>
            </div>
          </div>
        </div>
      </div>

      {/* Range Display and Actions */}
      <div className='border-stroke-soft-200 flex flex-col items-center justify-between gap-4 border-t p-4 pl-6 sm:flex-row'>
        <div>
          <span className='text-label-sm text-text-soft-400'>Range:</span>{' '}
          <span className='text-paragraph-sm text-text-sub-600'>
            {range?.from && format(range.from, 'MMMM dd, yyyy')} -{' '}
            {range?.to && format(range.to, 'MMMM dd, yyyy')}
          </span>
        </div>
        <div className='flex gap-4'>
          <Button.Root variant='neutral' mode='stroke' size='small'>
            Cancel
          </Button.Root>
          <Button.Root variant='primary' mode='filled' size='small'>
            Schedule meetings
          </Button.Root>
        </div>
      </div>
    </div>
  );
}

export default EventCalendar;