import { useState } from 'react'
import { mockHardwareSpecs, HardwareSpec } from '../data/mockData'

const SpecModal = ({ spec, onClose }: { spec: HardwareSpec, onClose: () => void }) => {
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center',
      zIndex: 1000
    }}>
      <div className="card" style={{ width: '600px', maxWidth: '90%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
          <h2>상세 사양 정보</h2>
          <button className="btn" onClick={onClose}>&times;</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '10px' }}>
          <strong>PC명:</strong> <span>{spec.pcName}</span>
          <strong>사용자:</strong> <span>{spec.userName}</span>
          <strong>부서:</strong> <span>{spec.department}</span>
          <strong>OS:</strong> <span>{spec.os}</span>
          <strong>CPU:</strong> <span>{spec.cpu}</span>
          <strong>Memory:</strong> <span>{spec.memory}</span>
          <strong>Disk:</strong> <span>{spec.disk}</span>
          <strong>MAC:</strong> <span>{spec.macAddress}</span>
          <strong>IP:</strong> <span>{spec.ipAddress}</span>
          <strong>Graphic:</strong> <span>{spec.graphicCard}</span>
        </div>
        <div style={{ marginTop: '20px', textAlign: 'right' }}>
          <button className="btn btn-primary" onClick={onClose}>닫기</button>
        </div>
      </div>
    </div>
  )
}

const HardwareManagementView = () => {
  const [selectedSpec, setSelectedSpec] = useState<HardwareSpec | null>(null)

  return (
    <div>
      <div className="content-header">
        <div className="content-title">H/W 사양 정보</div>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>PC명</th>
            <th>부서</th>
            <th>사용자</th>
            <th>OS</th>
            <th>CPU</th>
            <th>IP주소</th>
            <th>상세</th>
          </tr>
        </thead>
        <tbody>
          {mockHardwareSpecs.map(spec => (
            <tr key={spec.id}>
              <td>{spec.pcName}</td>
              <td>{spec.department}</td>
              <td>{spec.userName}</td>
              <td>{spec.os.split(' ')[2]}</td>
              <td title={spec.cpu}>{spec.cpu.split('@')[0]}</td>
              <td>{spec.ipAddress}</td>
              <td>
                <button 
                  className="btn btn-primary" 
                  style={{ padding: '4px 8px', fontSize: '0.8rem' }}
                  onClick={() => setSelectedSpec(spec)}
                >
                  보기
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {selectedSpec && (
        <SpecModal spec={selectedSpec} onClose={() => setSelectedSpec(null)} />
      )}
    </div>
  )
}

export default HardwareManagementView