import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Separator } from '@/components/ui/separator'
import { Save, Eye, X, Info, AlertTriangle, Calendar, Clock } from 'lucide-react'
import { Badge } from '../ui/badge'
import { PolicyPreview } from './policy-preview'

// ✅ 타입 정의
interface PolicyData {
  id: number
  policyType: 'privacy_policy' | 'terms_of_service'
  version: string
  content: string
  effectiveDate: string
  isCurrent: boolean
  createdAt: string
}

interface PolicyHistoryProps {
  policyType: 'privacy_policy' | 'terms_of_service'
  policies: PolicyData[] | null | undefined // ✅ null/undefined 허용
  currentPolicy?: PolicyData | null
  onActivate: (policyId: number, policyType: string) => void
  onEdit: () => void
  onClose: () => void
  isLoading?: boolean
}

export function PolicyHistory({ 
  policyType, 
  policies, 
  currentPolicy,
  onActivate, 
  onEdit, 
  onClose,
  isLoading = false 
}: PolicyHistoryProps) {
  const [viewingPolicy, setViewingPolicy] = useState<PolicyData | null>(null) // ✅ 상세보기 상태

  const policyLabels: Record<string, string> = {
    privacy_policy: '개인정보 처리방침',
    terms_of_service: '이용약관'
  }

  // ✅ 디버깅 로그
  console.log('PolicyHistory - policies:', policies, 'type:', typeof policies, 'isArray:', Array.isArray(policies))

  // ✅ 안전한 배열 변환
  const safePolicies = Array.isArray(policies) ? policies :Array.isArray(policies.data) ? policies.data : []

  // ✅ 내용 미리보기 함수
  const getContentPreview = (content: string): string => {
    if (!content) return '내용 없음'
    
    // HTML 태그 제거 및 텍스트 추출
    const textContent = content.replace(/<[^>]*>/g, '').trim()
    return textContent.length > 200 
      ? textContent.substring(0, 200) + '...'
      : textContent
  }

  // ✅ 상세보기 핸들러
  const handleViewDetail = (policy: PolicyData) => {
    setViewingPolicy(policy)
  }

  // ✅ 상세보기 닫기 핸들러
  const handleCloseDetail = () => {
    setViewingPolicy(null)
  }

  // ✅ 상세보기 모드일 때 PolicyPreview 렌더링
  if (viewingPolicy) {
    return (
      <PolicyPreview
        data={{
          policyType: viewingPolicy.policyType,
          content: viewingPolicy.content,
          version: viewingPolicy.version,
          effectiveDate: viewingPolicy.effectiveDate,
          id: viewingPolicy.id,
          isCurrent: viewingPolicy.isCurrent,
          createdAt: viewingPolicy.createdAt
        }}
        onClose={handleCloseDetail}
        mode="view"
      />
    )
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              정책 히스토리
            </CardTitle>
            <CardDescription>
              {policyLabels[policyType]}의 모든 버전을 확인하고 관리합니다
            </CardDescription>
          </div>
          <div className="flex gap-2">
            <Button 
              variant="outline" 
              size="sm" 
              onClick={onEdit}
              disabled={isLoading}
            >
              새 버전 생성
            </Button>
            <Button 
              variant="outline" 
              size="sm" 
              onClick={onClose}
              disabled={isLoading}
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {/* ✅ 로딩 상태 */}
        {isLoading && (
          <div className="flex items-center justify-center py-8">
            <div className="text-muted-foreground">히스토리를 불러오는 중...</div>
          </div>
        )}

        {/* ✅ 에러 상태 체크 */}
        {!isLoading && safePolicies && !Array.isArray(safePolicies) && (
          <Alert variant="destructive" className="mb-4">
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              정책 데이터 형식이 올바르지 않습니다. (받은 데이터: {typeof safePolicies})
            </AlertDescription>
          </Alert>
        )}

        {/* ✅ 정책 목록 */}
        {!isLoading && (
          <div className="space-y-4">
            {safePolicies.length === 0 ? (
              <div className="text-center py-8">
                <div className="text-muted-foreground mb-2">
                  <Info className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p>등록된 정책 버전이 없습니다.</p>
                </div>
                <Button onClick={onEdit} size="sm">
                  첫 번째 버전 생성하기
                </Button>
              </div>
            ) : (
              <>
                {/* ✅ 정책 개수 표시 */}
                <div className="flex items-center justify-between mb-4">
                  <div className="text-sm text-muted-foreground">
                    총 {safePolicies.length}개 버전
                  </div>
                  {currentPolicy && (
                    <Badge variant="outline" className="text-xs">
                      현재: v{currentPolicy.version}
                    </Badge>
                  )}
                </div>

                {/* ✅ 정책 목록 렌더링 */}
                {safePolicies.map((policy: PolicyData) => (
                  <div
                    key={policy.id}
                    className={`p-4 border rounded-lg transition-colors ${
                      policy.isCurrent 
                        ? 'border-green-200 bg-green-50' 
                        : 'border-border hover:bg-muted/30'
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        {/* ✅ 헤더 */}
                        <div className="flex items-center gap-2 mb-2">
                          <h4 className="font-medium text-base">
                            버전 {policy.version}
                          </h4>
                          {policy.isCurrent && (
                            <Badge className="bg-green-100 text-green-800 text-xs">
                              현재 활성
                            </Badge>
                          )}
                        </div>

                        {/* ✅ 메타 정보 */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-3 text-sm text-muted-foreground">
                          <div className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            시행일: {new Date(policy.effectiveDate).toLocaleDateString('ko-KR')}
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            생성일: {new Date(policy.createdAt).toLocaleDateString('ko-KR')}
                          </div>
                        </div>

                        {/* ✅ 내용 미리보기 */}
                        <div className="mt-2">
                          <div className="text-sm bg-muted/50 p-3 rounded border max-h-20 overflow-hidden">
                            {getContentPreview(policy.content)}
                          </div>
                        </div>
                      </div>

                      {/* ✅ 액션 버튼들 */}
                      <div className="flex flex-col gap-2 ml-4 flex-shrink-0">
                        {!policy.isCurrent && (
                          <Button
                            size="sm"
                            onClick={() => onActivate(policy.id, policyType)}
                            disabled={isLoading}
                            className="whitespace-nowrap"
                          >
                            활성화
                          </Button>
                        )}
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleViewDetail(policy)}
                          disabled={isLoading}
                          className="whitespace-nowrap"
                        >
                          <Eye className="h-3 w-3 mr-1" />
                          상세보기
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}