'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
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'

type LiveFinalConfigProps = {
  config: Record<string, unknown>
  onChange: (config: Record<string, unknown>) => void
}

export function LiveFinalConfig({ config, onChange }: LiveFinalConfigProps) {
  const update = (key: string, value: unknown) => {
    onChange({ ...config, [key]: value })
  }

  const audienceEnabled = (config.audienceVotingEnabled as boolean) ?? false
  const deliberationEnabled = (config.deliberationEnabled as boolean) ?? false

  return (
    <div className="space-y-6">
      {/* Jury Voting */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Jury Voting</CardTitle>
          <CardDescription>How the jury panel scores projects during the live event</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="juryVotingEnabled">Enable Jury Voting</Label>
              <p className="text-xs text-muted-foreground">Jury members can vote during live presentations</p>
            </div>
            <Switch
              id="juryVotingEnabled"
              checked={(config.juryVotingEnabled as boolean) ?? true}
              onCheckedChange={(v) => update('juryVotingEnabled', v)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="votingMode">Voting Mode</Label>
            <p className="text-xs text-muted-foreground">How jury members cast their votes</p>
            <Select
              value={(config.votingMode as string) ?? 'simple'}
              onValueChange={(v) => update('votingMode', v)}
            >
              <SelectTrigger id="votingMode" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="simple">Simple (single score per project)</SelectItem>
                <SelectItem value="criteria">Criteria-based (multiple criteria)</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Audience Voting */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Audience Voting</CardTitle>
          <CardDescription>Public or audience participation in scoring</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="audienceVotingEnabled">Enable Audience Voting</Label>
              <p className="text-xs text-muted-foreground">Allow event attendees to vote</p>
            </div>
            <Switch
              id="audienceVotingEnabled"
              checked={audienceEnabled}
              onCheckedChange={(v) => update('audienceVotingEnabled', v)}
            />
          </div>

          {audienceEnabled && (
            <div className="pl-6 border-l-2 border-muted space-y-4">
              <div className="space-y-2">
                <Label htmlFor="audienceVoteWeight">Audience Vote Weight (0-1)</Label>
                <p className="text-xs text-muted-foreground">
                  How much audience votes count relative to jury (0 = no weight, 1 = equal)
                </p>
                <Input
                  id="audienceVoteWeight"
                  type="number"
                  min={0}
                  max={1}
                  step={0.05}
                  className="w-32"
                  value={(config.audienceVoteWeight as number) ?? 0}
                  onChange={(e) => update('audienceVoteWeight', parseFloat(e.target.value) || 0)}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="audienceVotingMode">Audience Voting Mode</Label>
                <p className="text-xs text-muted-foreground">How audience members cast votes</p>
                <Select
                  value={(config.audienceVotingMode as string) ?? 'per_project'}
                  onValueChange={(v) => update('audienceVotingMode', v)}
                >
                  <SelectTrigger id="audienceVotingMode" className="w-64">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="per_project">Per Project (vote on each)</SelectItem>
                    <SelectItem value="per_category">Per Category (one vote per category)</SelectItem>
                    <SelectItem value="favorites">Favorites (pick top N)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {(config.audienceVotingMode as string) === 'favorites' && (
                <div className="pl-6 border-l-2 border-muted space-y-2">
                  <Label htmlFor="audienceMaxFavorites">Max Favorites</Label>
                  <p className="text-xs text-muted-foreground">How many projects each audience member can pick</p>
                  <Input
                    id="audienceMaxFavorites"
                    type="number"
                    min={1}
                    className="w-32"
                    value={(config.audienceMaxFavorites as number) ?? 3}
                    onChange={(e) => update('audienceMaxFavorites', parseInt(e.target.value, 10) || 3)}
                  />
                </div>
              )}

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="audienceRequireIdentification">Require Identification</Label>
                  <p className="text-xs text-muted-foreground">Audience must log in to vote</p>
                </div>
                <Switch
                  id="audienceRequireIdentification"
                  checked={(config.audienceRequireIdentification as boolean) ?? false}
                  onCheckedChange={(v) => update('audienceRequireIdentification', v)}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="audienceRevealTiming">Reveal Audience Results</Label>
                <p className="text-xs text-muted-foreground">When audience vote results become visible</p>
                <Select
                  value={(config.audienceRevealTiming as string) ?? 'at_deliberation'}
                  onValueChange={(v) => update('audienceRevealTiming', v)}
                >
                  <SelectTrigger id="audienceRevealTiming" className="w-64">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="real_time">Real-time (live updates)</SelectItem>
                    <SelectItem value="after_jury_scores">After Jury Scores</SelectItem>
                    <SelectItem value="at_deliberation">At Deliberation</SelectItem>
                    <SelectItem value="never">Never (admin only)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="showAudienceVotesToJury">Show Audience Votes to Jury</Label>
                  <p className="text-xs text-muted-foreground">Jury can see audience results during deliberation</p>
                </div>
                <Switch
                  id="showAudienceVotesToJury"
                  checked={(config.showAudienceVotesToJury as boolean) ?? false}
                  onCheckedChange={(v) => update('showAudienceVotesToJury', v)}
                />
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Presentations */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Presentation Settings</CardTitle>
          <CardDescription>Timing and order for live presentations</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="presentationOrderMode">Presentation Order</Label>
            <Select
              value={(config.presentationOrderMode as string) ?? 'manual'}
              onValueChange={(v) => update('presentationOrderMode', v)}
            >
              <SelectTrigger id="presentationOrderMode" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="manual">Manual (admin sets order)</SelectItem>
                <SelectItem value="random">Random</SelectItem>
                <SelectItem value="score_based">Score-based (highest first)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="presentationDuration">Presentation Duration (min)</Label>
              <Input
                id="presentationDuration"
                type="number"
                min={1}
                className="w-32"
                value={(config.presentationDurationMinutes as number) ?? 15}
                onChange={(e) => update('presentationDurationMinutes', parseInt(e.target.value, 10) || 15)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="qaDuration">Q&A Duration (min)</Label>
              <Input
                id="qaDuration"
                type="number"
                min={0}
                className="w-32"
                value={(config.qaDurationMinutes as number) ?? 5}
                onChange={(e) => update('qaDurationMinutes', parseInt(e.target.value, 10) || 0)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Deliberation */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Post-Presentation Deliberation</CardTitle>
          <CardDescription>Optional deliberation session after all presentations</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="deliberationEnabled">Enable Deliberation</Label>
              <p className="text-xs text-muted-foreground">Add a deliberation phase after presentations</p>
            </div>
            <Switch
              id="deliberationEnabled"
              checked={deliberationEnabled}
              onCheckedChange={(v) => update('deliberationEnabled', v)}
            />
          </div>

          {deliberationEnabled && (
            <div className="pl-6 border-l-2 border-muted space-y-2">
              <Label htmlFor="deliberationDuration">Deliberation Duration (min)</Label>
              <p className="text-xs text-muted-foreground">Time allocated for jury deliberation</p>
              <Input
                id="deliberationDuration"
                type="number"
                min={1}
                className="w-32"
                value={(config.deliberationDurationMinutes as number) ?? 30}
                onChange={(e) => update('deliberationDurationMinutes', parseInt(e.target.value, 10) || 30)}
              />
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="revealPolicy">Results Reveal Policy</Label>
            <p className="text-xs text-muted-foreground">When final results are announced</p>
            <Select
              value={(config.revealPolicy as string) ?? 'ceremony'}
              onValueChange={(v) => update('revealPolicy', v)}
            >
              <SelectTrigger id="revealPolicy" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="immediate">Immediate (show as votes come in)</SelectItem>
                <SelectItem value="delayed">Delayed (admin triggers reveal)</SelectItem>
                <SelectItem value="ceremony">Ceremony (formal award announcement)</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
