import { useState } from 'react'
import { idcServers, idcStorages, IdcServer } from '../data/idcData'
import ServerDetailModal from './ServerDetailModal'

const AssetManagementView = () => {
  const [viewMode, setViewMode] = useState<'server' | 'storage'>('server')
  const [selectedServer, setSelectedServer] = useState<IdcServer | null>(null)

  return (
    <div className="asset-management" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div className="content-header">
        <div className="content-title">전산자산관리대장 (IDC)</div>
        <div style={{ display: 'flex', gap: '12px' }}>
          <button 
            className={`btn ${viewMode === 'server' ? 'btn-primary' : 'btn-outline'}`}
            onClick={() => setViewMode('server')}
          >
            서버 목록
          </button>
          <button 
            className={`btn ${viewMode === 'storage' ? 'btn-primary' : 'btn-outline'}`}
            onClick={() => setViewMode('storage')}
          >
            스토리지 목록
          </button>
        </div>
      </div>

      <div className="table-container">
        <div style={{ padding: '24px 0 16px 0' }}>
          <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: 'var(--primary-color)', margin: 0 }}>
            {viewMode === 'server' ? 'IDC 서버 상세 정보' : 'IDC 스토리지 상세 정보'}
          </h3>
        </div>
        
        {viewMode === 'server' ? (
          <table className="data-table">
            <thead>
              <tr>
                <th>회사</th>
                <th>서버번호</th>
                <th>구분</th>
                <th>설치위치</th>
                <th>관리자</th>
                <th>IP 주소</th>
                <th>접속 정보</th>
                <th>H/W 사양</th>
                <th>OS</th>
                <th>구매일</th>
              </tr>
            </thead>
            <tbody>
              {idcServers.map((server) => (
                <tr key={server.serverNo} onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
                  <td style={{ fontWeight: 600 }}>{server.company}</td>
                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{server.serverNo}</td>
                  <td>
                    <div>{server.category}</div>
                    {server.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.remarks}</div>}
                  </td>
                  <td>{server.location}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{server.managerPrimary ? `정: ${server.managerPrimary}` : '정: -'}</div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.managerSecondary ? `부: ${server.managerSecondary}` : '부: -'}</div>
                  </td>
                  <td>
                    <div>{server.ip1}</div>
                    {server.ip2 && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.ip2}</div>}
                  </td>
                  <td>
                    {server.remoteAccess.map((access, idx) => (
                      <div key={idx} style={{ 
                        marginBottom: idx < server.remoteAccess.length - 1 ? '8px' : 0,
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '2px'
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
                        </div>
                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
                        </div>
                      </div>
                    ))}
                  </td>
                  <td style={{ fontSize: '0.8125rem' }}>
                    <div style={{ fontWeight: 500 }}>{server.model}</div>
                    <div style={{ color: 'var(--text-muted)' }}>{server.cpu} / {server.ram}</div>
                    <div style={{ color: 'var(--text-muted)' }}>{server.storage.join(' + ')}</div>
                  </td>
                  <td style={{ fontSize: '0.8125rem' }}>{server.os}</td>
                  <td style={{ fontSize: '0.8125rem' }}>{server.purchaseDate}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <table className="data-table">
            <thead>
              <tr>
                <th>회사</th>
                <th>서버번호</th>
                <th>구분</th>
                <th>설치위치</th>
                <th>관리자</th>
                <th>IP 주소</th>
                <th>접속 정보</th>
                <th>모델명</th>
                <th>용량</th>
                <th>구매일</th>
              </tr>
            </thead>
            <tbody>
              {idcStorages.map((storage) => (
                <tr key={storage.serverNo}>
                  <td style={{ fontWeight: 600 }}>{storage.company}</td>
                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{storage.serverNo}</td>
                  <td>
                    <div>{storage.category}</div>
                    {storage.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{storage.remarks}</div>}
                  </td>
                  <td>{storage.location}</td>
                  <td>
                    <span style={{ fontWeight: 500 }}>정: {storage.managerPrimary}</span>
                    <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginLeft: '8px' }}>부: {storage.managerSecondary}</span>
                  </td>
                  <td>{storage.ip}</td>
                  <td>
                    {storage.remoteAccess.map((access, idx) => (
                      <div key={idx} style={{ 
                        marginBottom: idx < storage.remoteAccess.length - 1 ? '8px' : 0,
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '2px'
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
                        </div>
                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
                        </div>
                      </div>
                    ))}
                  </td>
                  <td>{storage.model}</td>
                  <td style={{ fontWeight: 600 }}>{storage.capacity}</td>
                  <td>{storage.purchaseDate}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {selectedServer && (
        <ServerDetailModal 
          server={selectedServer} 
          onClose={() => setSelectedServer(null)} 
        />
      )}
    </div>
  )
}

export default AssetManagementView