import type { DeviceSummary } from '../types'
import MhiControlPanel from './MhiControlPanel'
import DaikinControlPanel from './DaikinControlPanel'
import TrvControlPanel from './TrvControlPanel'

// Single-zone edit modal content — one card per live device in this zone, each
// with its normal control panel. Same "loop the zone's devices, render the
// matching control panel" pattern as ZoneDetailModal.tsx, minus the staff-only
// schedule/override sections (kiosk isn't for editing scheduling config).
export default function KioskZonePanel({ devices }: { devices: DeviceSummary[] }) {
  if (devices.length === 0) {
    return <p className="muted">No live-controllable devices in this zone.</p>
  }

  return (
    <div>
      {devices.map(d => (
        <div key={d.id} className="card">
          <div style={{ fontWeight: 600, fontSize: 13 }}>{d.location || d.discovered_name || d.external_ref}</div>
          {d.device_type === 'shelly_trv' && <TrvControlPanel deviceId={d.id} canControl={true} />}
          {d.device_type === 'mhi_mqtt' && <MhiControlPanel deviceId={d.id} canControl={true} />}
          {d.device_type === 'daikin' && <DaikinControlPanel deviceId={d.id} canControl={true} />}
        </div>
      ))}
    </div>
  )
}