import React, { useState, useEffect } from 'react';
import { Monitor, Smartphone, Tablet } from 'lucide-react';

export default function DeviceManager() {
  const [devices, setDevices] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

  const fetchDevices = async () => {
    setLoading(true);
    try {
      const result = await window.mcp.callTool('clover_list_devices', {});
      setDevices(result.devices || []);
    } catch (error) {
      console.error('Failed to fetch devices:', error);
    } finally {
      setLoading(false);
    }
  };

  const getDeviceIcon = (model: string) => {
    if (model.includes('Station')) return <Monitor className="w-8 h-8 text-blue-600" />;
    if (model.includes('Mobile')) return <Smartphone className="w-8 h-8 text-green-600" />;
    return <Tablet className="w-8 h-8 text-purple-600" />;
  };

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-900 mb-6">Device Manager</h1>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Loading devices...</div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {devices.map((device) => (
            <div key={device.id} className="bg-white rounded-lg shadow p-6">
              <div className="flex items-start gap-4 mb-4">
                {getDeviceIcon(device.model)}
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-gray-900">
                    {device.productName || device.model}
                  </h3>
                  <p className="text-sm text-gray-600">Serial: {device.serial}</p>
                  <p className="text-sm text-gray-600">Model: {device.model}</p>
                </div>
              </div>

              {device.terminalPrefix && (
                <div className="mt-3 pt-3 border-t border-gray-200">
                  <p className="text-sm text-gray-600">
                    Terminal: {device.terminalPrefix}
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
