import { useState, useEffect } from 'react'
import {
  Card, Select, Switch, Typography, message, Space, Descriptions, Button,
} from 'antd'
import api from '../../api/client'

const { Title } = Typography

const strategies = [
  { value: 'round-robin', label: 'Round-Robin' },
  { value: 'weighted', label: 'Weighted' },
  { value: 'least-conn', label: 'Least Connections' },
]

export default function SettingsPage() {
  const [strategy, setStrategy] = useState('weighted')
  const [multicastEnabled, setMulticastEnabled] = useState(true)
  const [multicastAvailable, setMulticastAvailable] = useState(false)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    loadSettings()
  }, [])

  async function loadSettings() {
    try {
      const { data } = await api.get('/nodes/strategy')
      setStrategy(data.strategy)
      setMulticastEnabled(data.multicast_enabled)
      setMulticastAvailable(data.multicast_available)
    } catch { /* ignore */ }
  }

  async function saveStrategy(val: string) {
    setSaving(true)
    try {
      await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled })
      setStrategy(val)
      message.success('Strategy updated')
    } catch { message.error('Update failed') }
    setSaving(false)
  }

  async function toggleMulticast(val: boolean) {
    setMulticastEnabled(val)
    try {
      await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
      message.success('Multicast settings updated')
    } catch { message.error('Update failed') }
  }

  return (
    <div style={{ maxWidth: 720 }}>
      <Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>System Settings</Title>

      <Card title="Load Balancing" style={{ marginBottom: 24, borderRadius: 12 }}>
        <Descriptions column={1} labelStyle={{ width: 120 }}>
          <Descriptions.Item label="Strategy">
            <Select
              value={strategy}
              onChange={saveStrategy}
              options={strategies}
              loading={saving}
              style={{ width: 280 }}
            />
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <Card title="Multicast" style={{ borderRadius: 12 }}>
        <Descriptions column={1} labelStyle={{ width: 120 }}>
          <Descriptions.Item label="Enable">
            <Switch checked={multicastEnabled} onChange={toggleMulticast} />
          </Descriptions.Item>
          <Descriptions.Item label="Network Status">
            <span style={{ color: multicastAvailable ? '#2E7D32' : '#999' }}>
              {multicastAvailable ? 'Available - using multicast' : 'Unavailable - fallback to unicast'}
            </span>
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  )
}