'use client'

import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Card, CardContent } from '@/components/ui/card'
import { Bell } from 'lucide-react'

type NotificationsSectionProps = {
  config: Record<string, boolean>
  onChange: (config: Record<string, boolean>) => void
  overridePolicy: Record<string, unknown>
  onOverridePolicyChange: (policy: Record<string, unknown>) => void
  isActive?: boolean
}

const NOTIFICATION_EVENTS = [
  {
    key: 'stage.transitioned',
    label: 'Stage Transitioned',
    description: 'When a stage changes status (draft → active → closed)',
  },
  {
    key: 'filtering.completed',
    label: 'Filtering Completed',
    description: 'When batch filtering finishes processing',
  },
  {
    key: 'assignment.generated',
    label: 'Assignments Generated',
    description: 'When jury assignments are created or updated',
  },
  {
    key: 'routing.executed',
    label: 'Routing Executed',
    description: 'When projects are routed into tracks/stages',
  },
  {
    key: 'live.cursor.updated',
    label: 'Live Cursor Updated',
    description: 'When the live presentation moves to next project',
  },
  {
    key: 'cohort.window.changed',
    label: 'Cohort Window Changed',
    description: 'When a cohort voting window opens or closes',
  },
  {
    key: 'decision.overridden',
    label: 'Decision Overridden',
    description: 'When an admin overrides an automated decision',
  },
  {
    key: 'award.winner.finalized',
    label: 'Award Winner Finalized',
    description: 'When a special award winner is selected',
  },
]

export function NotificationsSection({
  config,
  onChange,
  overridePolicy,
  onOverridePolicyChange,
  isActive,
}: NotificationsSectionProps) {
  const toggleEvent = (key: string, enabled: boolean) => {
    onChange({ ...config, [key]: enabled })
  }

  return (
    <div className="space-y-6">
      <div>
        <p className="text-sm text-muted-foreground">
          Choose which pipeline events trigger notifications. All events are enabled by default.
        </p>
      </div>

      <div className="space-y-2">
        {NOTIFICATION_EVENTS.map((event) => (
          <Card key={event.key}>
            <CardContent className="py-3 px-4">
              <div className="flex items-center justify-between gap-4">
                <div className="flex items-start gap-3 min-w-0">
                  <Bell className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
                  <div className="min-w-0">
                    <Label className="text-sm font-medium">{event.label}</Label>
                    <p className="text-xs text-muted-foreground">{event.description}</p>
                  </div>
                </div>
                <Switch
                  checked={config[event.key] !== false}
                  onCheckedChange={(checked) => toggleEvent(event.key, checked)}
                  disabled={isActive}
                />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Override Governance */}
      <div className="space-y-3 pt-2 border-t">
        <Label>Override Governance</Label>
        <p className="text-xs text-muted-foreground">
          Who can override automated decisions in this pipeline?
        </p>
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <Switch
              checked={
                Array.isArray(overridePolicy.allowedRoles) &&
                overridePolicy.allowedRoles.includes('SUPER_ADMIN')
              }
              disabled
            />
            <Label className="text-sm">Super Admins (always enabled)</Label>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={
                Array.isArray(overridePolicy.allowedRoles) &&
                overridePolicy.allowedRoles.includes('PROGRAM_ADMIN')
              }
              onCheckedChange={(checked) => {
                const roles = Array.isArray(overridePolicy.allowedRoles)
                  ? [...overridePolicy.allowedRoles]
                  : ['SUPER_ADMIN']
                if (checked && !roles.includes('PROGRAM_ADMIN')) {
                  roles.push('PROGRAM_ADMIN')
                } else if (!checked) {
                  const idx = roles.indexOf('PROGRAM_ADMIN')
                  if (idx >= 0) roles.splice(idx, 1)
                }
                onOverridePolicyChange({ ...overridePolicy, allowedRoles: roles })
              }}
            />
            <Label className="text-sm">Program Admins</Label>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={
                Array.isArray(overridePolicy.allowedRoles) &&
                overridePolicy.allowedRoles.includes('AWARD_MASTER')
              }
              onCheckedChange={(checked) => {
                const roles = Array.isArray(overridePolicy.allowedRoles)
                  ? [...overridePolicy.allowedRoles]
                  : ['SUPER_ADMIN']
                if (checked && !roles.includes('AWARD_MASTER')) {
                  roles.push('AWARD_MASTER')
                } else if (!checked) {
                  const idx = roles.indexOf('AWARD_MASTER')
                  if (idx >= 0) roles.splice(idx, 1)
                }
                onOverridePolicyChange({ ...overridePolicy, allowedRoles: roles })
              }}
            />
            <Label className="text-sm">Award Masters</Label>
          </div>
        </div>
      </div>
    </div>
  )
}