import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Save, Eye, X, Info, AlertTriangle, Calendar, Clock, FileText, Shield } from 'lucide-react'
import { Badge } from '../ui/badge'

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

interface PolicyPreviewProps {
  data: PolicyPreviewData
  onSave?: () => void
  onEdit?: () => void
  onClose: () => void
  isLoading?: boolean
  mode?: 'preview' | 'view' // ✅ 미리보기 모드 vs 상세보기 모드
}

export function PolicyPreview({ 
  data, 
  onSave, 
  onEdit, 
  onClose, 
  isLoading = false,
  mode = 'preview' 
}: PolicyPreviewProps) {
  const policyLabels: Record<string, string> = {
    privacy_policy: '개인정보 처리방침',
    terms_of_service: '이용약관'
  }

  const policyIcons = {
    privacy_policy: <Shield className="h-5 w-5" />,
    terms_of_service: <FileText className="h-5 w-5" />
  }

  // ✅ 모드에 따른 제목과 설명
  const getTitle = () => {
    return mode === 'preview' ? '정책 미리보기' : '정책 상세보기'
  }

  const getDescription = () => {
    if (mode === 'preview') {
      return `${policyLabels[data.policyType]} v${data.version} - 저장하면 즉시 활성화됩니다`
    } else {
      return `${policyLabels[data.policyType]} v${data.version} 상세 내용`
    }
  }

  // ✅ 상태 텍스트 결정
  const getStatusText = () => {
    if (mode === 'preview') return '저장 대기'
    if (data.isCurrent) return '현재 활성'
    return '비활성'
  }

  const getStatusBadge = () => {
    if (mode === 'preview') {
      return <Badge variant="outline" className="text-orange-600">저장 대기</Badge>
    }
    if (data.isCurrent) {
      return <Badge className="bg-green-100 text-green-800">현재 활성</Badge>
    }
    return <Badge variant="secondary">비활성</Badge>
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            {policyIcons[data.policyType]}
            <div>
              <CardTitle>{getTitle()}</CardTitle>
              <CardDescription>
                {getDescription()}
              </CardDescription>
            </div>
          </div>
          <Button variant="outline" size="sm" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* ✅ 정책 메타 정보 */}
        <div className="grid grid-cols-2 gap-4 p-4 bg-muted/50 rounded-lg">
          <div>
            <p className="text-sm font-medium">정책 유형</p>
            <p className="text-sm text-muted-foreground">{policyLabels[data.policyType]}</p>
          </div>
          <div>
            <p className="text-sm font-medium">버전</p>
            <p className="text-sm text-muted-foreground">v{data.version}</p>
          </div>
          <div>
            <p className="text-sm font-medium">시행일</p>
            <p className="text-sm text-muted-foreground">
              {new Date(data.effectiveDate).toLocaleDateString('ko-KR')}
            </p>
          </div>
          <div>
            <p className="text-sm font-medium">상태</p>
            <div className="flex items-center gap-2">
              {getStatusBadge()}
            </div>
          </div>
          
          {/* ✅ 상세보기 모드일 때 추가 정보 */}
          {mode === 'view' && data.createdAt && (
            <>
              <div>
                <p className="text-sm font-medium">생성일</p>
                <p className="text-sm text-muted-foreground">
                  {new Date(data.createdAt).toLocaleString('ko-KR')}
                </p>
              </div>
              <div>
                <p className="text-sm font-medium">문서 ID</p>
                <p className="text-sm text-muted-foreground">#{data.id}</p>
              </div>
            </>
          )}
        </div>

        <Separator />

        {/* ✅ 정책 내용 미리보기 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <h4 className="font-medium">정책 내용</h4>
            <div className="text-xs text-muted-foreground">
              {data.content.replace(/<[^>]*>/g, '').length}자
            </div>
          </div>
          <div className="bg-white border rounded-md p-6 max-h-96 overflow-y-auto">
            <div 
              className="prose prose-sm max-w-none"
              dangerouslySetInnerHTML={{ __html: data.content }}
            />
          </div>
        </div>

        {/* ✅ 액션 버튼들 */}
        <div className="flex justify-between pt-4">
          {mode === 'preview' ? (
            // 미리보기 모드 버튼들
            <>
              <Button
                variant="outline"
                onClick={onEdit}
                disabled={isLoading}
              >
                편집으로 돌아가기
              </Button>
              
              <Button
                onClick={onSave}
                disabled={isLoading}
                className="bg-green-600 hover:bg-green-700"
              >
                <Save className="h-4 w-4 mr-2" />
                {isLoading ? '저장 중...' : '저장 및 활성화'}
              </Button>
            </>
          ) : (
            // 상세보기 모드 버튼들
            <div className="w-full flex justify-end">
              <Button
                variant="outline"
                onClick={onClose}
                disabled={isLoading}
              >
                닫기
              </Button>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}