import { useState } from 'react';
import { useControl } from '@vis.gl/react-maplibre';
import { MapboxOverlay } from '@deck.gl/mapbox';
import 'maplibre-gl/dist/maplibre-gl.css';
import { DetectPanel } from './contents/DetectPanel';
import { ChangeDetectPanel } from './contents/ChangeDetectPanel';
import { AoiPanel } from './contents/AoiPanel';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function DeckGLOverlay({ layers }: { layers: any[] }) {
  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
  overlay.setProps({ layers });
  return null;
}

type WingAITab = 'detect' | 'change' | 'aoi';

const tabItems: { id: WingAITab; label: string; icon: string; desc: string }[] = [
  {
    id: 'detect',
    label: '객체 탐지',
    icon: '🎯',
    desc: '위성/드론 영상에서 선박·차량·시설물 자동 탐지 및 분류',
  },
  {
    id: 'change',
    label: '변화 감지',
    icon: '🔄',
    desc: '동일 지역 다시점 영상 비교 분석 (Before/After)',
  },
  {
    id: 'aoi',
    label: '연안자동감지',
    icon: '📍',
    desc: '연안 관심지역 등록 → 변화 자동 감지 및 알림',
  },
];

export function WingAI() {
  const [activeTab, setActiveTab] = useState<WingAITab>('detect');

  return (
    <div className="overflow-y-auto px-6 pt-1 pb-2">
      {/* 헤더 */}
      <div className="flex items-center gap-3 mb-4 h-9">
        <div className="flex items-center gap-2 shrink-0">
          <div
            className="w-7 h-7 rounded-md flex items-center justify-center text-body-2"
            style={{
              background: 'rgba(6,182,212,0.15)',
              border: '1px solid rgba(6,182,212,0.3)',
            }}
          >
            🤖
          </div>
          <div className="text-label-1 font-bold font-korean text-fg">AI 탐지/분석</div>
          {/* <span
            className="text-caption px-1.5 py-0.5 rounded font-bold"
            style={{
              background: 'color-mix(in srgb, var(--color-tertiary) 12%, transparent)',
              color: 'var(--color-tertiary)',
              border: '1px solid rgba(168,85,247,.25)',
            }}
          >
            WingAI
          </span> */}
        </div>
        <div className="flex gap-1 h-7">
          {tabItems.map((t) => (
            <button
              key={t.id}
              onClick={() => setActiveTab(t.id)}
              className="px-2.5 h-full rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
              style={
                activeTab === t.id
                  ? {
                      background: 'rgba(6,182,212,.08)',
                      borderColor: 'rgba(6,182,212,.3)',
                      color: 'var(--color-accent)',
                    }
                  : {
                      background: 'var(--bg-card)',
                      borderColor: 'var(--stroke-default)',
                      color: 'var(--fg-disabled)',
                    }
              }
            >
              {/* {t.icon} */}
              {t.label}
            </button>
          ))}
        </div>
      </div>

      {/* 탭 콘텐츠 */}
      {activeTab === 'detect' && <DetectPanel />}
      {activeTab === 'change' && <ChangeDetectPanel />}
      {activeTab === 'aoi' && <AoiPanel />}
    </div>
  );
}
