'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'

type WizardState = {
  programId: string
  name: string
  slug: string
  categoryMode: string
  startupFinalistCount: number
  conceptFinalistCount: number
  notifyOnRoundAdvance: boolean
  notifyOnDeadlineApproach: boolean
  deadlineReminderDays: number[]
}

type BasicsSectionProps = {
  state: WizardState
  onChange: (updates: Partial<WizardState>) => void
}

export function BasicsSection({ state, onChange }: BasicsSectionProps) {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Competition Details</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Competition Name *</Label>
            <Input
              id="name"
              placeholder="e.g., 2026 Ocean Innovation Challenge"
              value={state.name}
              onChange={(e) => onChange({ name: e.target.value })}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="slug">Slug *</Label>
            <Input
              id="slug"
              placeholder="e.g., 2026-ocean-innovation"
              value={state.slug}
              onChange={(e) => onChange({ slug: e.target.value })}
            />
            <p className="text-xs text-muted-foreground">
              URL-safe identifier (lowercase, hyphens only)
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="categoryMode">Category Mode</Label>
            <Select value={state.categoryMode} onValueChange={(value) => onChange({ categoryMode: value })}>
              <SelectTrigger id="categoryMode">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="SHARED">Shared (all categories together)</SelectItem>
                <SelectItem value="SEPARATE">Separate (categories evaluated independently)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="startupFinalists">Startup Finalists</Label>
              <Input
                id="startupFinalists"
                type="number"
                min={1}
                value={state.startupFinalistCount}
                onChange={(e) => onChange({ startupFinalistCount: parseInt(e.target.value, 10) })}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="conceptFinalists">Concept Finalists</Label>
              <Input
                id="conceptFinalists"
                type="number"
                min={1}
                value={state.conceptFinalistCount}
                onChange={(e) => onChange({ conceptFinalistCount: parseInt(e.target.value, 10) })}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Notifications</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="notifyRoundAdvance">Round Advancement Notifications</Label>
              <p className="text-xs text-muted-foreground">
                Notify participants when they advance to the next round
              </p>
            </div>
            <Switch
              id="notifyRoundAdvance"
              checked={state.notifyOnRoundAdvance}
              onCheckedChange={(checked) => onChange({ notifyOnRoundAdvance: checked })}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="notifyDeadline">Deadline Reminders</Label>
              <p className="text-xs text-muted-foreground">
                Send reminders as deadlines approach
              </p>
            </div>
            <Switch
              id="notifyDeadline"
              checked={state.notifyOnDeadlineApproach}
              onCheckedChange={(checked) => onChange({ notifyOnDeadlineApproach: checked })}
            />
          </div>

          {state.notifyOnDeadlineApproach && (
            <div className="space-y-2">
              <Label>Reminder Days</Label>
              <div className="flex flex-wrap gap-2">
                {state.deadlineReminderDays.map((days, index) => (
                  <div key={index} className="flex items-center gap-1">
                    <Input
                      type="number"
                      min={1}
                      className="w-16"
                      value={days}
                      onChange={(e) => {
                        const newDays = [...state.deadlineReminderDays]
                        newDays[index] = parseInt(e.target.value, 10)
                        onChange({ deadlineReminderDays: newDays })
                      }}
                    />
                    <span className="text-xs text-muted-foreground">days</span>
                  </div>
                ))}
              </div>
              <p className="text-xs text-muted-foreground">
                Days before deadline to send reminders
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
