'use client'

import {
  FieldGrid,
  FieldGroup,
  FieldHint,
  FormSection,
  SelectField,
  TextareaField,
  TextField,
} from '@/app/FormFields'
import { getConfigOptionLabel } from '@/lib/config-option-labels'
import type { SupportedLanguage } from '@/lib/user-language'
import {
  formatLabel,
  PRIORITIES,
  RequiredSubmitLabel,
  RequiredSubmitLabelWithTooltip,
} from './SubmitForm.helpers'
import type { IntakeConfig, Project, SubmitFormLabels } from './SubmitForm.types'

export default function SubmitIssueFields({
  labels,
  language,
  intakeConfig,
  projects,
  promptText,
  today,
  submitted,
  projectId,
  setProjectId,
  department,
  setDepartment,
  dateOfOccurrence,
  setDateOfOccurrence,
  issueCategory,
  setIssueCategory,
  affectedSystem,
  setAffectedSystem,
  userPriority,
  setUserPriority,
  actionRequested,
  setActionRequested,
  description,
  setDescription,
  successCriteria,
  setSuccessCriteria,
  dateInFuture,
  descOverLimit,
  descRemaining,
  successOverLimit,
  successRemaining,
}: {
  labels: SubmitFormLabels
  language: SupportedLanguage
  intakeConfig: IntakeConfig
  projects: Project[]
  promptText: string
  today: string
  submitted: boolean
  projectId: string
  setProjectId: (value: string) => void
  department: string
  setDepartment: (value: string) => void
  dateOfOccurrence: string
  setDateOfOccurrence: (value: string) => void
  issueCategory: string
  setIssueCategory: (value: string) => void
  affectedSystem: string
  setAffectedSystem: (value: string) => void
  userPriority: string
  setUserPriority: (value: string) => void
  actionRequested: string
  setActionRequested: (value: string) => void
  description: string
  setDescription: (value: string) => void
  successCriteria: string
  setSuccessCriteria: (value: string) => void
  dateInFuture: boolean
  descOverLimit: boolean
  descRemaining: number
  successOverLimit: boolean
  successRemaining: number
}) {
  return (
    <>
      <FormSection>
        <FieldGroup>
          <RequiredSubmitLabelWithTooltip
            htmlFor="project-id"
            tooltipId="project-help-tooltip"
            tooltipText={labels.projectHelp}
          >
            {labels.project}
          </RequiredSubmitLabelWithTooltip>
          <SelectField
            id="project-id"
            value={projectId}
            onChange={(e) => setProjectId(e.target.value)}
            disabled={projects.length === 0}
            placeholderValue=""
            hasError={submitted && !projectId}
            aria-describedby="project-help-tooltip"
          >
            <option value="">{projects.length === 0 ? labels.noProjects : labels.selectProject}</option>
            {projects.map((p) => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </SelectField>
          {submitted && !projectId && <FieldHint tone="error">{labels.projectRequired}</FieldHint>}
        </FieldGroup>

        <FieldGrid>
          <FieldGroup>
            <RequiredSubmitLabel htmlFor="department">{labels.department}</RequiredSubmitLabel>
            <SelectField id="department" value={department} onChange={(e) => setDepartment(e.target.value)} placeholderValue="" hasError={submitted && !department}>
              <option value="">{labels.selectDepartment}</option>
              {intakeConfig.departments.map((d) => (
                <option key={d} value={d}>{getConfigOptionLabel(d, language)}</option>
              ))}
            </SelectField>
            {submitted && !department && <FieldHint tone="error">{labels.departmentRequired}</FieldHint>}
          </FieldGroup>

          <FieldGroup>
            <RequiredSubmitLabel htmlFor="date-of-occurrence">{labels.dateOfOccurrence}</RequiredSubmitLabel>
            <TextField
              id="date-of-occurrence"
              type="date"
              value={dateOfOccurrence}
              onChange={(e) => setDateOfOccurrence(e.target.value)}
              max={today}
              hasError={submitted && (!dateOfOccurrence || dateInFuture)}
            />
            {submitted && dateInFuture && (
              <FieldHint tone="error">
                {labels.dateFuture}
              </FieldHint>
            )}
            {submitted && !dateOfOccurrence && (
              <FieldHint tone="error">{labels.dateRequired}</FieldHint>
            )}
          </FieldGroup>
        </FieldGrid>

        <FieldGrid>
          <FieldGroup>
            <RequiredSubmitLabel htmlFor="issue-category">{labels.issueCategory}</RequiredSubmitLabel>
            <SelectField id="issue-category" value={issueCategory} onChange={(e) => setIssueCategory(e.target.value)} placeholderValue="" hasError={submitted && !issueCategory}>
              <option value="">{labels.selectCategory}</option>
              {intakeConfig.issue_categories.map((c) => (
                <option key={c} value={c}>{getConfigOptionLabel(c, language)}</option>
              ))}
            </SelectField>
            {submitted && !issueCategory && <FieldHint tone="error">{labels.categoryRequired}</FieldHint>}
          </FieldGroup>

          <FieldGroup>
            <RequiredSubmitLabel htmlFor="affected-system">{labels.affectedSystem}</RequiredSubmitLabel>
            <SelectField id="affected-system" value={affectedSystem} onChange={(e) => setAffectedSystem(e.target.value)} placeholderValue="" hasError={submitted && !affectedSystem}>
              <option value="">{labels.selectSystem}</option>
              {intakeConfig.affected_systems.map((s) => (
                <option key={s} value={s}>{getConfigOptionLabel(s, language)}</option>
              ))}
            </SelectField>
            {submitted && !affectedSystem && <FieldHint tone="error">{labels.systemRequired}</FieldHint>}
          </FieldGroup>
        </FieldGrid>

        <FieldGrid>
          <FieldGroup>
            <RequiredSubmitLabel htmlFor="user-priority">{labels.priority}</RequiredSubmitLabel>
            <SelectField id="user-priority" value={userPriority} onChange={(e) => setUserPriority(e.target.value)} placeholderValue="" hasError={submitted && !userPriority}>
              <option value="">{labels.selectPriority}</option>
              {PRIORITIES.map((p) => (
                <option key={p} value={p}>{getConfigOptionLabel(p, language)}</option>
              ))}
            </SelectField>
            {submitted && !userPriority && <FieldHint tone="error">{labels.priorityRequired}</FieldHint>}
          </FieldGroup>

          <FieldGroup>
            <RequiredSubmitLabel htmlFor="action-requested">{labels.actionRequested}</RequiredSubmitLabel>
            <SelectField id="action-requested" value={actionRequested} onChange={(e) => setActionRequested(e.target.value)} placeholderValue="" hasError={submitted && !actionRequested}>
              <option value="">{labels.selectAction}</option>
              {intakeConfig.action_requested_options.map((a) => (
                <option key={a} value={a}>{getConfigOptionLabel(a, language)}</option>
              ))}
            </SelectField>
            {submitted && !actionRequested && <FieldHint tone="error">{labels.actionRequired}</FieldHint>}
          </FieldGroup>
        </FieldGrid>
      </FormSection>

      <FormSection>
        <FieldGroup>
          <RequiredSubmitLabel htmlFor="problem-description">{labels.description}</RequiredSubmitLabel>
          <FieldHint>{promptText}</FieldHint>
          <TextareaField
            id="problem-description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows={6}
            hasError={descOverLimit || (submitted && !description.trim())}
            className="min-h-64 sm:min-h-72"
            placeholder={labels.descriptionPlaceholder}
          />
          {submitted && !description.trim() && !descOverLimit && (
            <FieldHint tone="error">{labels.descriptionRequired}</FieldHint>
          )}
          <FieldHint tone={descOverLimit ? 'error' : 'neutral'}>
            {descOverLimit
              ? formatLabel(labels.charactersOver, { count: Math.abs(descRemaining) })
              : formatLabel(labels.charactersRemaining, { count: descRemaining })}
          </FieldHint>
        </FieldGroup>

        <FieldGroup>
          <RequiredSubmitLabel htmlFor="success-criteria">{labels.successCriteria}</RequiredSubmitLabel>
          <TextareaField
            id="success-criteria"
            value={successCriteria}
            onChange={(e) => setSuccessCriteria(e.target.value)}
            rows={3}
            hasError={successOverLimit || (submitted && !successCriteria.trim())}
            placeholder={labels.successCriteriaPlaceholder}
          />
          {submitted && !successCriteria.trim() && !successOverLimit && (
            <FieldHint tone="error">{labels.successCriteriaRequired}</FieldHint>
          )}
          <FieldHint tone={successOverLimit ? 'error' : 'neutral'}>
            {successOverLimit
              ? formatLabel(labels.charactersOver, { count: Math.abs(successRemaining) })
              : formatLabel(labels.charactersRemaining, { count: successRemaining })}
          </FieldHint>
        </FieldGroup>
      </FormSection>
    </>
  )
}