'use client'

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import type { EvaluationConfig } from '@/types/pipeline-wizard'

type AssignmentSectionProps = {
  config: EvaluationConfig
  onChange: (config: EvaluationConfig) => void
  isActive?: boolean
}

export function AssignmentSection({ config, onChange, isActive }: AssignmentSectionProps) {
  const updateConfig = (updates: Partial<EvaluationConfig>) => {
    onChange({ ...config, ...updates })
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-3">
        <div className="space-y-2">
          <Label>Required Reviews per Project</Label>
          <Input
            type="number"
            min={1}
            max={20}
            value={config.requiredReviews}
            disabled={isActive}
            onChange={(e) =>
              updateConfig({ requiredReviews: parseInt(e.target.value) || 3 })
            }
          />
          <p className="text-xs text-muted-foreground">
            Minimum number of jury evaluations per project
          </p>
        </div>

        <div className="space-y-2">
          <Label>Max Load per Juror</Label>
          <Input
            type="number"
            min={1}
            max={100}
            value={config.maxLoadPerJuror}
            disabled={isActive}
            onChange={(e) =>
              updateConfig({ maxLoadPerJuror: parseInt(e.target.value) || 20 })
            }
          />
          <p className="text-xs text-muted-foreground">
            Maximum projects assigned to one juror
          </p>
        </div>

        <div className="space-y-2">
          <Label>Min Load per Juror</Label>
          <Input
            type="number"
            min={0}
            max={50}
            value={config.minLoadPerJuror}
            disabled={isActive}
            onChange={(e) =>
              updateConfig({ minLoadPerJuror: parseInt(e.target.value) || 5 })
            }
          />
          <p className="text-xs text-muted-foreground">
            Target minimum projects per juror
          </p>
        </div>
      </div>

      {config.minLoadPerJuror > config.maxLoadPerJuror && (
        <p className="text-sm text-destructive">
          Min load per juror cannot exceed max load per juror.
        </p>
      )}

      <div className="flex items-center justify-between">
        <div>
          <Label>Availability Weighting</Label>
          <p className="text-xs text-muted-foreground">
            Factor in juror availability when assigning projects
          </p>
        </div>
        <Switch
          checked={config.availabilityWeighting}
          onCheckedChange={(checked) =>
            updateConfig({ availabilityWeighting: checked })
          }
          disabled={isActive}
        />
      </div>

      <div className="space-y-2">
        <Label>Overflow Policy</Label>
        <Select
          value={config.overflowPolicy}
          onValueChange={(value) =>
            updateConfig({
              overflowPolicy: value as EvaluationConfig['overflowPolicy'],
            })
          }
          disabled={isActive}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="queue">
              Queue — Hold unassigned projects for manual assignment
            </SelectItem>
            <SelectItem value="expand_pool">
              Expand Pool — Invite additional jurors automatically
            </SelectItem>
            <SelectItem value="reduce_reviews">
              Reduce Reviews — Lower required reviews to fit available jurors
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}