'use client';

import { dateToHtmlInput, htmlInputToDate } from '@/components/contest/util';

export interface TimingSectionFormData {
  start_time: Date | null;
  end_time: Date | null;
  judging_start: Date | null;
  judging_end: Date | null;
  winners_announced_date: Date | null;
}

interface TimingSectionProps<
  T extends TimingSectionFormData = TimingSectionFormData,
> {
  formData: T;
  updateFormData: (updates: Partial<T>) => void;
}

export default function TimingSection({
  formData,
  updateFormData,
}: TimingSectionProps) {
  return (
    <div className='rounded-lg border border-border-primary bg-background-secondary p-6'>
      <h3 className='mb-4 text-lg font-semibold text-foreground-primary'>
        Contest Timeline
      </h3>
      <div className='space-y-4'>
        <div className='grid grid-cols-2 gap-4'>
          <div>
            <label
              htmlFor='start_time'
              className='mb-2 block text-sm font-medium text-foreground-primary'
            >
              Start Time
            </label>
            <input
              id='start_time'
              type='datetime-local'
              value={dateToHtmlInput(formData.start_time)}
              onChange={(e) =>
                updateFormData({ start_time: htmlInputToDate(e.target.value) })
              }
              className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
            />
          </div>

          <div>
            <label
              htmlFor='end_time'
              className='mb-2 block text-sm font-medium text-foreground-primary'
            >
              End Time
            </label>
            <input
              id='end_time'
              type='datetime-local'
              value={dateToHtmlInput(formData.end_time)}
              onChange={(e) =>
                updateFormData({ end_time: htmlInputToDate(e.target.value) })
              }
              className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
            />
          </div>
        </div>

        <div className='border-t border-border-secondary pt-4'>
          <h4 className='mb-3 text-sm font-medium text-foreground-primary'>
            Judging Period (Optional)
          </h4>
          <div className='grid grid-cols-2 gap-4'>
            <div>
              <label
                htmlFor='judging_start'
                className='mb-2 block text-sm font-medium text-foreground-secondary'
              >
                Judging Start
              </label>
              <input
                id='judging_start'
                type='datetime-local'
                value={dateToHtmlInput(formData.judging_start)}
                onChange={(e) =>
                  updateFormData({
                    judging_start: htmlInputToDate(e.target.value),
                  })
                }
                className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
              />
            </div>

            <div>
              <label
                htmlFor='judging_end'
                className='mb-2 block text-sm font-medium text-foreground-secondary'
              >
                Judging End
              </label>
              <input
                id='judging_end'
                type='datetime-local'
                value={dateToHtmlInput(formData.judging_end)}
                onChange={(e) =>
                  updateFormData({
                    judging_end: htmlInputToDate(e.target.value),
                  })
                }
                className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
              />
            </div>
          </div>
        </div>

        <div className='border-t border-border-secondary pt-4'>
          <label
            htmlFor='winners_announced'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Winners Announcement Date (Optional)
          </label>
          <input
            id='winners_announced'
            type='datetime-local'
            value={dateToHtmlInput(formData.winners_announced_date)}
            onChange={(e) =>
              updateFormData({
                winners_announced_date: htmlInputToDate(e.target.value),
              })
            }
            className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
          />
        </div>
      </div>
    </div>
  );
}