'use client';

import { ContestSectionVisibility } from '@/components/contest/util';
import Switch from '@/components/switch/Switch';

interface VisibilitySectionProps {
  formData: {
    contest_visibility_level: ContestSectionVisibility;
    submissions_visibility_level: ContestSectionVisibility;
    can_download_remixes: boolean;
  };
  updateFormData: (
    updates: Partial<VisibilitySectionProps['formData']>
  ) => void;
}

export default function VisibilitySection({
  formData,
  updateFormData,
}: VisibilitySectionProps) {
  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'>
        Visibility & Permissions
      </h3>
      <div className='space-y-4'>
        <div>
          <label
            htmlFor='contest_visibility'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Contest Visibility Level
          </label>
          <select
            id='contest_visibility'
            value={formData.contest_visibility_level}
            onChange={(e) =>
              updateFormData({
                contest_visibility_level: e.target
                  .value as ContestSectionVisibility,
              })
            }
            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'
          >
            <option value='everyone'>Everyone - Public</option>
            <option value='staff'>Staff Only - Preview Mode</option>
            <option value='none'>None - Hidden</option>
          </select>
          <p className='mt-1 text-xs text-foreground-secondary'>
            Controls who can view the contest landing page
          </p>
        </div>

        <div>
          <label
            htmlFor='submissions_visibility'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Submissions Visibility Level
          </label>
          <select
            id='submissions_visibility'
            value={formData.submissions_visibility_level}
            onChange={(e) =>
              updateFormData({
                submissions_visibility_level: e.target
                  .value as ContestSectionVisibility,
              })
            }
            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'
          >
            <option value='everyone'>Everyone - Public</option>
            <option value='staff'>Staff Only - Preview Mode</option>
            <option value='none'>None - Hidden</option>
          </select>
          <p className='mt-1 text-xs text-foreground-secondary'>
            Controls who can view contest submissions
          </p>
        </div>

        <div className='border-t border-border-secondary pt-4'>
          <div className='flex items-start gap-3'>
            <Switch
              checked={formData.can_download_remixes}
              onChange={(checked) =>
                updateFormData({ can_download_remixes: checked })
              }
            />
            <div className='flex-1'>
              <div className='text-sm font-medium text-foreground-primary'>
                Allow Remix Downloads
              </div>
              <div className='text-xs text-foreground-secondary'>
                Enable participants to download submitted remixes
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}