import { useEffect, useId, useState } from 'react'

import CountsFieldTree from '@/components/counts/CountsFieldTree'
import DateTimeField from '@/components/common/DateTimeField'
import FormField from '@/components/common/FormField'
import { Button } from '@/components/ui/button'
import { isCountsState, normaliseCountsParams } from '@/lib/counts'
import { countsSummaryFields } from '@/lib/countsState'
import { fetchTagByName } from '@/lib/tags'
import { inputClass } from '@/lib/utils'
import { useLocale } from '@/lib/useLocale'
import { useUITranslation } from '@/lib/useUITranslation'

import type { ReactNode } from 'react'

import type { CountsResource } from '@/lib/counts'


const CountsControls = (
    { resource, applied, open, setOpen, execute, displayJSON, reorder, actions }: {
	resource: CountsResource
	applied: URLSearchParams
	open: boolean
	setOpen: (open: boolean) => void
	execute: (params: URLSearchParams) => void
	displayJSON: (enabled: boolean) => void
	reorder: (value: string) => void
	actions?: ReactNode },
) => {
  const { label, message } = useUITranslation ('counts')
  const locale = useLocale ()
  const id = useId ()
  const [draft, setDraft] = useState (() => new URLSearchParams (applied))
  const order = applied.get ('order')
  const nestedJSON = applied.get ('nested_json')
  useEffect (() => {
    setDraft (previous => {
      const next = new URLSearchParams (previous)
      for (const [key, value] of Object.entries ({ order, nested_json: nestedJSON }))
      {
	if (value == null) next.delete (key)
	else next.set (key, value)
      }
      return next
    })
  }, [order, nestedJSON])
  const [error, setError] = useState (false)
  const [pending, setPending] = useState (false)
  const mode = draft.get ('mode') ?? 'summary'
  const state = isCountsState (draft)
  const axes = (state && resource === 'posts') ? ['tags', 'month', 'user'] : ['month', 'user']
  const update = (key: string, value: string) => {
    setDraft (previous => {
      const next = new URLSearchParams (previous)
      if (['mode', 'axis', 'basis'].includes (key)) next.delete ('sort')
      if (key === 'axis' || key === 'basis') next.delete ('summary_columns')
      if (key === 'basis' && value === 'history' && next.get ('axis') === 'tags')
	next.set ('axis', 'month')
      if (value || ['columns', 'children', 'summary_columns'].includes (key))
	next.set (key, value)
      else next.delete (key)
      return next
    })
  }
  const submit = async () => {
    setError (false)
    setPending (true)
    try
    {
      const next = new URLSearchParams (draft)
      for (const key of resource === 'posts' ? ['tag'] : ['resource_id'])
      {
	const value = next.get (key)?.trim () ?? ''
	if (value && !/^[1-9][0-9]*$/.test (value))
	{
	  if (state && next.get ('kind') === 'external') throw new Error ()
	  const tag = await fetchTagByName (value, locale)
	  if (tag == null)
	    throw new Error ()
	  next.set (key, String (tag.id))
	}
      }
      next.delete ('page')
      execute (normaliseCountsParams (resource, next))
    }
    catch
    {
      setError (true)
    }
    finally
    {
      setPending (false)
    }
  }

  return (
      <form className="shrink-0" onSubmit={event => {
	event.preventDefault ()
	void submit ()
      }}>
	<div className="flex flex-wrap items-center gap-2 border-b pb-2 dark:border-slate-700">
	  <Button type="submit" size="sm" disabled={pending}>{label ('run')}</Button>
	  <Button type="button" size="sm" variant="outline" aria-expanded={open}
	      aria-controls={id} onClick={() => setOpen (!open)}>
	    {label ('conditions')}<span aria-hidden>{open ? '▴' : '▾'}</span>
	  </Button>
	  <select className={inputClass (false, 'w-auto py-1')}
	      aria-label={message ('mode').text} lang={message ('mode').language}
	      value={mode} onChange={event => update ('mode', event.target.value)}>
	    {['summary', 'details'].map (value => (
		<option key={value} value={value} lang={message (value).language}>
		  {message (value).text}</option>))}
	  </select>
	  {actions}
	</div>
	{error && <p role="alert">{label ('shared:messages.checkInputModern')}</p>}
	<div id={id} hidden={!open}
	    className="max-h-[40dvh] overflow-y-auto overscroll-contain border-b py-2
	    dark:border-slate-700 md:max-h-[45dvh]">
	  <div className="grid gap-4 md:grid-cols-2">
	    <fieldset className="min-w-0" data-counts-output>
	      <legend className="mb-2 font-semibold">{label ('output')}</legend>
	      <label className="mb-2 flex items-center gap-1">
		<input type="checkbox" checked={draft.get ('nested_json') === '1'}
		    onChange={event => {
		      update ('nested_json', event.target.checked ? '1' : '0')
		      displayJSON (event.target.checked)
		    }}/>
		{label ('nested.asJSON')}
	      </label>
	      <FormField label={label ('measure')}>
		{() => <select value={state ? 'state' : 'history'}
		    className={inputClass (false, 'w-auto py-1')}
		    aria-label={message ('measure').text} lang={message ('measure').language}
		    onChange={event => update ('basis', event.target.value)}>
		  <option value="state" lang={message (`state.totals.${resource}`).language}>
		    {message (`state.totals.${resource}`).text}</option>
		  <option value="history" lang={message ('metric').language}>
		    {message ('metric').text}</option>
		</select>}
	      </FormField>
	      {mode === 'summary' && <label className="my-2 flex flex-wrap items-center gap-2">
		{label ('axis')}
		<select className={inputClass (false, 'w-auto py-1')}
		    value={draft.get ('axis')
			?? ((state && resource === 'posts') ? 'tags' : 'month')}
		    aria-label={message ('axis').text} lang={message ('axis').language}
		    onChange={event => update ('axis', event.target.value)}>
		  {axes.map (axis => <option key={axis} value={axis}
			  lang={message (`axes.${axis}`).language}>
			{message (`axes.${axis}`).text}</option>)}
		</select>
	      </label>}
	      <CountsFieldTree resource={resource} params={draft}
		  fields={mode === 'summary' ? countsSummaryFields (resource, draft) : undefined}
		  selectionKey={mode === 'summary' ? 'summary_columns' : 'columns'}
		  parent={mode === 'summary' ? 'summary' : ''} update={(key, value) => {
		    update (key, value)
		    if (key === 'order') reorder (value)
		  }}/>
	    </fieldset>
	    <fieldset className="min-w-0 space-y-2" data-counts-filters>
	      <legend className="mb-2 font-semibold">{label ('filters')}</legend>
	      <FormField label={label ('state.at')}>
		{() => <DateTimeField value={draft.get ('at') ?? ''}
		    aria-label={message ('state.at').text} lang={message ('state.at').language}
		    onChange={value => update ('at', value ?? '')}/>}
	      </FormField>
	      {!state && <label className="flex items-center gap-1">
		<input type="checkbox" checked={draft.get ('latest') !== '0'}
		    onChange={event => update ('latest', event.target.checked ? '1' : '0')}/>
		{label ('latestOnly')}
	      </label>}
	      {state && resource === 'posts' && <FormField label={label ('columns.kind')}>
		{() => <select value={draft.get ('kind') ?? 'internal'}
		    className={inputClass (false, 'w-auto py-1')}
		    aria-label={message ('columns.kind').text} lang={message ('columns.kind').language}
		    onChange={event => update ('kind', event.target.value)}>
		  {['internal', 'external'].map (kind => <option key={kind} value={kind}
		      lang={message (`kinds.${kind}`).language}>
			{message (`kinds.${kind}`).text}</option>)}
		</select>}
	      </FormField>}
	      <div className="grid gap-2 md:grid-cols-2">
		{['from', 'before'].map (key => (
		    <FormField key={key} label={label (`fields.${key}`)}>
		      {() => <DateTimeField value={draft.get (key) ?? ''}
			  aria-label={message (`fields.${key}`).text}
			  lang={message (`fields.${key}`).language}
			  onChange={value => update (key, value ?? '')}/>}
		    </FormField>))}
	      </div>
	      <div className="grid gap-2 md:grid-cols-2">
		{[['resource_id', resource === 'posts' ? 'post' : 'tag'], ['user_id', 'actor'],
		  ...(resource === 'posts' ? [['tag', 'tag']] : []), ['limit', 'limit']]
		    .map (([key, field]) => (
			<FormField key={key} label={label (`fields.${field}`)}>
			  {() => <input aria-label={message (`fields.${field}`).text}
			      lang={message (`fields.${field}`).language}
			      type={key === 'limit' ? 'number' : 'text'} min={1} max={100}
			      value={draft.get (key) ?? (key === 'limit' ? '20' : '')}
			      onChange={event => update (key, event.target.value)}
			      className={inputClass (false, 'py-1')}/>}
			</FormField>))}
	      </div>
	    </fieldset>
	  </div>
	</div>
      </form>)
}


export default CountsControls