MOPC-Portal/src/components/admin/pipeline/sections/intake-section.tsx

'use client'

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'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Plus, Trash2, FileText } from 'lucide-react'
import { InfoTooltip } from '@/components/ui/info-tooltip'
import type { IntakeConfig, FileRequirementConfig } from '@/types/pipeline-wizard'
import {
  FILE_TYPE_CATEGORIES,
  getActiveCategoriesFromMimeTypes,
  categoriesToMimeTypes,
} from '@/lib/file-type-categories'

type FileTypePickerProps = {
  value: string[]
  onChange: (mimeTypes: string[]) => void
}

function FileTypePicker({ value, onChange }: FileTypePickerProps) {
  const activeCategories = getActiveCategoriesFromMimeTypes(value)

  const toggleCategory = (categoryId: string) => {
    const isActive = activeCategories.includes(categoryId)
    const newCategories = isActive
      ? activeCategories.filter((id) => id !== categoryId)
      : [...activeCategories, categoryId]
    onChange(categoriesToMimeTypes(newCategories))
  }

  return (
    <div className="space-y-2">
      <Label className="text-xs">Accepted Types</Label>
      <div className="flex flex-wrap gap-1.5">
        {FILE_TYPE_CATEGORIES.map((cat) => {
          const isActive = activeCategories.includes(cat.id)
          return (
            <Button
              key={cat.id}
              type="button"
              variant={isActive ? 'default' : 'outline'}
              size="sm"
              className="h-7 text-xs px-2.5"
              onClick={() => toggleCategory(cat.id)}
            >
              {cat.label}
            </Button>
          )
        })}
      </div>
      <div className="flex flex-wrap gap-1">
        {activeCategories.length === 0 ? (
          <Badge variant="secondary" className="text-[10px]">All types</Badge>
        ) : (
          activeCategories.map((catId) => {
            const cat = FILE_TYPE_CATEGORIES.find((c) => c.id === catId)
            return cat ? (
              <Badge key={catId} variant="secondary" className="text-[10px]">
                {cat.label}
              </Badge>
            ) : null
          })
        )}
      </div>
    </div>
  )
}

type IntakeSectionProps = {
  config: IntakeConfig
  onChange: (config: IntakeConfig) => void
  isActive?: boolean
}

export function IntakeSection({ config, onChange, isActive }: IntakeSectionProps) {
  const updateConfig = (updates: Partial<IntakeConfig>) => {
    onChange({ ...config, ...updates })
  }

  const fileRequirements = config.fileRequirements ?? []

  const updateFileReq = (index: number, updates: Partial<FileRequirementConfig>) => {
    const updated = [...fileRequirements]
    updated[index] = { ...updated[index], ...updates }
    onChange({ ...config, fileRequirements: updated })
  }

  const addFileReq = () => {
    onChange({
      ...config,
      fileRequirements: [
        ...fileRequirements,
        {
          name: '',
          description: '',
          acceptedMimeTypes: ['application/pdf'],
          maxSizeMB: 50,
          isRequired: false,
        },
      ],
    })
  }

  const removeFileReq = (index: number) => {
    const updated = fileRequirements.filter((_, i) => i !== index)
    onChange({ ...config, fileRequirements: updated })
  }

  return (
    <div className="space-y-6">
      {isActive && (
        <p className="text-sm text-amber-600 bg-amber-50 rounded-md px-3 py-2">
          Some settings are locked because this pipeline is active.
        </p>
      )}

      {/* Submission Window */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <div className="flex items-center gap-1.5">
              <Label>Submission Window</Label>
              <InfoTooltip content="When enabled, projects can only be submitted within the configured date range." />
            </div>
            <p className="text-xs text-muted-foreground">
              Enable timed submission windows for project intake
            </p>
          </div>
          <Switch
            checked={config.submissionWindowEnabled ?? true}
            onCheckedChange={(checked) =>
              updateConfig({ submissionWindowEnabled: checked })
            }
            disabled={isActive}
          />
        </div>
      </div>

      {/* Late Policy */}
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <Label>Late Submission Policy</Label>
            <InfoTooltip content="Controls how submissions after the deadline are handled. 'Reject' blocks them, 'Flag' accepts but marks as late, 'Accept' treats them normally." />
          </div>
          <Select
            value={config.lateSubmissionPolicy ?? 'flag'}
            onValueChange={(value) =>
              updateConfig({
                lateSubmissionPolicy: value as IntakeConfig['lateSubmissionPolicy'],
              })
            }
            disabled={isActive}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="reject">Reject late submissions</SelectItem>
              <SelectItem value="flag">Accept but flag as late</SelectItem>
              <SelectItem value="accept">Accept normally</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {(config.lateSubmissionPolicy ?? 'flag') === 'flag' && (
          <div className="space-y-2">
            <div className="flex items-center gap-1.5">
              <Label>Grace Period (hours)</Label>
              <InfoTooltip content="Extra time after the deadline during which late submissions are still accepted but flagged." />
            </div>
            <Input
              type="number"
              min={0}
              max={168}
              value={config.lateGraceHours ?? 24}
              onChange={(e) =>
                updateConfig({ lateGraceHours: parseInt(e.target.value) || 0 })
              }
            />
          </div>
        )}
      </div>

      {/* File Requirements */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <Label>File Requirements</Label>
            <InfoTooltip content="Define what files applicants must upload. Each requirement can specify accepted formats and size limits." />
          </div>
          <Button type="button" variant="outline" size="sm" onClick={addFileReq} disabled={isActive}>
            <Plus className="h-3.5 w-3.5 mr-1" />
            Add Requirement
          </Button>
        </div>

        {fileRequirements.length === 0 && (
          <p className="text-sm text-muted-foreground py-4 text-center">
            No file requirements configured. Projects can be submitted without files.
          </p>
        )}

        {fileRequirements.map((req, index) => (
          <Card key={index}>
            <CardContent className="pt-4 space-y-3">
              <div className="flex items-start gap-3">
                <FileText className="h-4 w-4 text-muted-foreground mt-2 shrink-0" />
                <div className="flex-1 grid gap-3 sm:grid-cols-2">
                  <div className="space-y-1">
                    <Label className="text-xs">File Name</Label>
                    <Input
                      placeholder="e.g., Executive Summary"
                      value={req.name}
                      onChange={(e) => updateFileReq(index, { name: e.target.value })}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-xs">Max Size (MB)</Label>
                    <Input
                      type="number"
                      min={1}
                      max={500}
                      value={req.maxSizeMB ?? ''}
                      onChange={(e) =>
                        updateFileReq(index, {
                          maxSizeMB: parseInt(e.target.value) || undefined,
                        })
                      }
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-xs">Description</Label>
                    <Input
                      placeholder="Brief description of this requirement"
                      value={req.description ?? ''}
                      onChange={(e) =>
                        updateFileReq(index, { description: e.target.value })
                      }
                    />
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-2">
                      <Switch
                        checked={req.isRequired}
                        onCheckedChange={(checked) =>
                          updateFileReq(index, { isRequired: checked })
                        }
                      />
                      <Label className="text-xs">Required</Label>
                    </div>
                  </div>
                  <div className="sm:col-span-2">
                    <FileTypePicker
                      value={req.acceptedMimeTypes}
                      onChange={(mimeTypes) =>
                        updateFileReq(index, { acceptedMimeTypes: mimeTypes })
                      }
                    />
                  </div>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="shrink-0 text-muted-foreground hover:text-destructive"
                  onClick={() => removeFileReq(index)}
                  disabled={isActive}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}