import { useState } from 'react'
import { Term } from './api'
import { Spinner } from './ui'

// A group is either a page (clicking the head opens it — Dashboard) or a folder of
// leaves (Terminal). `soon` groups are inert placeholders for the roadmap.
export interface Group { id: string; label: string; icon: string; soon?: boolean; page?: boolean }

interface Props {
  groups: Group[]; terms: Term[]; active: string | null; view: string; creating?: boolean
  onSelect: (id: string) => void; onView: (id: string) => void; onNew: () => void
  onRename: (t: Term) => void; onClose: (t: Term) => void
}

export default function Rail({ groups, terms, active, view, creating, onSelect, onView, onNew, onRename, onClose }: Props) {
  const [open, setOpen] = useState<string>('terminal')
  return (
    <nav className="rail">
      {groups.map((g) => {
        const expanded = !g.page && open === g.id
        const isPage = !!g.page && view === g.id
        return (
          <div key={g.id} className={'group' + (expanded ? ' open' : '') + (g.soon ? ' soon' : '')}>
            <button className={'group-head' + (isPage ? ' active' : '')} disabled={g.soon}
              onClick={() => { if (g.soon) return; if (g.page) onView(g.id); else setOpen(expanded ? '' : g.id) }}>
              <span className="chev">{g.page ? '' : expanded ? '▾' : '▸'}</span>
              <span className="gicon">{g.icon}</span>
              <span>{g.label}</span>
              {g.soon && <span className="badge">soon</span>}
            </button>
            {expanded && g.id === 'terminal' && (
              <div className="leaves">
                {terms.map((t) => {
                  const sel = view === 'terminal' && t.id === active
                  return (
                    <div key={t.id} className={'leaf' + (sel ? ' active' : '') + (t.running ? '' : ' exited')}
                      onClick={() => onSelect(t.id)}>
                      <span className={'sdot' + (t.running ? ' run' : '')} />
                      <span className="lname" title={t.name}>{t.name}</span>
                      {sel && (
                        <span className="leaf-actions">
                          <button className="icon-btn" title="rename" onClick={(e) => { e.stopPropagation(); onRename(t) }}>✎</button>
                          <button className="icon-btn" title="close" onClick={(e) => { e.stopPropagation(); onClose(t) }}>✕</button>
                        </span>
                      )}
                    </div>
                  )
                })}
                <button className="leaf new" disabled={creating} onClick={onNew}>{creating ? <><Spinner /> creating…</> : '+ New Terminal'}</button>
              </div>
            )}
          </div>
        )
      })}
    </nav>
  )
}