import { useState, useEffect } from 'react'
import { HashRouter, Routes, Route, Link } from 'react-router-dom'

const API_BASE = 'https://glowstudio-api.up.railway.app/api'  // Railway URL

function formatCount(n: number): string {
  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'
  if (n >= 1000) return (n / 1000).toFixed(1) + 'K'
  return n.toString()
}

interface Video {
  id: string
  text: string
  authorMeta: { name: string }
  videoMeta: { duration: number }
  playCount: number
  diggCount: number
}

// Home Page
function Home() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', background: '#FDFBF7', minHeight: '100vh' }}>
      {/* Hero */}
      <div style={{ textAlign: 'center', padding: '100px 20px 60px', background: 'linear-gradient(135deg, #F4A261, #E76F51)', color: 'white' }}>
        <div style={{ display: 'inline-block', padding: '4px 14px', background: 'white', color: '#E76F51', borderRadius: 9999, fontSize: 12, fontWeight: 700, marginBottom: 20 }}>AI 기반 K-뷰티 콘텐츠 운영체제</div>
        <h1 style={{ fontSize: 42, marginBottom: 16 }}>북미에서 먹히는<br/>K-뷰티 콘텐츠를<br/>만드세요</h1>
        <p style={{ fontSize: 16, opacity: 0.9, maxWidth: 500, margin: '0 auto 30px' }}>TikTok 트렌드 분석, AI 스크립트 생성, Gen Z 톤 변환까지</p>
        <Link to="/discover" style={{ display: 'inline-block', padding: '14px 32px', background: 'white', color: '#E76F51', borderRadius: 9999, textDecoration: 'none', fontWeight: 600 }}>묣으로 시작하기 →</Link>
      </div>

      {/* Features */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '60px 20px' }}>
        <h2 style={{ textAlign: 'center', fontSize: 28, marginBottom: 40 }}>5가지 핵심 기능</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 24 }}>
          {[
            { emoji: '🔍', title: '디스커버', desc: '북미 트렌딩 콘텐츠 실시간 탐색' },
            { emoji: '✍️', title: '생성', desc: 'AI 스크립트 3분 완성' },
            { emoji: '📊', title: '분석', desc: '조회수와 전환율 동시 분석' },
            { emoji: '🚀', title: '성장', desc: '브랜드 매칭으로 수익화' },
            { emoji: '📦', title: '제품 허브', desc: '제품 링크 → 촬영 분석' },
          ].map(f => (
            <div key={f.title} style={{ background: '#FAFAF8', border: '1px solid #e5e5e5', borderRadius: 16, padding: 24 }}>
              <div style={{ fontSize: 32, marginBottom: 12 }}>{f.emoji}</div>
              <h3 style={{ fontSize: 18, marginBottom: 8 }}>{f.title}</h3>
              <p style={{ fontSize: 14, color: '#64748B' }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// Discover Page - TikTok Search
function Discover() {
  const [query, setQuery] = useState('kbeauty')
  const [videos, setVideos] = useState<Video[]>([])
  const [loading, setLoading] = useState(false)
  const [apiConnected, setApiConnected] = useState(false)

  useEffect(() => {
    // Check API health
    fetch(`${API_BASE}/health`)
      .then(r => r.ok && setApiConnected(true))
      .catch(() => {})
    
    // Initial load
    search()
  }, [])

  async function search() {
    setLoading(true)
    try {
      const res = await fetch(`${API_BASE}/tiktok/search`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ hashtag: query.replace(/^#/, ''), limit: 12 }),
      })
      if (!res.ok) throw new Error('API failed')
      const data = await res.json()
      setVideos(data.videos || [])
    } catch {
      // Mock fallback
      setVideos([
        { id: '1', text: '이 선크림 진짜 미쳤어요 🔥', authorMeta: { name: 'glow_creator' }, videoMeta: { duration: 32 }, playCount: 2400000, diggCount: 180000 },
        { id: '2', text: 'GRWM: 아침 스킨케어 루틴 ✨', authorMeta: { name: 'skincare_guru' }, videoMeta: { duration: 65 }, playCount: 1800000, diggCount: 120000 },
        { id: '3', text: '$10으로 만드는 글래스 스킨', authorMeta: { name: 'beauty_by_jen' }, videoMeta: { duration: 45 }, playCount: 3200000, diggCount: 240000 },
        { id: '4', text: 'POV: 한국 앰플 처음 써봤을 때', authorMeta: { name: 'kbeauty_lover' }, videoMeta: { duration: 28 }, playCount: 890000, diggCount: 67000 },
        { id: '5', text: '30일 챌린지 결과 | 피부 변화', authorMeta: { name: 'glowwithme' }, videoMeta: { duration: 52 }, playCount: 1500000, diggCount: 98000 },
        { id: '6', text: '이 제품이 내 인생을 바꿨어요', authorMeta: { name: 'skinroutine' }, videoMeta: { duration: 38 }, playCount: 4100000, diggCount: 320000 },
      ])
    }
    setLoading(false)
  }

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', background: '#FDFBF7', minHeight: '100vh', padding: '40px 20px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 30 }}>
          <Link to="/" style={{ fontSize: 20, fontWeight: 700, background: 'linear-gradient(135deg, #F4A261, #E76F51)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', textDecoration: 'none' }}>GLOWSTUDIO AI</Link>
          <span style={{ color: '#64748B' }}>›</span>
          <span style={{ fontWeight: 600 }}>디스커버</span>
          <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 14px', borderRadius: 9999, fontSize: 12, fontWeight: 600, background: apiConnected ? '#ecfdf5' : '#fef2f2', color: apiConnected ? '#166534' : '#991b1b' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: apiConnected ? '#22c55e' : '#ef4444', display: 'inline-block' }}></span>
            {apiConnected ? 'TikTok 실시간 연동' : '샘플 데이터'}
          </span>
        </div>

        {/* Search */}
        <div style={{ display: 'flex', gap: 10, maxWidth: 600, margin: '0 auto 30px' }}>
          <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && search()}
            placeholder="#kbeauty, #grwm, #skincare"
            style={{ flex: 1, padding: '14px 20px', border: '2px solid #e5e5e5', borderRadius: 9999, fontSize: 16, outline: 'none' }}
          />
          <button onClick={search} style={{ padding: '14px 28px', background: 'linear-gradient(135deg, #F4A261, #E76F51)', color: 'white', border: 'none', borderRadius: 9999, fontWeight: 600, cursor: 'pointer' }}>
            검색
          </button>
        </div>

        {/* Loading */}
        {loading && <div style={{ textAlign: 'center', padding: 40, color: '#64748B' }}>검색 중...</div>}

        {/* Videos */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 16 }}>
          {videos.map(v => (
            <div key={v.id} style={{ background: '#FAFAF8', borderRadius: 12, overflow: 'hidden', border: '1px solid #e5e5e5', cursor: 'pointer' }}>
              <div style={{ aspectRatio: '9/16', background: 'linear-gradient(135deg, #F4A26120, #E76F5120)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 40 }}>▶️</div>
              <div style={{ padding: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.text}</div>
                <div style={{ fontSize: 11, color: '#64748B', marginTop: 4 }}>@{v.authorMeta.name} • {Math.floor(v.videoMeta.duration / 60)}:{(v.videoMeta.duration % 60).toString().padStart(2, '0')}</div>
                <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>👁 {formatCount(v.playCount)} • ❤️ {formatCount(v.diggCount)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// App
function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/discover" element={<Discover />} />
      </Routes>
    </HashRouter>
  )
}

export default App