import { useEffect } from 'react'
import { useStore, wireEvents } from './store'
import { ProfileManager } from './components/ProfileManager'
import { FolderPicker } from './components/FolderPicker'
import { RunControl } from './components/RunControl'
import { ProgressView } from './components/ProgressView'
import { FileList } from './components/FileList'
import { ReportView } from './components/ReportView'

export default function App(): JSX.Element {
  const phase = useStore((s) => s.phase)
  const refreshProfiles = useStore((s) => s.refreshProfiles)

  useEffect(() => {
    const unwire = wireEvents()
    void refreshProfiles()
    return unwire
  }, [refreshProfiles])

  return (
    <div className="min-h-screen flex flex-col">
      <header className="px-6 py-4 bg-white border-b border-slate-200 shadow-sm">
        <h1 className="text-xl font-bold text-brand-dark">AI Photo Organizer</h1>
        <p className="text-sm text-slate-500">
          얼굴 인식 + 촬영일 기준 자동 사진 정리 · 로컬 전용
        </p>
      </header>

      <main className="flex-1 grid grid-cols-12 gap-4 p-6 overflow-hidden">
        {/* 좌측: 설정 패널 */}
        <section className="col-span-5 flex flex-col gap-4 overflow-y-auto pr-2">
          <ProfileManager />
          <FolderPicker />
          <RunControl />
        </section>

        {/* 우측: 진행/결과 */}
        <section className="col-span-7 flex flex-col gap-4 overflow-hidden">
          {phase === 'done' ? <ReportView /> : <ProgressView />}
          <FileList />
        </section>
      </main>
    </div>
  )
}