// src/renderer/components/OnboardingModal.tsx
// 첫 실행 온보딩 모달 — 사용 방식 선택 (로컬 Ollama 독립 모드 vs 온라인 클라우드 API)

import { useState, useEffect, useCallback } from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  LinearProgress,
  TextField,
  Tab,
  Tabs,
  Paper,
  Chip,
  Alert,
} from '@mui/material'
import {
  CheckCircle2,
  AlertCircle,
  Cloud,
  Download,
  Play,
  RefreshCw,
  ExternalLink,
  Cpu,
  Sparkles,
  ArrowRight,
  ShieldCheck,
} from 'lucide-react'
import { d3roPalette, d3roRadius, d3roShadow, typoSx, d3roFontMono, d3roFontSans } from '@d3ro/ui/theme'
import { Led } from '@d3ro/ui/components/ds'
import type { LLMModel, LLMStatus } from '@d3ro/core/types'

type Phase = 'select_mode' | 'local_ollama_setup' | 'online_auth' | 'success' | 'failed'

interface OnboardingModalProps {
  open: boolean
  onClose: () => void
}

export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.ReactElement {
  const [internalOpen, setInternalOpen] = useState(false)
  const [phase, setPhase] = useState<Phase>('select_mode')

  // Local Ollama State
  const [ollamaStatus, setOllamaStatus] = useState<LLMStatus | null>(null)
  const [installedModels, setInstalledModels] = useState<LLMModel[]>([])
  const [activeModel, setActiveModel] = useState<string>('gemma4:e4b')
  const [checkingOllama, setCheckingOllama] = useState(false)
  const [startingOllama, setStartingOllama] = useState(false)
  const [ollamaMsg, setOllamaMsg] = useState<string | null>(null)

  // Model download state
  const [pullingModel, setPullingModel] = useState<string | null>(null)
  const [pullProgress, setPullProgress] = useState({ status: '', percent: 0 })

  // Auth State
  const [authTab, setAuthTab] = useState<'login' | 'register'>('login')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [authError, setAuthError] = useState('')
  const [authLoading, setAuthLoading] = useState(false)

  // Error State
  const errorMsg = ''

  const isVisible = open || internalOpen

  const checkOllama = useCallback(async () => {
    setCheckingOllama(true)
    try {
      const res = await window.electronAPI.llm.checkConnection()
      if (res.success && res.data) {
        setInstalledModels(res.data.models)
      }
      const st = await window.electronAPI.llm.getStatus()
      if (st.success) {
        setOllamaStatus(st.data)
      }
    } finally {
      setCheckingOllama(false)
    }
  }, [])

  useEffect(() => {
    window.electronAPI.config.getAll().then((res) => {
      if (res.success && !res.data.onboardingCompleted) {
        setInternalOpen(true)
        setPhase('select_mode')
      }
    })
  }, [])

  useEffect(() => {
    if (!isVisible) return

    const unsubPull = window.electronAPI.llm.onPullProgress((e) => {
      setPullingModel(e.modelId)
      setPullProgress({ status: e.status, percent: e.percent })
      if (e.percent >= 100 || e.status === 'success') {
        setTimeout(() => {
          setPullingModel(null)
          checkOllama()
        }, 1200)
      }
    })

    const unsubStatus = window.electronAPI.llm.onStatusChanged((e) => {
      setOllamaStatus(e.status)
    })

    return () => {
      unsubPull()
      unsubStatus()
    }
  }, [isVisible, checkOllama])

  const handleSelectLocalMode = async () => {
    setPhase('local_ollama_setup')
    await window.electronAPI.config.set({ key: 'appUsageMode', value: 'local' })
    await window.electronAPI.config.set({ key: 'llmBackend', value: 'local' })
    await window.electronAPI.config.set({ key: 'sttProvider', value: 'local' })
    await checkOllama()
    // 자동으로 Ollama 기동 시도
    await window.electronAPI.llm.startServer()
    setTimeout(() => checkOllama(), 1500)
  }

  const handleStartOllama = async () => {
    setStartingOllama(true)
    setOllamaMsg(null)
    try {
      const res = await window.electronAPI.llm.startServer()
      if (res.success) {
        if (res.data === 'running') {
          setOllamaMsg('Ollama가 이미 실행 중입니다.')
        } else if (res.data === 'starting') {
          setOllamaMsg('Ollama 서버를 시작했습니다. 연결 확인 중...')
          setTimeout(() => checkOllama(), 2000)
        } else if (res.data === 'not-installed') {
          setOllamaMsg('Ollama가 설치되어 있지 않습니다. 다운로드 버튼을 눌러 설치해 주세요.')
        } else {
          setOllamaMsg('Ollama 실행에 실패했습니다. 수동으로 Ollama를 실행해 주세요.')
        }
      }
    } finally {
      setStartingOllama(false)
    }
  }

  const handlePullModel = async (modelId: string) => {
    setPullingModel(modelId)
    setPullProgress({ status: '다운로드 시작 중...', percent: 0 })
    try {
      await window.electronAPI.llm.pullModel({ modelId })
      await window.electronAPI.llm.setModel({ modelId })
      await window.electronAPI.config.set({ key: 'llmModelId', value: modelId })
      setActiveModel(modelId)
    } catch {
      setPullingModel(null)
    }
  }

  const handleCompleteLocalSetup = async () => {
    await window.electronAPI.config.set({ key: 'onboardingCompleted', value: true })
    setPhase('success')
  }

  const handleAuthSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setAuthError('')
    setAuthLoading(true)

    try {
      const res = authTab === 'login'
        ? await window.electronAPI.onlineAuth.login({ email, password })
        : await window.electronAPI.onlineAuth.register({ email, password })

      if (res.success) {
        await window.electronAPI.config.set({ key: 'appUsageMode', value: 'online' })
        await window.electronAPI.config.set({ key: 'llmBackend', value: 'online' })
        await window.electronAPI.config.set({ key: 'onboardingCompleted', value: true })
        setPhase('success')
      } else {
        setAuthError(res.error?.message ?? '인증에 실패하였습니다.')
      }
    } catch (err) {
      setAuthError(`오류: ${err instanceof Error ? err.message : String(err)}`)
    } finally {
      setAuthLoading(false)
    }
  }

  const handleClose = () => {
    setInternalOpen(false)
    onClose()
  }

  const isOllamaConnected = ollamaStatus?.connectionState === 'connected'
  const hasInstalledLlm = installedModels.length > 0

  if (!isVisible) return <></>

  return (
    <Dialog
      open={isVisible}
      onClose={() => {}}
      maxWidth="md"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: d3roRadius.card,
          backgroundColor: d3roPalette.bg.card,
          border: `1px solid ${d3roPalette.border.default}`,
          p: 1,
        },
      }}
    >
      <DialogTitle
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1.5,
          ...typoSx('heading'),
          color: d3roPalette.text.primary,
          borderBottom: `1px solid ${d3roPalette.border.subtle}`,
          pb: 1.5,
        }}
      >
        {phase === 'success' ? (
          <CheckCircle2 size={24} style={{ color: d3roPalette.tag.green }} />
        ) : phase === 'failed' ? (
          <AlertCircle size={24} style={{ color: d3roPalette.tag.red }} />
        ) : (
          <Sparkles size={24} style={{ color: d3roPalette.accent.main }} />
        )}
        D3RO Voice 시작 가이드
      </DialogTitle>

      <DialogContent sx={{ py: 3 }}>
        {/* ── 1. 사용 모드 선택 ── */}
        {phase === 'select_mode' && (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
            <Typography sx={{ ...typoSx('body'), color: d3roPalette.text.secondary }}>
              D3RO Voice를 어떤 환경으로 사용하시겠습니까? 언제든지 환경설정에서 변경할 수 있습니다.
            </Typography>

            <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
              {/* 로컬 AI 독립 모드 (강력 권장) */}
              <Paper
                elevation={0}
                onClick={handleSelectLocalMode}
                sx={{
                  p: 2.5,
                  cursor: 'pointer',
                  borderRadius: d3roRadius.card,
                  bgcolor: d3roPalette.bg.elevated,
                  border: `2px solid ${d3roPalette.accent.main}`,
                  transition: 'all 150ms ease-out',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  '&:hover': {
                    bgcolor: d3roPalette.bg.inset,
                    transform: 'translateY(-2px)',
                    boxShadow: d3roShadow.dialog,
                  },
                }}
              >
                <Box>
                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <Cpu size={22} color={d3roPalette.accent.main} />
                      <Typography sx={{ fontWeight: 600, fontSize: '15px', color: d3roPalette.text.primary }}>
                        로컬 AI 모드
                      </Typography>
                    </Box>
                    <Chip label="100% 무료 / 강력 추천" size="small" sx={{ fontWeight: 500, fontSize: '10px', height: 20, bgcolor: d3roPalette.tag.greenBg, color: d3roPalette.tag.green }} />
                  </Box>
                  <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary, mb: 2, lineHeight: 1.5 }}>
                    <b>Ollama</b>와 로컬 <b>Whisper STT</b>를 사용하여 PC 내부에서 완전히 독립 실행됩니다.
                  </Typography>

                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
                    {[
                      '인터넷 연결 없이 오프라인 작동',
                      '음성/텍스트 데이터 외부 유출 제로 (완벽한 보안)',
                      'API 비용 없이 무제한 전사 및 AI 다듬기',
                    ].map((item) => (
                      <Box key={item} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <ShieldCheck size={14} color={d3roPalette.tag.green} />
                        <Typography sx={{ fontSize: '11px', color: d3roPalette.text.primary }}>
                          {item}
                        </Typography>
                      </Box>
                    ))}
                  </Box>
                </Box>

                <Button
                  variant="contained"
                  fullWidth
                  endIcon={<ArrowRight size={14} />}
                  sx={{
                    mt: 2.5,
                    fontFamily: d3roFontSans,
                    fontWeight: 500,
                    bgcolor: d3roPalette.accent.main,
                    color: d3roPalette.bg.app,
                    '&:hover': { bgcolor: d3roPalette.accent.light },
                  }}
                >
                  로컬 AI 모드로 시작
                </Button>
              </Paper>

              {/* 온라인 클라우드 모드 */}
              <Paper
                elevation={0}
                onClick={() => setPhase('online_auth')}
                sx={{
                  p: 2.5,
                  cursor: 'pointer',
                  borderRadius: d3roRadius.card,
                  bgcolor: d3roPalette.bg.inset,
                  border: `1px solid ${d3roPalette.border.default}`,
                  transition: 'all 150ms ease-out',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  '&:hover': {
                    bgcolor: d3roPalette.bg.elevated,
                    borderColor: d3roPalette.border.subtle,
                  },
                }}
              >
                <Box>
                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <Cloud size={22} color={d3roPalette.tag.blue} />
                      <Typography sx={{ fontWeight: 600, fontSize: '15px', color: d3roPalette.text.primary }}>
                        온라인 클라우드 모드
                      </Typography>
                    </Box>
                    <Chip label="계정 로그인" size="small" sx={{ fontSize: '10px', height: 20 }} />
                  </Box>
                  <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary, mb: 2, lineHeight: 1.5 }}>
                    클라우드 서버 계정으로 로그인하여 AI 음성인식 및 고급 모델을 사용합니다.
                  </Typography>

                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
                    {[
                      '로컬 모델 설치 불필요 (저사양 PC용)',
                      '클라우드 동기화 및 다중 기기 연동',
                      'D3RO 계정 로그인 필요',
                    ].map((item) => (
                      <Box key={item} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <CheckCircle2 size={14} color={d3roPalette.tag.blue} />
                        <Typography sx={{ fontSize: '11px', color: d3roPalette.text.primary }}>
                          {item}
                        </Typography>
                      </Box>
                    ))}
                  </Box>
                </Box>

                <Button
                  variant="outlined"
                  fullWidth
                  endIcon={<ArrowRight size={14} />}
                  sx={{
                    mt: 2.5,
                    fontFamily: d3roFontSans,
                    borderColor: d3roPalette.border.default,
                    color: d3roPalette.text.primary,
                  }}
                >
                  온라인 계정 로그인
                </Button>
              </Paper>
            </Box>
          </Box>
        )}

        {/* ── 2. 로컬 Ollama 온보딩 스텝 ── */}
        {phase === 'local_ollama_setup' && (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
            {/* 연결 상태 박스 */}
            <Paper
              elevation={0}
              sx={{
                p: 2,
                bgcolor: d3roPalette.bg.inset,
                border: `1px solid ${isOllamaConnected ? d3roPalette.tag.green : d3roPalette.tag.orange}`,
                borderRadius: d3roRadius.small,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                <Led color={isOllamaConnected ? 'green' : 'amber'} pulse={!isOllamaConnected} size={9} />
                <Box>
                  <Typography sx={{ fontWeight: 500, fontSize: '13px', color: isOllamaConnected ? d3roPalette.tag.green : d3roPalette.tag.orange }}>
                    {isOllamaConnected
                      ? `Ollama 로컬 엔진 연결 완료 ${ollamaStatus?.serverVersion ? `(v${ollamaStatus.serverVersion})` : ''}`
                      : 'Ollama 로컬 엔진 확인 필요'}
                  </Typography>
                  <Typography sx={{ fontSize: '11px', color: d3roPalette.text.secondary }}>
                    {isOllamaConnected
                      ? `설치된 모델: ${installedModels.length}개 | 활성 모델: ${activeModel}`
                      : 'Ollama가 실행되어 있지 않거나 설치되지 않았습니다.'}
                  </Typography>
                </Box>
              </Box>

              <Box sx={{ display: 'flex', gap: 1 }}>
                <Button
                  size="small"
                  variant="outlined"
                  startIcon={<RefreshCw size={13} className={checkingOllama ? 'animate-spin' : ''} />}
                  onClick={checkOllama}
                  disabled={checkingOllama}
                  sx={{ fontSize: '11px' }}
                >
                  연결 재확인
                </Button>
                {!isOllamaConnected && (
                  <Button
                    size="small"
                    variant="contained"
                    startIcon={<Play size={13} />}
                    onClick={handleStartOllama}
                    disabled={startingOllama}
                    sx={{ fontSize: '11px', bgcolor: d3roPalette.accent.main, color: d3roPalette.bg.app, fontWeight: 500 }}
                  >
                    Ollama 자동 실행
                  </Button>
                )}
              </Box>
            </Paper>

            {ollamaMsg && (
              <Alert severity={isOllamaConnected ? 'success' : 'info'} sx={{ py: 0.5 }}>
                {ollamaMsg}
              </Alert>
            )}

            {/* Ollama 미설치 시 가이드 */}
            {!isOllamaConnected && (
              <Box sx={{ p: 2, bgcolor: d3roPalette.bg.elevated, borderRadius: d3roRadius.small, border: `1px solid ${d3roPalette.border.subtle}` }}>
                <Typography sx={{ fontWeight: 500, fontSize: '13px', mb: 1, color: d3roPalette.accent.main }}>
                  Ollama가 아직 설치되어 있지 않다면:
                </Typography>
                <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary, mb: 1.5 }}>
                  1. 아래 버튼을 눌러 공식 웹사이트에서 Ollama를 다운로드하여 설치해 주세요.<br />
                  2. 설치 후 '연결 재확인' 버튼을 누르면 D3RO Voice가 자동으로 감지합니다.
                </Typography>
                <Button
                  variant="outlined"
                  size="small"
                  endIcon={<ExternalLink size={14} />}
                  onClick={() => window.electronAPI.system.openExternal({ url: 'https://ollama.com/download' })}
                  sx={{ fontFamily: d3roFontMono, fontSize: '11px', borderColor: d3roPalette.accent.main, color: d3roPalette.accent.light }}
                >
                  ollama.com/download 열기
                </Button>
              </Box>
            )}

            {/* 추천 모델 설치 섹션 */}
            <Box>
              <Typography sx={{ fontWeight: 500, fontSize: '13px', mb: 1, color: d3roPalette.text.primary }}>
                기본 한국어 AI 모델 설치 (Gemma 2 2B)
              </Typography>
              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary, mb: 1.5 }}>
                텍스트 정제, 요약, 번역에 최적화된 초경량 모델입니다. (크기: 약 1.6GB)
              </Typography>

              {pullingModel ? (
                <Box sx={{ p: 2, bgcolor: d3roPalette.bg.inset, borderRadius: d3roRadius.small }}>
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                    <Typography sx={{ fontSize: '12px', color: d3roPalette.accent.light }}>
                      {pullProgress.status || '모델 다운로드 중...'}
                    </Typography>
                    <Typography sx={{ fontSize: '12px', fontFamily: d3roFontMono, color: d3roPalette.text.primary }}>
                      {pullProgress.percent}%
                    </Typography>
                  </Box>
                  <LinearProgress variant="determinate" value={pullProgress.percent} sx={{ height: 6, borderRadius: 3 }} />
                </Box>
              ) : (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                  <Button
                    variant="contained"
                    startIcon={<Download size={14} />}
                    onClick={() => handlePullModel('gemma4:e4b')}
                    disabled={!isOllamaConnected}
                    sx={{
                      fontWeight: 500,
                      bgcolor: d3roPalette.accent.main,
                      color: d3roPalette.bg.app,
                      '&:hover': { bgcolor: d3roPalette.accent.light },
                    }}
                  >
                    {hasInstalledLlm ? 'Gemma 2 (2B) 추가 다운로드' : 'Gemma 2 (2B) 1-클릭 다운로드'}
                  </Button>

                  {hasInstalledLlm && (
                    <Typography sx={{ fontSize: '12px', color: d3roPalette.tag.green, display: 'flex', alignItems: 'center', gap: 0.5 }}>
                      <CheckCircle2 size={15} /> 이미 로컬 AI 모델이 준비되어 있습니다.
                    </Typography>
                  )}
                </Box>
              )}
            </Box>

            <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: 1, borderTop: `1px solid ${d3roPalette.border.subtle}` }}>
              <Button variant="text" size="small" onClick={() => setPhase('select_mode')}>
                뒤로 가기
              </Button>
              <Button
                variant="contained"
                onClick={handleCompleteLocalSetup}
                disabled={!isOllamaConnected}
                sx={{ fontWeight: 500 }}
              >
                설정 완료 및 시작하기
              </Button>
            </Box>
          </Box>
        )}

        {/* ── 3. 온라인 계정 인증 ── */}
        {phase === 'online_auth' && (
          <Box component="form" onSubmit={handleAuthSubmit}>
            <Typography sx={{ ...typoSx('body'), color: d3roPalette.text.secondary, mb: 2 }}>
              온라인 서비스를 이용하기 위해 D3RO 계정으로 로그인해 주세요.
            </Typography>

            <Tabs
              value={authTab}
              onChange={(_, v) => setAuthTab(v)}
              sx={{ mb: 2, borderBottom: `1px solid ${d3roPalette.border.subtle}` }}
            >
              <Tab label="로그인" value="login" />
              <Tab label="회원가입" value="register" />
            </Tabs>

            {authError && (
              <Typography sx={{ color: d3roPalette.tag.red, mb: 2, ...typoSx('small') }}>
                {authError}
              </Typography>
            )}

            <TextField
              fullWidth
              label="이메일 주소"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              sx={{ mb: 2 }}
            />
            <TextField
              fullWidth
              label="비밀번호"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              sx={{ mb: 3 }}
            />

            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button variant="text" onClick={() => setPhase('select_mode')}>
                뒤로 가기
              </Button>
              <Button type="submit" variant="contained" disabled={authLoading}>
                {authLoading ? '처리 중...' : authTab === 'login' ? '로그인 완료' : '회원가입 완료'}
              </Button>
            </Box>
          </Box>
        )}

        {/* ── 4. 설정 완료 ── */}
        {phase === 'success' && (
          <Box sx={{ textAlign: 'center', py: 3 }}>
            <CheckCircle2 size={48} style={{ color: d3roPalette.tag.green, margin: '0 auto 16px' }} />
            <Typography sx={{ ...typoSx('heading'), color: d3roPalette.tag.green, mb: 1, fontSize: '18px' }}>
              D3RO Voice 설정이 완료되었습니다!
            </Typography>
            <Typography sx={{ ...typoSx('body'), color: d3roPalette.text.secondary, maxWidth: 440, mx: 'auto' }}>
              언제든지 우측 상단 <b>설정</b>에서 STT 공급자 및 Ollama 모델을 변경할 수 있습니다.
            </Typography>
          </Box>
        )}

        {phase === 'failed' && (
          <Box sx={{ py: 2 }}>
            <Typography sx={{ ...typoSx('body'), color: d3roPalette.tag.red, mb: 2 }}>
              설정 중 오류가 발생했습니다: {errorMsg}
            </Typography>
            <Button variant="contained" onClick={() => setPhase('select_mode')}>
              다시 시도
            </Button>
          </Box>
        )}
      </DialogContent>

      {phase === 'success' && (
        <DialogActions sx={{ px: 3, pb: 2 }}>
          <Button variant="contained" onClick={handleClose} fullWidth sx={{ py: 1.2, fontWeight: 500 }}>
            D3RO Voice 시작하기
          </Button>
        </DialogActions>
      )}
    </Dialog>
  )
}