import { useState } from 'react'
import type { AssetsTab } from './assetTypes'
import AssetManagement from './AssetManagement'
import AssetUpload from './AssetUpload'
import AssetTheory from './AssetTheory'
import ShipInsurance from './ShipInsurance'
import { useFeatureTracking } from '@common/hooks/useFeatureTracking'

// ── Main AssetsView ──

export function AssetsView() {
  const [activeTab, setActiveTab] = useState<AssetsTab>('management')

  // 내부 탭 전환 시 자동 감사 로그
  useFeatureTracking(`assets:${activeTab}`)

  return (
    <div className="flex flex-col h-full w-full bg-bg-base">
      {/* Tab Navigation */}
      <div className="flex items-center justify-between border-b border-stroke bg-bg-surface shrink-0">
        <div className="flex">
          {([
            { id: 'management' as const, icon: '🗂', label: '자산 관리' },
            { id: 'upload' as const, icon: '📤', label: '자산 현행화 (업로드)' },
            { id: 'theory' as const, icon: '📚', label: '방제자원 이론' },
            { id: 'insurance' as const, icon: '🛡', label: '선박 보험정보' },
          ]).map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-5 py-3.5 text-xs font-semibold transition-all font-korean border-b-2 ${
                activeTab === tab.id
                  ? 'text-color-accent border-color-accent'
                  : 'text-fg-disabled border-transparent hover:text-fg-sub'
              }`}
            >
              {tab.icon} {tab.label}
            </button>
          ))}
        </div>
        <div className="flex items-center gap-1.5 px-3.5 py-1.5 border rounded-full text-[11px] text-color-info font-korean mr-4" style={{ borderColor: 'rgba(59,130,246,0.3)' }}>
          👤 남해청_방제과 (수정 권한 ✅)
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto px-6 py-5">
        <div className="w-full h-full">
          {activeTab === 'management' && <AssetManagement />}
          {activeTab === 'upload' && <AssetUpload />}
          {activeTab === 'theory' && <AssetTheory />}
          {activeTab === 'insurance' && <ShipInsurance />}
        </div>
      </div>
    </div>
  )
}