'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Plus, Trash2 } from 'lucide-react'

type WizardJuryGroup = {
  tempId: string
  name: string
  slug: string
  defaultMaxAssignments: number
  defaultCapMode: string
  sortOrder: number
}

type JuryGroupsSectionProps = {
  juryGroups: WizardJuryGroup[]
  onChange: (groups: WizardJuryGroup[]) => void
}

export function JuryGroupsSection({ juryGroups, onChange }: JuryGroupsSectionProps) {
  const handleAddGroup = () => {
    const newGroup: WizardJuryGroup = {
      tempId: crypto.randomUUID(),
      name: '',
      slug: '',
      defaultMaxAssignments: 5,
      defaultCapMode: 'SOFT',
      sortOrder: juryGroups.length,
    }
    onChange([...juryGroups, newGroup])
  }

  const handleRemoveGroup = (tempId: string) => {
    const updated = juryGroups.filter((g) => g.tempId !== tempId)
    const reordered = updated.map((g, index) => ({ ...g, sortOrder: index }))
    onChange(reordered)
  }

  const handleUpdateGroup = (tempId: string, updates: Partial<WizardJuryGroup>) => {
    const updated = juryGroups.map((g) =>
      g.tempId === tempId ? { ...g, ...updates } : g
    )
    onChange(updated)
  }

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Jury Groups</CardTitle>
          <p className="text-sm text-muted-foreground">
            Create jury groups for evaluation rounds (optional)
          </p>
        </CardHeader>
        <CardContent className="space-y-3">
          {juryGroups.length === 0 ? (
            <div className="py-8 text-center text-sm text-muted-foreground">
              No jury groups yet. Add groups to assign evaluators to rounds.
            </div>
          ) : (
            juryGroups.map((group, index) => (
              <div key={group.tempId} className="flex items-start gap-2 border rounded-lg p-3">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-bold shrink-0">
                  {index + 1}
                </div>

                <div className="flex-1 min-w-0 space-y-3">
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-1.5">
                      <Label className="text-xs">Group Name</Label>
                      <Input
                        placeholder="e.g., Technical Jury"
                        value={group.name}
                        onChange={(e) => {
                          const name = e.target.value
                          const slug = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
                          handleUpdateGroup(group.tempId, { name, slug })
                        }}
                      />
                    </div>

                    <div className="space-y-1.5">
                      <Label className="text-xs">Slug</Label>
                      <Input
                        placeholder="e.g., technical-jury"
                        value={group.slug}
                        onChange={(e) => handleUpdateGroup(group.tempId, { slug: e.target.value })}
                      />
                    </div>
                  </div>

                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-1.5">
                      <Label className="text-xs">Max Assignments per Juror</Label>
                      <Input
                        type="number"
                        min={1}
                        value={group.defaultMaxAssignments}
                        onChange={(e) =>
                          handleUpdateGroup(group.tempId, {
                            defaultMaxAssignments: parseInt(e.target.value, 10),
                          })
                        }
                      />
                    </div>

                    <div className="space-y-1.5">
                      <Label className="text-xs">Cap Mode</Label>
                      <Select
                        value={group.defaultCapMode}
                        onValueChange={(value) => handleUpdateGroup(group.tempId, { defaultCapMode: value })}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="HARD">Hard (strict limit)</SelectItem>
                          <SelectItem value="SOFT">Soft (flexible)</SelectItem>
                          <SelectItem value="NONE">None (unlimited)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>

                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 text-destructive hover:text-destructive shrink-0"
                  onClick={() => handleRemoveGroup(group.tempId)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            ))
          )}

          <Button variant="outline" className="w-full" onClick={handleAddGroup}>
            <Plus className="h-4 w-4 mr-2" />
            Add Jury Group
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}