'use client'

import { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { FileText, Shield, Clock, Calendar, User } from 'lucide-react'
import { PolicyManagementClient } from '@/components/polices/policy-management-client'

interface Policy {
  id: number
  policyType: string
  locale: string
  version: string
  content: string
  effectiveDate: string
  isCurrent: boolean
  createdAt: string
}

interface PolicyPageClientProps {
  data: {
    currentPolicies: {
      ko: Record<string, Policy>
      en: Record<string, Policy>
    }
    allPolicies: {
      ko: {
        privacy_policy: Policy[]
        terms_of_service: Policy[]
      }
      en: {
        privacy_policy: Policy[]
        terms_of_service: Policy[]
      }
    }
    stats: {
      totalVersions: number
      koVersions: {
        privacy: number
        terms: number
      }
      enVersions: {
        privacy: number
        terms: number
      }
      lastUpdate: string | null
    }
  }
}

// 선택된 locale의 가장 최근 업데이트 날짜를 가져오는 함수
function getLastUpdateForLocale(data: PolicyPageClientProps['data'], locale: 'ko' | 'en'): string | null {
  const allPolicies = [
    ...(data.allPolicies[locale]?.privacy_policy || []),
    ...(data.allPolicies[locale]?.terms_of_service || [])
  ]
  
  if (allPolicies.length === 0) return null
  
  // 가장 최근 createdAt 날짜 찾기
  const sortedPolicies = allPolicies.sort((a, b) => 
    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  )
  
  return sortedPolicies[0]?.createdAt || null
}

export function PolicyPageClient({ data }: PolicyPageClientProps) {
  const [selectedLocale, setSelectedLocale] = useState<'ko' | 'en'>('ko')

  // 선택된 locale에 맞는 데이터 필터링
  const filteredData = {
    currentPolicies: {
      privacy_policy: data.currentPolicies[selectedLocale]?.privacy_policy || null,
      terms_of_service: data.currentPolicies[selectedLocale]?.terms_of_service || null
    },
    allPolicies: {
      privacy_policy: data.allPolicies[selectedLocale]?.privacy_policy || [],
      terms_of_service: data.allPolicies[selectedLocale]?.terms_of_service || []
    },
    stats: {
      totalVersions: data.stats[`${selectedLocale}Versions`].privacy + data.stats[`${selectedLocale}Versions`].terms,
      privacyVersions: data.stats[`${selectedLocale}Versions`].privacy,
      termsVersions: data.stats[`${selectedLocale}Versions`].terms,
      lastUpdate: getLastUpdateForLocale(data, selectedLocale)
    }
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">정책 관리</h2>
          <p className="text-muted-foreground">
            개인정보 처리방침과 이용약관을 버전별로 관리합니다
          </p>
        </div>
        
        {/* 전역 locale 토글 */}
        <div className="flex items-center gap-3">
          <div className="flex bg-muted rounded-lg p-1">
            <button 
              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${
                selectedLocale === 'ko' 
                  ? 'bg-background shadow-sm' 
                  : 'text-muted-foreground hover:text-foreground'
              }`}
              onClick={() => setSelectedLocale('ko')}
            >
              KO
            </button>
            <button 
              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${
                selectedLocale === 'en' 
                  ? 'bg-background shadow-sm' 
                  : 'text-muted-foreground hover:text-foreground'
              }`}
              onClick={() => setSelectedLocale('en')}
            >
             EN
            </button>
          </div>
        </div>
      </div>

      {/* 통계 카드들 */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">총 버전 수</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{filteredData.stats.totalVersions}</div>
            <p className="text-xs text-muted-foreground">
              전체 정책 버전
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">개인정보 정책</CardTitle>
            <Shield className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{filteredData.stats.privacyVersions}</div>
            <p className="text-xs text-muted-foreground">
              버전 수
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">이용약관</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{filteredData.stats.termsVersions}</div>
            <p className="text-xs text-muted-foreground">
              버전 수
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">최근 업데이트</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {filteredData.stats.lastUpdate 
                ? new Date(filteredData.stats.lastUpdate).toLocaleDateString('ko-KR').split('.').slice(1, 3).join('.')
                : 'N/A'
              }
            </div>
            <p className="text-xs text-muted-foreground">
              마지막 정책 변경
            </p>
          </CardContent>
        </Card>
      </div>

      {/* 현재 활성 정책들 */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              개인정보 처리방침
            </CardTitle>
            <CardDescription>
              {filteredData.currentPolicies.privacy_policy ? 
                `현재 활성 정책 • 시행일: ${new Date(filteredData.currentPolicies.privacy_policy.effectiveDate).toLocaleDateString('ko-KR')}` :
                `아직 등록된 ${selectedLocale === 'ko' ? '한국어' : '영어'} 개인정보 정책이 없습니다`
              }
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="text-sm">
                <strong>정책 내용 미리보기:</strong>
              </div>
              <div className="bg-muted/50 p-3 rounded-md text-sm max-h-32 overflow-hidden">
                <div className="line-clamp-4">
                  {filteredData.currentPolicies.privacy_policy ? 
                    filteredData.currentPolicies.privacy_policy.content?.replace(/#{1,6}\s+/g, '').replace(/\*\*(.*?)\*\*/g, '$1').substring(0, 200) + '...' :
                    `아직 등록된 ${selectedLocale === 'ko' ? '한국어' : '영어'} 개인정보 정책이 없습니다`
                  }
                </div>
              </div>
              
              {/* 메타 정보 */}
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <div className="flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  생성: {filteredData.currentPolicies.privacy_policy?.createdAt ? new Date(filteredData.currentPolicies.privacy_policy.createdAt).toLocaleDateString('ko-KR') : 'N/A'}
                </div>
                <div className="flex items-center gap-1">
                  <User className="h-3 w-3" />
                  관리자
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              이용약관
            </CardTitle>
            <CardDescription>
              {filteredData.currentPolicies.terms_of_service ? 
                `현재 활성 정책 • 시행일: ${new Date(filteredData.currentPolicies.terms_of_service.effectiveDate).toLocaleDateString('ko-KR')}` :
                `아직 등록된 ${selectedLocale === 'ko' ? '한국어' : '영어'} 이용약관이 없습니다`
              }
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="text-sm">
                <strong>정책 내용 미리보기:</strong>
              </div>
              <div className="bg-muted/50 p-3 rounded-md text-sm max-h-32 overflow-hidden">
                <div className="line-clamp-4">
                  {filteredData.currentPolicies.terms_of_service ? 
                    filteredData.currentPolicies.terms_of_service.content?.replace(/#{1,6}\s+/g, '').replace(/\*\*(.*?)\*\*/g, '$1').substring(0, 200) + '...' :
                    `아직 등록된 ${selectedLocale === 'ko' ? '한국어' : '영어'} 이용약관이 없습니다`
                  }
                </div>
              </div>
              
              {/* 메타 정보 */}
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <div className="flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  생성: {filteredData.currentPolicies.terms_of_service?.createdAt ? new Date(filteredData.currentPolicies.terms_of_service.createdAt).toLocaleDateString('ko-KR') : 'N/A'}
                </div>
                <div className="flex items-center gap-1">
                  <User className="h-3 w-3" />
                  관리자
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 정책 편집 부분 - 선택된 locale의 데이터만 표시 */}
      <PolicyManagementClient 
        key={selectedLocale} 
        initialData={filteredData} 
        currentLocale={selectedLocale} 
      />
    </div>
  )
}