'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useState, useTransition, type FormEvent } from 'react'
import { FieldLabel, LabelWithTooltip, PrimaryButton, SelectField } from '@/app/FormFields'
import {
  INBOX_ALL_STATUSES,
  INBOX_ALL_UNRESPONDED_STATUS,
} from '@/lib/inbox-status-filter'

type SelectOption = {
  label: string
  value: string
}

type InboxFilterLabels = {
  project: string
  allProjects: string
  category: string
  allCategories: string
  priority: string
  priorityHelp: string
  allPriorities: string
  status: string
  statusHelp: string
  allUnresponded: string
  allStatuses: string
  sort: string
  sortHelp: string
  dateSubmitted: string
  dateOfOccurrence: string
  userPriority: string
  applyFilters: string
  reset: string
}

export default function InboxFilterForm({
  selectedProject,
  selectedCategory,
  selectedPriority,
  selectedStatus,
  selectedSort,
  projectOptions,
  categoryOptions,
  priorityOptions,
  statusOptions,
  labels,
}: {
  selectedProject: string
  selectedCategory: string
  selectedPriority: string
  selectedStatus: string
  selectedSort: string
  projectOptions: SelectOption[]
  categoryOptions: SelectOption[]
  priorityOptions: SelectOption[]
  statusOptions: SelectOption[]
  labels: InboxFilterLabels
}) {
  const router = useRouter()
  const [pending, startTransition] = useTransition()
  const [project, setProject] = useState(selectedProject)
  const [category, setCategory] = useState(selectedCategory)
  const [priority, setPriority] = useState(selectedPriority)
  const [status, setStatus] = useState(selectedStatus)
  const [sort, setSort] = useState(selectedSort)

  function applyFilters(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()

    const params = new URLSearchParams()
    if (project) params.set('project', project)
    if (category) params.set('category', category)
    if (priority) params.set('priority', priority)
    if (status) params.set('status', status)
    if (sort) params.set('sort', sort)

    startTransition(() => {
      router.push(params.size ? `/inbox?${params.toString()}` : '/inbox')
    })
  }

  return (
    <form
      onSubmit={applyFilters}
      className="grid gap-3 rounded-lg border border-zinc-200 bg-white p-4 md:grid-cols-5 dark:border-zinc-800 dark:bg-zinc-900"
    >
      <div className="space-y-2">
        <div className="flex h-5 items-center">
          <FieldLabel htmlFor="filter-project" className="text-xs">{labels.project}</FieldLabel>
        </div>
        <SelectField
          id="filter-project"
          name="project"
          value={project}
          onChange={(event) => setProject(event.target.value)}
          className="h-11 text-sm"
        >
          <option value="">{labels.allProjects}</option>
          {projectOptions.map((project) => (
            <option key={project.value} value={project.value}>{project.label}</option>
          ))}
        </SelectField>
      </div>
      <div className="space-y-2">
        <div className="flex h-5 items-center">
          <FieldLabel htmlFor="filter-category" className="text-xs">{labels.category}</FieldLabel>
        </div>
        <SelectField
          id="filter-category"
          name="category"
          value={category}
          onChange={(event) => setCategory(event.target.value)}
          className="h-11 text-sm"
        >
          <option value="">{labels.allCategories}</option>
          {categoryOptions.map((category) => (
            <option key={category.value} value={category.value}>{category.label}</option>
          ))}
        </SelectField>
      </div>
      <div className="space-y-2">
        <LabelWithTooltip
          htmlFor="filter-priority"
          className="text-xs"
          tooltipId="filter-priority-help"
          tooltipText={labels.priorityHelp}
        >
          {labels.priority}
        </LabelWithTooltip>
        <SelectField
          id="filter-priority"
          name="priority"
          value={priority}
          onChange={(event) => setPriority(event.target.value)}
          className="h-11 text-sm"
          aria-describedby="filter-priority-help"
        >
          <option value="">{labels.allPriorities}</option>
          {priorityOptions.map((priority) => (
            <option key={priority.value} value={priority.value}>{priority.label}</option>
          ))}
        </SelectField>
      </div>
      <div className="space-y-2">
        <LabelWithTooltip
          htmlFor="filter-status"
          className="text-xs"
          tooltipId="filter-status-help"
          tooltipText={labels.statusHelp}
        >
          {labels.status}
        </LabelWithTooltip>
        <SelectField
          id="filter-status"
          name="status"
          value={status}
          onChange={(event) => setStatus(event.target.value)}
          className="h-11 text-sm"
          aria-describedby="filter-status-help"
        >
          <option value={INBOX_ALL_UNRESPONDED_STATUS}>{labels.allUnresponded}</option>
          <option value={INBOX_ALL_STATUSES}>{labels.allStatuses}</option>
          {statusOptions.map((status) => (
            <option key={status.value} value={status.value}>{status.label}</option>
          ))}
        </SelectField>
      </div>
      <div className="space-y-2">
        <LabelWithTooltip
          htmlFor="filter-sort"
          className="text-xs"
          tooltipId="filter-sort-help"
          tooltipText={labels.sortHelp}
        >
          {labels.sort}
        </LabelWithTooltip>
        <SelectField
          id="filter-sort"
          name="sort"
          value={sort}
          onChange={(event) => setSort(event.target.value)}
          className="h-11 text-sm"
          aria-describedby="filter-sort-help"
        >
          <option value="submitted">{labels.dateSubmitted}</option>
          <option value="occurrence">{labels.dateOfOccurrence}</option>
          <option value="priority">{labels.userPriority}</option>
        </SelectField>
      </div>
      <div className="flex items-end gap-2 md:col-span-5">
        <PrimaryButton type="submit" loading={pending} className="py-2.5">
          {labels.applyFilters}
        </PrimaryButton>
        <Link
          href="/inbox"
          className="rounded-xl border border-zinc-200 bg-white px-3 py-2.5 text-sm font-medium text-zinc-800 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:bg-zinc-800"
        >
          {labels.reset}
        </Link>
      </div>
    </form>
  )
}