import { useEffect, useState } from 'react'
import type { SettingItem, SettingLayer } from './SettingsTable'
import { Button } from './Button'
import { TextField } from './TextField'

const LAYER_LABEL: Record<SettingLayer['layer'], string> = {
  engine: 'Engine default',
  home: 'Home',
  repo: 'Repo',
  plan: 'Plan',
  run: 'This run',
}

export function LayerLadderEditor(props: {
  item: SettingItem
  onSave(key: string, layer: SettingLayer['layer'], value: string): void
}) {
  const [values, setValues] = useState<Record<SettingLayer['layer'], string>>({
    engine: '',
    home: '',
    repo: '',
    plan: '',
    run: '',
  })
  const [savedLayer, setSavedLayer] = useState<SettingLayer['layer'] | null>(null)

  useEffect(() => {
    setValues(
      Object.fromEntries(props.item.layers.map((layer) => [layer.layer, layer.value ?? ''])) as Record<
        SettingLayer['layer'],
        string
      >,
    )
    setSavedLayer(null)
  }, [props.item])

  return (
    <div data-testid={`layer-ladder-${props.item.key}`} className="space-y-2 bg-surface-raised p-4">
      {props.item.layers.map((layer, index) => {
        const label = LAYER_LABEL[layer.layer]
        return (
          <div
            key={layer.layer}
            className="grid min-h-11 grid-cols-[2rem_minmax(8rem,0.6fr)_minmax(0,1fr)_auto] items-center gap-3 border-b border-border py-2 last:border-b-0"
          >
            <span className="text-center text-xs tabular-nums text-fg-subtle">{index + 1}</span>
            <span className="text-sm font-semibold text-fg">{label}</span>
            {layer.editable ? (
              <TextField
                label={`${label} value`}
                labelMode="hidden"
                value={values[layer.layer]}
                onValueChange={(value) =>
                  setValues((current) => ({ ...current, [layer.layer]: value }))
                }
              />
            ) : (
              <span className="text-sm text-fg-muted">{layer.value ?? 'Not set'}</span>
            )}
            {layer.editable ? (
              <Button
                type="button"
                variant="outline"
                tone="neutral"
                size="sm"
                onClick={() => {
                  props.onSave(props.item.key, layer.layer, values[layer.layer])
                  setSavedLayer(layer.layer)
                }}
              >
                Save {label}
              </Button>
            ) : (
              <span className="text-xs text-fg-subtle">Read only</span>
            )}
          </div>
        )
      })}
      {savedLayer && (
        <p aria-live="polite" className="text-sm text-success">
          {props.item.mutation === 'mid-run' ? 'run override applies now' : 'applies to new runs'}
        </p>
      )}
    </div>
  )
}