'use client'

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

type LiveFinalsSectionProps = {
  config: LiveFinalConfig
  onChange: (config: LiveFinalConfig) => void
  isActive?: boolean
}

export function LiveFinalsSection({ config, onChange, isActive }: LiveFinalsSectionProps) {
  const updateConfig = (updates: Partial<LiveFinalConfig>) => {
    onChange({ ...config, ...updates })
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Label>Jury Voting</Label>
          <p className="text-xs text-muted-foreground">
            Allow jury members to vote during the live finals event
          </p>
        </div>
        <Switch
          checked={config.juryVotingEnabled}
          onCheckedChange={(checked) =>
            updateConfig({ juryVotingEnabled: checked })
          }
          disabled={isActive}
        />
      </div>

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <Label>Audience Voting</Label>
            <p className="text-xs text-muted-foreground">
              Allow audience members to vote on projects
            </p>
          </div>
          <Switch
            checked={config.audienceVotingEnabled}
            onCheckedChange={(checked) =>
              updateConfig({ audienceVotingEnabled: checked })
            }
            disabled={isActive}
          />
        </div>

        {config.audienceVotingEnabled && (
          <div className="pl-4 border-l-2 border-muted space-y-3">
            <div className="space-y-2">
              <Label className="text-xs">Audience Vote Weight</Label>
              <div className="flex items-center gap-3">
                <Slider
                  value={[config.audienceVoteWeight * 100]}
                  onValueChange={([v]) =>
                    updateConfig({ audienceVoteWeight: v / 100 })
                  }
                  min={0}
                  max={100}
                  step={5}
                  className="flex-1"
                />
                <span className="text-xs font-mono w-10 text-right">
                  {Math.round(config.audienceVoteWeight * 100)}%
                </span>
              </div>
              <p className="text-xs text-muted-foreground">
                Percentage weight of audience votes in the final score
              </p>
            </div>
          </div>
        )}
      </div>

      <div className="space-y-2">
        <Label>Cohort Setup Mode</Label>
        <Select
          value={config.cohortSetupMode}
          onValueChange={(value) =>
            updateConfig({
              cohortSetupMode: value as LiveFinalConfig['cohortSetupMode'],
            })
          }
          disabled={isActive}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="manual">
              Manual — Admin creates cohorts and assigns projects
            </SelectItem>
            <SelectItem value="auto">
              Auto — System creates cohorts from pipeline results
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label>Result Reveal Policy</Label>
        <Select
          value={config.revealPolicy}
          onValueChange={(value) =>
            updateConfig({
              revealPolicy: value as LiveFinalConfig['revealPolicy'],
            })
          }
          disabled={isActive}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="immediate">
              Immediate — Results shown after each vote
            </SelectItem>
            <SelectItem value="delayed">
              Delayed — Results hidden until admin reveals
            </SelectItem>
            <SelectItem value="ceremony">
              Ceremony — Results revealed in dramatic sequence
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}