'use client'

import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { 
  Plus, 
  Edit, 
  Eye, 
  History, 
  Save, 
  X, 
  Shield, 
  FileText, 
  Calendar,
  Clock,
  CheckCircle2,
  AlertCircle,
  Loader2
} from 'lucide-react'
import { PolicyEditor } from './policy-editor'
import { PolicyPreview } from './policy-preview'
import { PolicyHistory } from './policy-history'
import { useToast } from "@/hooks/use-toast";
import { activatePolicyVersion, createPolicyVersion, getPolicyHistory } from '@/lib/polices/service'
import { useRouter } from "next/navigation"

interface PolicyManagementClientProps {
  initialData: {
    currentPolicies: Record<string, any>
    allPolicies: Record<string, any[]>
    stats: any
  }
  currentLocale?: 'ko' | 'en'
}

export function PolicyManagementClient({ initialData, currentLocale = 'ko' }: PolicyManagementClientProps) {
  const [currentTab, setCurrentTab] = useState('privacy_policy')
  const [editingPolicy, setEditingPolicy] = useState<string | null>(null)
  const [viewingHistory, setViewingHistory] = useState<string | null>(null)
  const [previewData, setPreviewData] = useState<any>(null)
  
  // ✅ 초기 데이터를 안전하게 설정
  const [policies, setPolicies] = useState(() => {
    const safePolicies = { ...initialData.allPolicies }
    // 각 정책 타입에 대해 빈 배열로 초기화
    if (!safePolicies.privacy_policy) safePolicies.privacy_policy = []
    if (!safePolicies.terms_of_service) safePolicies.terms_of_service = []
    return safePolicies
  })
  
  const [currentPolicies, setCurrentPolicies] = useState(initialData.currentPolicies || {})
  const [isPending, startTransition] = useTransition()
  const { toast } = useToast();
  const router = useRouter()


  const policyTypes = [
    {
      key: 'privacy_policy',
      label: '개인정보 처리방침',
      icon: <Shield className="h-4 w-4" />,
      description: '개인정보 수집, 이용, 보관 및 파기에 관한 정책'
    },
    {
      key: 'terms_of_service',
      label: '이용약관',
      icon: <FileText className="h-4 w-4" />,
      description: '서비스 이용 시 준수해야 할 규칙과 조건'
    }
  ]

  const handleCreateNew = (policyType: string) => {
    setEditingPolicy(policyType)
    setViewingHistory(null)
    setPreviewData(null)
  }

  const handleEdit = (policyType: string) => {
    setEditingPolicy(policyType)
    setViewingHistory(null)
    setPreviewData(null)
  }

  const handleViewHistory = async (policyType: string) => {
    setViewingHistory(policyType)
    setEditingPolicy(null)
    setPreviewData(null)
    
    startTransition(async () => {
      try {
        const result = await getPolicyHistory(policyType, currentLocale)
        if (result.success) {
          setPolicies(prev => ({
            ...prev,
            [policyType]: result.data || []
          }))
        } 
      } catch (error) {
        console.error('Policy history error:', error)
        toast({
          variant: "destructive",
          title: "오류",
          description: "정책 히스토리를 불러오는데 실패했습니다.",
        })
      }
    })
  }

  const handlePreview = (policyType: string, content: string, version: string) => {
    setPreviewData({
      policyType,
      content,
      version,
      effectiveDate: new Date().toISOString()
    })
    setEditingPolicy(null)
    setViewingHistory(null)
  }

  const handleSavePolicy = async (policyType: string, version: string, content: string) => {
    if (!content.trim()) {
      toast({
        variant: "destructive",
        title: "오류",
        description: "정책 내용을 입력해주세요.",
      })
      return
    }

    startTransition(async () => {
      try {
        console.log('Saving policy:', { policyType, version }) // ✅ 디버깅 로그

        const result = await createPolicyVersion({
          policyType: policyType as 'privacy_policy' | 'terms_of_service',
          locale: currentLocale,
          version,
          content,
          effectiveDate: new Date()
        })

        console.log('Save result:', result) // ✅ 디버깅 로그

        if (result.success) {
          toast({
            title: "성공",
            description: "새 정책 버전이 생성되었습니다.",
          })

          // ✅ 상태 업데이트 - 안전하게 처리
          const newPolicy = result.policy
          
          setPolicies(prev => {
            console.log('Updating policies state:', { prev, policyType, newPolicy }) // 디버깅 로그
            return {
              ...prev,
              [policyType]: [newPolicy, ...(prev[policyType] || [])] // ✅ 안전한 스프레드
            }
          })

          setCurrentPolicies(prev => {
            console.log('Updating current policies state:', { prev, policyType, newPolicy }) // 디버깅 로그
            return {
              ...prev,
              [policyType]: newPolicy
            }
          })

          setEditingPolicy(null)
          
          // ✅ Router refresh를 상태 업데이트 후에 호출
          router.refresh()
        } else {
          throw new Error(result.error)
        }
      } catch (error) {
        console.error('Save policy error:', error) // ✅ 에러 로그
        toast({
          variant: "destructive",
          title: "오류",
          description: error?.message || "정책 저장에 실패했습니다.",
        })
      }
    })
  }

  const handleActivatePolicy = async (policyId: number, policyType: string) => {
    startTransition(async () => {
      try {
        const result = await activatePolicyVersion(policyId)

        if (result.success) {
          toast({
            title: "성공",
            description: "정책이 활성화되었습니다.",
          })

          // ✅ 현재 정책 업데이트 - 안전하게 처리
          const activatedPolicy = (policies[policyType] || []).find(p => p.id === policyId)
          if (activatedPolicy) {
            setCurrentPolicies(prev => ({
              ...prev,
              [policyType]: activatedPolicy
            }))

            // ✅ 정책 목록의 isCurrent 상태 업데이트
            setPolicies(prev => ({
              ...prev,
              [policyType]: (prev[policyType] || []).map(p => ({
                ...p,
                isCurrent: p.id === policyId
              }))
            }))
          }
          
          router.refresh()
        } else {
          throw new Error(result.error)
        }
      } catch (error) {
        console.error('Activate policy error:', error)
        toast({
          variant: "destructive",
          title: "오류",
          description: error?.message || "정책 활성화에 실패했습니다.",
        })
      }
    })
  }

  const renderMainContent = () => {
    const currentPolicy = currentPolicies[currentTab]
    const policyInfo = policyTypes.find(p => p.key === currentTab)

    // ✅ 디버깅 정보
    console.log('Render main content:', { 
      currentTab, 
      currentPolicy, 
      editingPolicy,
      policiesForTab: policies[currentTab]?.length || 0
    })

    if (editingPolicy === currentTab) {
      return (
        <PolicyEditor
          policyType={currentTab}
          currentPolicy={currentPolicy}
          onSave={handleSavePolicy}
          onCancel={() => setEditingPolicy(null)}
          onPreview={handlePreview}
          isLoading={isPending}
          currentLocale={currentLocale}
        />
      )
    }

    if (viewingHistory === currentTab) {
      return (
        <PolicyHistory
          policyType={currentTab}
          policies={policies[currentTab] || []} // ✅ 안전한 기본값
          currentPolicy={currentPolicy}
          onActivate={handleActivatePolicy}
          onEdit={() => setEditingPolicy(currentTab)}
          onClose={() => setViewingHistory(null)}
          isLoading={isPending}
        />
      )
    }

    if (previewData && previewData.policyType === currentTab) {
      return (
        <PolicyPreview
          data={previewData}
          onSave={() => handleSavePolicy(previewData.policyType, previewData.version, previewData.content)}
          onEdit={() => setEditingPolicy(currentTab)}
          onClose={() => setPreviewData(null)}
          isLoading={isPending}
        />
      )
    }

    // 기본 정책 관리 화면
    return (
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                {policyInfo?.icon}
                {policyInfo?.label}
              </CardTitle>
              <CardDescription>
                {policyInfo?.description}
              </CardDescription>
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleCreateNew(currentTab)}
                disabled={isPending}
              >
                <Plus className="h-4 w-4 mr-1" />
                새 버전
              </Button>
              {currentPolicy && (
                <>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleEdit(currentTab)}
                    disabled={isPending}
                  >
                    <Edit className="h-4 w-4 mr-1" />
                    편집
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleViewHistory(currentTab)}
                    disabled={isPending}
                  >
                    <History className="h-4 w-4 mr-1" />
                    히스토리
                  </Button>
                </>
              )}
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {currentPolicy ? (
            <div className="space-y-4">
              {/* 현재 정책 정보 */}
              <div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-lg">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-green-600" />
                  <div>
                    <p className="font-medium text-green-900">
                      현재 활성 버전: v{currentPolicy.version}
                    </p>
                    <p className="text-sm text-green-700">
                      시행일: {new Date(currentPolicy.effectiveDate).toLocaleDateString('ko-KR')}
                    </p>
                  </div>
                </div>
                <Badge variant="secondary" className="bg-green-100 text-green-800">
                  활성
                </Badge>
              </div>

              {/* 정책 내용 미리보기 */}
              <div className="space-y-2">
                <h4 className="font-medium">정책 내용 미리보기</h4>
                <div className="bg-muted/50 p-4 rounded-md max-h-64 overflow-y-auto">
                  <div 
                    className="prose prose-sm max-w-none"
                    dangerouslySetInnerHTML={{
                      __html: currentPolicy.content.substring(0, 1000) + (currentPolicy.content.length > 1000 ? '...' : '')
                    }}
                  />
                </div>
              </div>

              {/* 메타 정보 */}
              <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="h-4 w-4" />
                  생성일: {new Date(currentPolicy.createdAt).toLocaleString('ko-KR')}
                </div>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Clock className="h-4 w-4" />
                  버전: {currentPolicy.version}
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-12">
              <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">정책이 등록되지 않았습니다</h3>
              <p className="text-muted-foreground mb-4">
                {policyInfo?.label}의 첫 번째 버전을 생성해주세요.
              </p>
              <Button onClick={() => handleCreateNew(currentTab)}>
                <Plus className="h-4 w-4 mr-2" />
                첫 번째 버전 생성
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-semibold">정책 편집</h2>
        {isPending && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Loader2 className="h-4 w-4 animate-spin" />
            처리 중...
          </div>
        )}
      </div>

      <Tabs value={currentTab} onValueChange={setCurrentTab}>
        <TabsList>
          {policyTypes.map(policy => (
            <TabsTrigger 
              key={policy.key} 
              value={policy.key}
              className="flex items-center gap-2"
            >
              {policy.icon}
              {policy.label}
            </TabsTrigger>
          ))}
        </TabsList>

        {policyTypes.map(policy => (
          <TabsContent key={policy.key} value={policy.key}>
            {renderMainContent()}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}