import { useState, useEffect, useCallback } from 'react'
import { useParams, useLocation } from 'react-router-dom'
import { AppShell } from '../components/layout/AppShell'
import { Badge } from '../components/ui/Badge'
import { ActivityFeed, type ActivityEntry } from '../components/shared/ActivityFeed'
import { MemberList, type Member } from '../components/shared/MemberList'
import { useI18n } from '../i18n/useI18n'
import { useAuth } from '../hooks/useAuth'
import { api } from '../api/client'

interface Project {
  id: string
  name: string
  description: string
  status: string
  member_count: number
  created_by: string
  created_at: string
}

type Tab = 'overview' | 'members' | 'activity'

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

export function ProjectDetail() {
  const { id } = useParams<{ id: string }>()
  const { t } = useI18n()
  const { user } = useAuth()
  const location = useLocation()

  // URL 경로에 따라 초기 탭 결정
  const getInitialTab = (): Tab => {
    if (location.pathname.endsWith('/members')) return 'members'
    if (location.pathname.endsWith('/activity')) return 'activity'
    return 'overview'
  }

  const [project, setProject] = useState<Project | null>(null)
  const [projectLoading, setProjectLoading] = useState(true)

  const [tab, setTab] = useState<Tab>(getInitialTab)

  const [members, setMembers] = useState<Member[]>([])
  const [membersLoading, setMembersLoading] = useState(false)

  const [activities, setActivities] = useState<ActivityEntry[]>([])
  const [activitiesLoading, setActivitiesLoading] = useState(false)

  const [recentActivities, setRecentActivities] = useState<ActivityEntry[]>([])
  const [projectSummary, setProjectSummary] = useState<string | null>(null)

  const fetchProject = useCallback(async () => {
    if (!id) return
    setProjectLoading(true)
    try {
      const data = await api<Project>(`/api/v1/projects/${id}`)
      setProject(data)
    } catch {
      setProject(null)
    } finally {
      setProjectLoading(false)
    }
  }, [id])

  const fetchMembers = useCallback(async () => {
    if (!id) return
    setMembersLoading(true)
    try {
      const data = await api<Member[]>(`/api/v1/projects/${id}/members`)
      setMembers(data)
    } catch {
      setMembers([])
    } finally {
      setMembersLoading(false)
    }
  }, [id])

  const fetchActivities = useCallback(async () => {
    if (!id) return
    setActivitiesLoading(true)
    try {
      const resp = await api<{items: ActivityEntry[]}>(`/api/v1/projects/${id}/activities`)
      setActivities(resp.items)
    } catch {
      setActivities([])
    } finally {
      setActivitiesLoading(false)
    }
  }, [id])

  const fetchRecentActivities = useCallback(async () => {
    if (!id) return
    try {
      const resp = await api<{items: ActivityEntry[]}>(`/api/v1/projects/${id}/activities?per_page=10`)
      setRecentActivities(resp.items)
    } catch {
      setRecentActivities([])
    }
  }, [id])

  useEffect(() => {
    setTab(getInitialTab())
  }, [location.pathname])

  const fetchProjectSummary = useCallback(async () => {
    if (!id) return
    try {
      const data = await api<{ world_summary: string | null }>(`/api/v1/projects/${id}/style-rules`)
      setProjectSummary(data.world_summary)
    } catch { /* ignore */ }
  }, [id])

  useEffect(() => {
    fetchProject()
    fetchRecentActivities()
    fetchProjectSummary()
  }, [fetchProject, fetchRecentActivities, fetchProjectSummary])

  useEffect(() => {
    if (tab === 'members') fetchMembers()
    if (tab === 'activity') fetchActivities()
  }, [tab, fetchMembers, fetchActivities])

  const currentMember = members.find((m) => m.user_id === user?.id)
  const canManage = user?.role === 'admin' || currentMember?.role === 'owner'

  const handleAddMember = async (userId: string, role: string) => {
    await api(`/api/v1/projects/${id}/members`, {
      method: 'POST',
      body: JSON.stringify({ user_id: userId, role }),
    })
    await fetchMembers()
  }

  const handleRemoveMember = async (userId: string) => {
    await api(`/api/v1/projects/${id}/members/${userId}`, { method: 'DELETE' })
    await fetchMembers()
  }

  const handleRoleChange = async (userId: string, role: string) => {
    await api(`/api/v1/projects/${id}/members/${userId}`, {
      method: 'PATCH',
      body: JSON.stringify({ role }),
    })
    await fetchMembers()
  }

  const statusLabel = (status: string) => {
    const map: Record<string, string> = {
      active: t('project.status.active'),
      archived: t('project.status.archived'),
      deleted: t('project.status.deleted'),
    }
    return map[status] ?? status
  }

  if (projectLoading) {
    return (
      <AppShell title={t('common.loading')} projectId={id}>
        <div className="empty-state">{t('common.loading')}</div>
      </AppShell>
    )
  }

  if (!project) {
    return (
      <AppShell title="프로젝트 없음" projectId={id}>
        <div className="empty-state">프로젝트를 찾을 수 없습니다</div>
      </AppShell>
    )
  }

  return (
    <AppShell title={project.name} projectId={id}>
      <div className="page">
        {/* Project header */}
        <div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: '22px', fontWeight: 700, marginBottom: '6px' }}>
            {project.name}
          </h2>
          {project.description && (
            <p style={{ color: 'var(--text-muted)', fontSize: '14px' }}>{project.description}</p>
          )}
        </div>

        {/* Tabs */}
        <div className="tab-bar">
          <button
            className={`tab${tab === 'overview' ? ' active' : ''}`}
            onClick={() => setTab('overview')}
          >
            {t('project.overview')}
          </button>
          <button
            className={`tab${tab === 'members' ? ' active' : ''}`}
            onClick={() => setTab('members')}
          >
            {t('project.members')}
          </button>
          <button
            className={`tab${tab === 'activity' ? ' active' : ''}`}
            onClick={() => setTab('activity')}
          >
            {t('project.activity')}
          </button>
        </div>

        {/* Tab content */}
        {tab === 'overview' && (
          <div style={{ display: 'grid', gap: '20px' }}>
            {/* Info bar */}
            <div className="info-bar">
              <div className="info-item">
                <span className="info-label">{t('project.status')}</span>
                <span className="info-value">
                  <Badge label={statusLabel(project.status)} status={project.status} />
                </span>
              </div>
              <div className="info-item">
                <span className="info-label">{t('project.member_count')}</span>
                <span className="info-value">{project.member_count}</span>
              </div>
              <div className="info-item">
                <span className="info-label">{t('project.created_by')}</span>
                <span className="info-value">{project.created_by}</span>
              </div>
              <div className="info-item">
                <span className="info-label">{t('dashboard.created_at')}</span>
                <span className="info-value">{formatDate(project.created_at)}</span>
              </div>
            </div>

            {/* 프로젝트 요약 */}
            {projectSummary && (
              <div className="card" style={{ padding: '16px 20px' }}>
                <span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                  프로젝트 요약
                </span>
                <div style={{ fontSize: '13px', color: 'var(--text-muted)', lineHeight: 1.7, marginTop: '6px' }}>
                  {projectSummary}
                </div>
              </div>
            )}

            {/* Recent activity */}
            <div className="card">
              <div className="card-header">
                <h2>{t('project.recent_activity')}</h2>
              </div>
              <ActivityFeed activities={recentActivities} loading={false} />
            </div>
          </div>
        )}

        {tab === 'members' && (
          <div className="card">
            <MemberList
              members={membersLoading ? [] : members}
              canManage={canManage}
              currentUserId={user?.id}
              onAdd={handleAddMember}
              onRemove={handleRemoveMember}
              onRoleChange={handleRoleChange}
            />
            {membersLoading && <div className="empty-state">{t('common.loading')}</div>}
          </div>
        )}

        {tab === 'activity' && (
          <div className="card">
            <ActivityFeed activities={activities} loading={activitiesLoading} />
          </div>
        )}
      </div>
    </AppShell>
  )
}