import type { FieldGroup, OptionsPageDefinition, RuntimeFieldValueMap } from '@platform-modules/fields'
import { CompleteFieldValuesEditor, type CompleteFieldEditorAdapters, type FieldValidationIssue } from './complete-editor.js'

export interface OptionsPageDefinitionEditorProps {
  readonly value: OptionsPageDefinition
  readonly onChange: (value: OptionsPageDefinition) => void
  readonly availableParents?: readonly Pick<OptionsPageDefinition,'key'|'title'>[]
  readonly disabled?: boolean
}

export function OptionsPageDefinitionEditor({value,onChange,availableParents=[],disabled}:OptionsPageDefinitionEditorProps){
  const update=(patch:Partial<OptionsPageDefinition>)=>onChange({...value,...patch})
  const issues:string[]=[]
  if(!/^[a-z][a-z0-9_-]*$/.test(value.key))issues.push('Key must be normalized')
  if(!value.title.trim())issues.push('Title is required')
  for(const [label,capability] of [['Read capability',value.readCapability],['Write capability',value.writeCapability],['Manage capability',value.manageCapability]] as const)if(!capability.trim())issues.push(`${label} is required`)
  return <section className="fields-options-editor" style={{containerType:'inline-size',containerName:'fields-options'}} aria-label={`Options Page ${value.title||value.key}`}>
    <style>{`.fields-options-editor__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.fields-options-editor__wide{grid-column:1/-1}@container fields-options (max-width:36rem){.fields-options-editor__grid{grid-template-columns:minmax(0,1fr)}.fields-options-editor__wide{grid-column:1}}`}</style>
    <fieldset disabled={disabled}><legend>Options Page definition</legend>
      <div className="fields-options-editor__grid">
        <label>Title<input aria-label="Options Page title" value={value.title} onChange={(event)=>update({title:event.currentTarget.value})}/></label>
        <label>Key<input aria-label="Options Page key" value={value.key} onChange={(event)=>update({key:event.currentTarget.value})}/></label>
        <label>Menu title<input aria-label="Options Page menu title" value={value.menuTitle??''} onChange={(event)=>update({menuTitle:event.currentTarget.value||undefined})}/></label>
        <label>Parent<select aria-label="Options Page parent" value={value.parentKey??''} onChange={(event)=>update({parentKey:event.currentTarget.value||undefined})}><option value="">—</option>{availableParents.filter((page)=>page.key!==value.key).map((page)=><option key={page.key} value={page.key}>{page.title}</option>)}</select></label>
        <label>Read capability<input aria-label="Options Page read capability" value={value.readCapability} onChange={(event)=>update({readCapability:event.currentTarget.value})}/></label>
        <label>Write capability<input aria-label="Options Page write capability" value={value.writeCapability} onChange={(event)=>update({writeCapability:event.currentTarget.value})}/></label>
        <label>Manage capability<input aria-label="Options Page manage capability" value={value.manageCapability} onChange={(event)=>update({manageCapability:event.currentTarget.value})}/></label>
        <label>Position<input aria-label="Options Page position" type="number" value={value.position??''} onChange={(event)=>update({position:event.currentTarget.value===''?undefined:Number(event.currentTarget.value)})}/></label>
        <label>Icon<input aria-label="Options Page icon" value={value.icon??''} onChange={(event)=>update({icon:event.currentTarget.value||undefined})}/></label>
        <label><input type="checkbox" checked={value.redirectToFirstChild===true} onChange={(event)=>update({redirectToFirstChild:event.currentTarget.checked||undefined})}/> Redirect to first child</label>
        <label><input type="checkbox" checked={value.autoload===true} onChange={(event)=>update({autoload:event.currentTarget.checked||undefined})}/> Autoload</label>
      </div>
      {issues.length?<div role="alert" tabIndex={0}>{issues.join('. ')}</div>:null}
    </fieldset>
  </section>
}

export interface OptionsPageValuesEditorProps {
  readonly page: Pick<OptionsPageDefinition,'key'|'title'>
  readonly groups: readonly FieldGroup[]
  readonly value: Readonly<Record<string,RuntimeFieldValueMap>>
  readonly onChange: (value: Readonly<Record<string,RuntimeFieldValueMap>>) => void
  readonly errors?: Readonly<Record<string,readonly FieldValidationIssue[]>>
  readonly disabled?: boolean
  readonly readOnly?: boolean
  readonly adapters?: CompleteFieldEditorAdapters
}

export function OptionsPageValuesEditor({page,groups,value,onChange,errors={},disabled,readOnly,adapters}:OptionsPageValuesEditorProps){
  return <section className="fields-options-values" style={{containerType:'inline-size'}} aria-label={`${page.title} values`}>
    {groups.map((group)=><fieldset key={group.key} disabled={disabled}><legend>{group.title}</legend>
      <CompleteFieldValuesEditor fields={group.fields} value={value[group.key]??{}} onChange={(next)=>onChange({...value,[group.key]:next})} errors={errors[group.key]??[]} disabled={disabled} readOnly={readOnly} adapters={adapters} path={[group.key]} idPrefix={`options-${page.key}-${group.key}`}/>
    </fieldset>)}
  </section>
}