import React, { useState } from 'react';
import { Laptop, Smartphone, Monitor, Filter } from 'lucide-react';
import type { Device } from '../../types/index.js';

interface DeviceInventoryProps {
  devices?: Device[];
}

export const DeviceInventory: React.FC<DeviceInventoryProps> = ({
  devices = [],
}) => {
  const [typeFilter, setTypeFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');

  const filteredDevices = devices.filter(d => {
    const matchesType = typeFilter === 'all' || d.type === typeFilter;
    const matchesStatus = statusFilter === 'all' || d.status === statusFilter;
    return matchesType && matchesStatus;
  });

  const available = devices.filter(d => d.status === 'AVAILABLE').length;
  const assigned = devices.filter(d => d.status === 'ASSIGNED').length;
  const repair = devices.filter(d => d.status === 'REPAIR').length;

  const getDeviceIcon = (type: string) => {
    switch (type) {
      case 'LAPTOP':
        return <Laptop className="w-6 h-6" />;
      case 'PHONE':
      case 'TABLET':
        return <Smartphone className="w-6 h-6" />;
      case 'DESKTOP':
        return <Monitor className="w-6 h-6" />;
      default:
        return <Monitor className="w-6 h-6" />;
    }
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Device Inventory</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-green-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Available</p>
          <p className="text-3xl font-bold text-green-600">{available}</p>
        </div>
        
        <div className="bg-blue-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Assigned</p>
          <p className="text-3xl font-bold text-blue-600">{assigned}</p>
        </div>
        
        <div className="bg-orange-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">In Repair</p>
          <p className="text-3xl font-bold text-orange-600">{repair}</p>
        </div>
      </div>

      <div className="flex flex-col md:flex-row gap-4 mb-6">
        <div className="relative">
          <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className="pl-10 pr-8 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">All Types</option>
            <option value="LAPTOP">Laptop</option>
            <option value="DESKTOP">Desktop</option>
            <option value="PHONE">Phone</option>
            <option value="TABLET">Tablet</option>
            <option value="OTHER">Other</option>
          </select>
        </div>

        <div className="relative">
          <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="pl-10 pr-8 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">All Statuses</option>
            <option value="AVAILABLE">Available</option>
            <option value="ASSIGNED">Assigned</option>
            <option value="REPAIR">In Repair</option>
            <option value="RETIRED">Retired</option>
          </select>
        </div>
      </div>

      <div className="text-sm text-gray-600 mb-4">
        Showing {filteredDevices.length} of {devices.length} devices
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredDevices.map((device) => (
          <div key={device.id} className="border rounded-lg p-4 hover:shadow-md transition">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-center gap-2">
                {getDeviceIcon(device.type)}
                <div>
                  <h4 className="font-semibold">{device.make} {device.model}</h4>
                  <p className="text-xs text-gray-500">{device.type}</p>
                </div>
              </div>
              <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                device.status === 'AVAILABLE' ? 'bg-green-100 text-green-800' :
                device.status === 'ASSIGNED' ? 'bg-blue-100 text-blue-800' :
                device.status === 'REPAIR' ? 'bg-orange-100 text-orange-800' :
                'bg-gray-100 text-gray-800'
              }`}>
                {device.status}
              </span>
            </div>

            <div className="space-y-2 text-sm">
              {device.serialNumber && (
                <div>
                  <span className="text-gray-500">Serial: </span>
                  <span className="font-mono">{device.serialNumber}</span>
                </div>
              )}

              {device.assignedTo && (
                <div>
                  <span className="text-gray-500">Assigned to: </span>
                  <span className="font-medium">{device.assignedTo}</span>
                </div>
              )}

              {device.purchaseDate && (
                <div>
                  <span className="text-gray-500">Purchase: </span>
                  <span>{device.purchaseDate}</span>
                </div>
              )}

              {device.warrantyExpiration && (
                <div className={
                  new Date(device.warrantyExpiration) < new Date()
                    ? 'text-red-600'
                    : ''
                }>
                  <span className="text-gray-500">Warranty: </span>
                  <span>{device.warrantyExpiration}</span>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
