'use client';

/**
 * 팝업 상세 컴포넌트
 *
 * 디자인 스펙:
 * - 페이지 타이틀: 팝업 상세
 * - 읽기 전용 모드로 팝업 정보 표시
 * - 버튼 위치: 카드 아래 별도 영역 (좌: 목록, 우: 삭제/수정)
 */

import { useRouter } from 'next/navigation';
import { Megaphone, X, Pencil, Trash2 } from 'lucide-react';
import { useMenuStore } from '@/stores/menuStore';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { type Popup } from './types';
import { sanitizeHTML } from '@/lib/sanitize';

interface PopupDetailProps {
  popup: Popup;
  onEdit: () => void;
  onDelete: () => void;
}

export function PopupDetail({ popup, onEdit, onDelete }: PopupDetailProps) {
  const router = useRouter();
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);

  const handleBack = () => {
    router.push('/ko/settings/popup-management');
  };

  // 대상 표시 텍스트
  const getTargetDisplay = () => {
    if (popup.target === 'all') {
      return '전사';
    }
    return popup.targetName || '부서별';
  };

  return (
    <PageLayout>
      <PageHeader
        title="팝업관리 상세"
        description="팝업 목록을 관리합니다"
        icon={Megaphone}
      />

      <div className="space-y-6">
        {/* 팝업 정보 */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-base">팝업 정보</CardTitle>
            <Badge variant={popup.status === 'active' ? 'default' : 'secondary'}>
              {popup.status === 'active' ? '사용함' : '사용안함'}
            </Badge>
          </CardHeader>
          <CardContent>
            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <dt className="text-sm font-medium text-muted-foreground">대상</dt>
                <dd className="text-sm mt-1">{getTargetDisplay()}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">작성자</dt>
                <dd className="text-sm mt-1">{popup.author}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">제목</dt>
                <dd className="text-sm mt-1">{popup.title}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">상태</dt>
                <dd className="text-sm mt-1">
                  <Badge variant={popup.status === 'active' ? 'default' : 'secondary'}>
                    {popup.status === 'active' ? '사용함' : '사용안함'}
                  </Badge>
                </dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">기간</dt>
                <dd className="text-sm mt-1">{popup.startDate} ~ {popup.endDate}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">등록일시</dt>
                <dd className="text-sm mt-1">{popup.createdAt}</dd>
              </div>
              <div className="md:col-span-2">
                <dt className="text-sm font-medium text-muted-foreground">내용</dt>
                <dd className="text-sm mt-1">
                  <div
                    className="border border-gray-200 rounded-md p-4 bg-gray-50 min-h-[100px] prose prose-sm max-w-none"
                    dangerouslySetInnerHTML={{ __html: sanitizeHTML(popup.content) }}
                  />
                </dd>
              </div>
            </dl>
          </CardContent>
        </Card>

      </div>

      {/* 하단 버튼 (sticky 하단 바) */}
      <div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}>
        <Button variant="outline" onClick={handleBack}>
          <X className="w-4 h-4 mr-1" />
          취소
        </Button>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
            <Trash2 className="w-4 h-4 mr-1" />
            삭제
          </Button>
          <Button onClick={onEdit}>
            <Pencil className="w-4 h-4 mr-1" />
            수정
          </Button>
        </div>
      </div>
    </PageLayout>
  );
}

export default PopupDetail;