// src/pages/DevicePage.tsx - Device config page
import { useEffect, useState } from 'react';
import { useDeviceStore } from '../stores/deviceStore';
import type { DeviceFormValues } from '../types';

export function DevicePage() {
  const { config, loading, error, fetchDevice, updateDevice } = useDeviceStore();
  const [form, setForm] = useState<DeviceFormValues>({ type: 0, sn: 0, name: '', unit: 1, room: 101, keypad: 1 });

  useEffect(() => { fetchDevice(); }, [fetchDevice]);

  useEffect(() => {
    if (config) {
      setForm({ 
        type: config.type, 
        sn: config.sn, 
        name: config.name, 
        unit: config.unit, 
        room: config.room, 
        keypad: config.keypad ?? 1 
      });
    }
  }, [config]);

  const handleChange = (field: keyof DeviceFormValues, value: string | number) => {
    setForm({ ...form, [field]: value });
  };

  const handleSave = async () => {
    await updateDevice(form);
  };

  return (
    <div className="section">
      <div className="container">
        <h1 className="title is-2">Device Configuration</h1>
        {error && <div className="notification is-danger">{error}</div>}
        
        <div className="columns">
          <div className="column is-one-quarter">
            <label className="label">Type</label>
            <div className="control has-icons-left">
              <input className="input" type="number" value={form.type} onChange={e => handleChange('type', Number(e.target.value))} min="0" />
              <span className="icon is-small is-left"><i className="fas fa-microchip"></i></span>
            </div>
          </div>

          <div className="column is-one-quarter">
            <label className="label">Serial Number</label>
            <div className="control has-icons-left">
              <input className="input" type="number" value={form.sn} onChange={e => handleChange('sn', Number(e.target.value))} min="0" />
              <span className="icon is-small is-left"><i className="fas fa-fingerprint"></i></span>
            </div>
          </div>

          <div className="column">
            <label className="label">Name</label>
            <div className="control has-icons-left">
              <input className="input" type="text" value={form.name} onChange={e => handleChange('name', e.target.value)} />
              <span className="icon is-small is-left"><i className="fas fa-tag"></i></span>
            </div>
          </div>
        </div>

        <div className="columns">
          <div className="column is-one-quarter">
            <label className="label">Unit</label>
            <div className="control has-icons-left">
              <input className="input" type="number" value={form.unit} onChange={e => handleChange('unit', Number(e.target.value))} min="1" />
              <span className="icon is-small is-left"><i className="fas fa-building"></i></span>
            </div>
          </div>

          <div className="column is-one-quarter">
            <label className="label">Room</label>
            <div className="control has-icons-left">
              <input className="input" type="text" value={form.room} onChange={e => handleChange('room', Number(e.target.value))} />
              <span className="icon is-small is-left"><i className="fas fa-door-open"></i></span>
            </div>
          </div>

          <div className="column is-one-quarter">
            <label className="label">Keypad</label>
            <div className="control has-icons-left">
              <input className="input" type="number" value={form.keypad || ''} onChange={e => handleChange('keypad', Number(e.target.value))} min="1" />
              <span className="icon is-small is-left"><i className="fas fa-keyboard"></i></span>
            </div>
          </div>
        </div>

        <button type="button" className="button is-success" onClick={handleSave} disabled={loading}>
          {loading ? 'Saving...' : 'Save Device Config'}
        </button>
      </div>
    </div>
  );
}