import { useNavigate } from 'react-router-dom'
import { PanelHeading } from '@/components/cockpit/PanelChrome'
import { CockpitRail } from '@/components/cockpit/CockpitRail'
import { ArchitectureProvider, ArchitecturePanel } from '@/components/cockpit/AgentArchitecture'
import { useSetProceed } from '@/lib/ProceedContext'
import { useSession } from '@/store/session'

/**
 * Skills & Policies — where you change up the agent's makeup after meeting it.
 * The dashboard sits on the left with its MAKEUP slide-outs: open a card to
 * inspect, edit (🔧), or AI-refine (🪄) the agent's persona, tooling, and memory,
 * then save it back to the board.
 */
export function ModuleMakeup() {
  const navigate = useNavigate()
  const connected = useSession((s) => s.device.connected)
  const completePhase = useSession((s) => s.completePhase)

  const ready = connected

  const onProceed = () => {
    completePhase('m1')
    navigate('/workshop/module2')
  }
  useSetProceed({ label: 'Proceed to Module 2 →', disabled: !ready, onClick: onProceed })

  return (
    <section>
      <PanelHeading
        title="Skills & Policies"
        intro="Change up your agent's makeup — open a MAKEUP card in the dashboard to inspect its persona, tooling, and memory, then edit or refine it and save it back to the board."
        size={34}
      />

      {/* the full dashboard on the left, slide-outs intact */}
      <ArchitectureProvider>
        <div className="relative mt-8 w-full max-w-[620px]">
          <ArchitecturePanel />
          <CockpitRail variant="agent" />
        </div>
      </ArchitectureProvider>
    </section>
  )
}