import { useState } from 'react'
import { MessageSquare, Wrench, CheckSquare } from 'lucide-react'
import { CopilotTab }  from './tabs/CopilotTab'
import { ToolsTab }    from './tabs/ToolsTab'
import { ActionsTab }  from './tabs/ActionsTab'

export default function InstControlPanel({ selectedEntity, entityContext, loading, setSelectedEntity, manifest, activeView }) {
  const [tab, setTab] = useState('copilot')

  const tabs = [
    { id:'copilot', label:'Copilot', Icon: MessageSquare },
    { id:'tools',   label:'Tools',   Icon: Wrench },
    { id:'actions', label:'Actions', Icon: CheckSquare },
  ]

  return (
    <div style={{
      display:'flex', flexDirection:'column', height:'100%',
      background:'#0F172A',
      borderLeft:'1px solid rgba(255,255,255,0.06)',
      width: '320px',
      flexShrink: 0
    }}>
      {/* Header */}
      <div className="px-3 py-2.5 border-b border-white/[0.06] bg-[#060a14] flex items-center justify-between flex-shrink-0">
        <div className="flex items-center gap-1.5">
          <span className="material-symbols-outlined text-inst-primary text-[15px] alert-pulse">sensors</span>
          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-white/90">
            {selectedEntity ? selectedEntity : 'CONTROL PLANE'}
          </span>
        </div>
        {selectedEntity && (
          <button onClick={() => setSelectedEntity(null)} className="text-white/40 hover:text-white/80 transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] btn-press">
            <span className="material-symbols-outlined text-[14px]">close</span>
          </button>
        )}
      </div>

      {/* Tab bar */}
      <div style={{
        display:'flex', flexShrink:0,
        borderBottom:'1px solid rgba(255,255,255,0.06)',
      }}>
        {tabs.map(t => (
          <button key={t.id}
            onClick={() => setTab(t.id)}
            style={{
              flex:1, padding:'10px 4px',
              display:'flex', flexDirection:'column',
              alignItems:'center', gap:3,
              background:'transparent', border:'none',
              cursor:'pointer',
              borderBottom: tab === t.id
                ? '2px solid #10B981' : '2px solid transparent',
              color: tab === t.id ? '#10B981' : '#475569',
              transition:'border-color 0.15s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s cubic-bezier(0.23, 1, 0.32, 1)',
            }}
          >
            <t.Icon size={14} />
            <span style={{ fontSize:9, letterSpacing:'0.08em',
                           textTransform:'uppercase' }}>
              {t.label}
            </span>
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column' }}>
        {tab === 'copilot' && <CopilotTab activeView={activeView} selectedEntity={selectedEntity} entityContext={entityContext} loading={loading} manifest={manifest} />}
        {tab === 'tools'   && <ToolsTab   activeView={activeView} />}
        {tab === 'actions' && <ActionsTab activeView={activeView} />}
      </div>
    </div>
  )
}