import { useState } from 'react';
import type { AssetsTab } from './assetTypes';
import AssetManagement from './AssetManagement';
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, label: '자산 관리' },
            // { id: 'upload' as const, label: '자산 현행화 (업로드)' },
            { id: 'theory' as const, label: '방제자원 이론' },
            { id: 'insurance' as const, 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.label}
            </button>
          ))}
        </div>
        {/* <div
          className="flex items-center gap-1.5 px-3.5 py-1.5 border rounded-full text-label-2 text-color-info font-korean mr-4"
          style={{ borderColor: 'color-mix(in srgb, var(--color-info) 30%, transparent)' }}
        >
          👤 남해청_방제과 (수정 권한 ✅)
        </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>
  );
}