import { useState } from 'react'
import { DataTable, withColumnResizing, withSearch, withSorting, type DataTableColumn } from './internal/DataTable'
import { LayerLadderEditor } from './LayerLadderEditor'

export interface SettingLayer { layer: 'engine' | 'home' | 'repo' | 'plan' | 'run'; value: string | null; editable: boolean }
export interface SettingItem { key: string; label: string; value: string; decidedBy: SettingLayer['layer']; mutation: 'mid-run' | 'new-runs' | 'immutable'; layers: SettingLayer[] }
const MUTATION_LABEL: Record<SettingItem['mutation'], string> = { 'mid-run': 'Yes, now', 'new-runs': 'New runs only', immutable: 'No' }

function SettingCell({ item, onSave }: { item: SettingItem; onSave(key: string, layer: SettingLayer['layer'], value: string): void }) {
  const [expanded, setExpanded] = useState(false)
  return <div><button type="button" aria-expanded={expanded} aria-label={`${expanded ? 'Collapse' : 'Expand'} ${item.label}`} onClick={() => setExpanded((value) => !value)} className="min-h-11 text-left text-sm font-semibold text-fg hover:text-accent">{item.label}</button>{expanded ? <div className="min-w-[32rem] py-2"><LayerLadderEditor item={item} onSave={onSave} /></div> : null}</div>
}

function columns(onSave: (key: string, layer: SettingLayer['layer'], value: string) => void): DataTableColumn<SettingItem>[] { return [
  { id: 'setting', header: 'Setting', minWidth: 220, sortable: true, sortValue: (item) => item.label.toLowerCase(), searchValue: (item) => `${item.label} ${item.key}`, cell: (item) => <SettingCell item={item} onSave={onSave} /> },
  { id: 'value', header: 'Value', minWidth: 180, sortable: true, sortValue: (item) => item.value.toLowerCase(), searchValue: (item) => item.value, cell: (item) => <span className="text-sm font-semibold text-fg">{item.value}</span> },
  { id: 'decidedBy', header: 'Decided by', minWidth: 110, sortable: true, sortValue: (item) => item.decidedBy.toLowerCase(), searchValue: (item) => item.decidedBy, cell: (item) => <span className="text-sm text-fg-muted"><span className="mr-2 inline-block h-2 w-2 rounded-full bg-accent" aria-hidden="true" />{item.decidedBy}</span> },
  { id: 'mutation', header: 'Can I change it?', minWidth: 130, sortable: true, sortValue: (item) => MUTATION_LABEL[item.mutation].toLowerCase(), searchValue: (item) => MUTATION_LABEL[item.mutation], cell: (item) => <span className="text-sm text-fg-muted">{MUTATION_LABEL[item.mutation]}</span> },
] }

export function SettingsTable(props: { items: SettingItem[] | null; onSave(key: string, layer: SettingLayer['layer'], value: string): void }) {
  return <section aria-labelledby="run-settings-title" className="min-w-0 overflow-hidden rounded-xl border border-border bg-surface"><header className="border-b border-border px-5 py-4"><h2 id="run-settings-title" className="text-base font-semibold text-fg">Configuration</h2></header>{props.items === null ? <p className="px-5 py-6 text-sm text-fg-muted">config surface needs B5</p> : <DataTable caption="Configuration" columns={columns(props.onSave)} rows={props.items} getRowId={(item) => item.key} capabilities={[withSorting(), withSearch({ label: 'Search settings' }), withColumnResizing()]} />}</section>
}