'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 { Plus, Trash2, FileText } from 'lucide-react'
import type { IntakeConfig, FileRequirementConfig } from '@/types/pipeline-wizard'

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 updateFileReq = (index: number, updates: Partial<FileRequirementConfig>) => {
    const updated = [...config.fileRequirements]
    updated[index] = { ...updated[index], ...updates }
    onChange({ ...config, fileRequirements: updated })
  }

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

  const removeFileReq = (index: number) => {
    const updated = config.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>
            <Label>Submission Window</Label>
            <p className="text-xs text-muted-foreground">
              Enable timed submission windows for project intake
            </p>
          </div>
          <Switch
            checked={config.submissionWindowEnabled}
            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">
          <Label>Late Submission Policy</Label>
          <Select
            value={config.lateSubmissionPolicy}
            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' && (
          <div className="space-y-2">
            <Label>Grace Period (hours)</Label>
            <Input
              type="number"
              min={0}
              max={168}
              value={config.lateGraceHours}
              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">
          <Label>File Requirements</Label>
          <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>

        {config.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>
        )}

        {config.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>
                <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>
  )
}