'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
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'

type MentoringConfigProps = {
  config: Record<string, unknown>
  onChange: (config: Record<string, unknown>) => void
}

export function MentoringConfig({ config, onChange }: MentoringConfigProps) {
  const update = (key: string, value: unknown) => {
    onChange({ ...config, [key]: value })
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Mentoring Eligibility</CardTitle>
          <CardDescription>Who receives mentoring and how mentors are assigned</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="eligibility">Eligibility</Label>
            <p className="text-xs text-muted-foreground">Which projects receive mentoring</p>
            <Select
              value={(config.eligibility as string) ?? 'requested_only'}
              onValueChange={(v) => update('eligibility', v)}
            >
              <SelectTrigger id="eligibility" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all_advancing">All Advancing Projects</SelectItem>
                <SelectItem value="requested_only">Requested Only</SelectItem>
                <SelectItem value="admin_selected">Admin Selected</SelectItem>
              </SelectContent>
            </Select>
            <ul className="text-xs text-muted-foreground space-y-1 mt-2">
              <li><strong>All Advancing Projects</strong> — every project that enters this round is paired with a mentor.</li>
              <li><strong>Requested Only</strong> — only projects that explicitly request mentoring participate (default).</li>
              <li><strong>Admin Selected</strong> — admin manually picks which projects get a mentor.</li>
            </ul>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="autoAssignMentors">Auto-Assign Mentors</Label>
              <p className="text-xs text-muted-foreground">Automatically match mentors to projects based on expertise</p>
            </div>
            <Switch
              id="autoAssignMentors"
              checked={(config.autoAssignMentors as boolean) ?? false}
              onCheckedChange={(v) => update('autoAssignMentors', v)}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Mentoring Request Window</CardTitle>
          <CardDescription>How long teams have to request a mentor, and what happens to non-requesters</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="mentoringRequestDeadlineDays">Request deadline (days from round opening)</Label>
            <p className="text-xs text-muted-foreground">After this many days, teams can no longer submit a mentoring request. Default: 14.</p>
            <Input
              id="mentoringRequestDeadlineDays"
              type="number"
              min={1}
              max={90}
              className="w-32"
              value={(config.mentoringRequestDeadlineDays as number) ?? 14}
              onChange={(e) => {
                const v = parseInt(e.target.value, 10)
                if (!Number.isNaN(v) && v >= 1 && v <= 90) update('mentoringRequestDeadlineDays', v)
              }}
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="passThroughIfNoRequest">Auto-pass non-requesters</Label>
              <p className="text-xs text-muted-foreground">
                When ON, projects that don&apos;t request mentoring auto-PASS to the next round (default).
                When OFF, all projects are held in PENDING until the admin decides — useful when mentoring is mandatory.
              </p>
            </div>
            <Switch
              id="passThroughIfNoRequest"
              checked={(config.passThroughIfNoRequest as boolean | undefined) ?? true}
              onCheckedChange={(v) => update('passThroughIfNoRequest', v)}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Communication & Files</CardTitle>
          <CardDescription>Features available to mentors and project teams</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="chatEnabled">Chat</Label>
              <p className="text-xs text-muted-foreground">Enable messaging between mentor and team</p>
            </div>
            <Switch
              id="chatEnabled"
              checked={(config.chatEnabled as boolean) ?? true}
              onCheckedChange={(v) => update('chatEnabled', v)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="fileUploadEnabled">File Upload</Label>
              <p className="text-xs text-muted-foreground">Allow mentors to upload files for teams</p>
            </div>
            <Switch
              id="fileUploadEnabled"
              checked={(config.fileUploadEnabled as boolean) ?? true}
              onCheckedChange={(v) => update('fileUploadEnabled', v)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="fileCommentsEnabled">File Comments</Label>
              <p className="text-xs text-muted-foreground">Allow mentors to comment on uploaded documents</p>
            </div>
            <Switch
              id="fileCommentsEnabled"
              checked={(config.fileCommentsEnabled as boolean) ?? true}
              onCheckedChange={(v) => update('fileCommentsEnabled', v)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label htmlFor="filePromotionEnabled">File Promotion</Label>
              <p className="text-xs text-muted-foreground">
                Allow mentors to promote mentoring files to a submission window
              </p>
            </div>
            <Switch
              id="filePromotionEnabled"
              checked={(config.filePromotionEnabled as boolean) ?? true}
              onCheckedChange={(v) => update('filePromotionEnabled', v)}
            />
          </div>

          {(config.filePromotionEnabled as boolean) !== false && (
            <div className="pl-6 border-l-2 border-muted space-y-2">
              <Label htmlFor="promotionTargetWindowId">Promotion Target Window</Label>
              <p className="text-xs text-muted-foreground">
                Submission window where promoted files are placed (leave empty for default)
              </p>
              <Input
                id="promotionTargetWindowId"
                placeholder="Submission window ID (optional)"
                value={(config.promotionTargetWindowId as string) ?? ''}
                onChange={(e) => update('promotionTargetWindowId', e.target.value || undefined)}
              />
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
