// frontend/src/modals/bellcloud/devices/SyncClockModal.jsx
// Placeholder — clock sync UI to be implemented when MQTT sync protocol is defined.
import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'
import Icon from '@/components/ui/Icon'

export default function SyncClockModal({ open, onClose, device }) {
  const sn = device?.serial_number || device?.device_id

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Sync Clocktower"
      size="sm"
      footer={
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-3)' }}>
          <Button variant="ghost" onClick={onClose}>Close</Button>
          <Button variant="primary" disabled>
            Sync (Coming Soon)
          </Button>
        </div>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-5)', padding: 'var(--space-4) 0', textAlign: 'center' }}>
        <div style={{
          width: 64,
          height: 64,
          borderRadius: 'var(--radius-full)',
          backgroundColor: 'var(--color-primary-subtle)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Icon name="refresh" size={28} color="var(--color-primary)" />
        </div>
        <div>
          <p style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-semibold)', color: 'var(--color-text-primary)', marginBottom: 'var(--space-2)' }}>
            Clock Synchronisation
          </p>
          <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-muted)', maxWidth: 340 }}>
            This will send an MQTT command to correct the clocktower's mechanical position
            if it has drifted from the master time reference.
          </p>
        </div>
        {sn && (
          <div style={{
            padding: 'var(--space-3) var(--space-4)',
            borderRadius: 'var(--radius-md)',
            backgroundColor: 'var(--color-bg-elevated)',
            border: '1px solid var(--color-border)',
            width: '100%',
          }}>
            <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)' }}>
              Target device
            </span>
            <p style={{ fontFamily: 'var(--font-family-mono)', fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', marginTop: 'var(--space-1)' }}>
              {sn}
            </p>
          </div>
        )}
        <p style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', fontStyle: 'italic' }}>
          Full sync implementation coming soon — MQTT protocol pending.
        </p>
      </div>
    </Modal>
  )
}
