'use client';

/**
 * 이벤트 상세 컴포넌트
 * IntegratedDetailTemplate 마이그레이션 완료 (2026-01-20)
 *
 * 특이사항:
 * - view 모드만 지원 (수정/삭제 없음)
 * - 이미지, 첨부파일 표시
 */

import { useCallback } from 'react';
import { Download } from 'lucide-react';
import Image from 'next/image';
import { Card, CardContent } from '@/components/ui/card';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { eventConfig } from './eventConfig';
import { type Event } from './types';

interface EventDetailProps {
  event: Event;
}

export function EventDetail({ event }: EventDetailProps) {
  // 폼 콘텐츠 렌더링
  const renderFormContent = useCallback(() => (
    <Card>
        <CardContent className="p-6">
          {/* 헤더: 이벤트 / 제목 */}
          <div className="border-b pb-4 mb-4">
            <div className="text-sm text-muted-foreground mb-1">이벤트</div>
            <h2 className="text-xl font-semibold">{event.title}</h2>
          </div>

          {/* 메타 정보: 작성자 | 기간 | 조회수 */}
          <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-sm text-muted-foreground mb-6">
            <span>{event.author}</span>
            <span className="hidden sm:inline">|</span>
            <span>{event.startDate} ~ {event.endDate}</span>
            <span className="hidden sm:inline">|</span>
            <span className="sm:ml-auto">조회수 {event.viewCount}</span>
          </div>

          {/* 이미지 영역 */}
          {event.imageUrl ? (
            <div className="border rounded-md p-4 mb-4 bg-muted/30">
              <div className="relative w-full aspect-video">
                <Image
                  src={event.imageUrl}
                  alt={event.title}
                  fill
                  className="object-contain"
                />
              </div>
            </div>
          ) : (
            <div className="border rounded-md p-4 mb-4 bg-muted/30 flex items-center justify-center min-h-[200px]">
              <span className="text-muted-foreground">IMG</span>
            </div>
          )}

          {/* 내용 */}
          <div className="mb-6">
            <div className="text-sm text-muted-foreground mb-2">내용</div>
            <div className="prose prose-sm max-w-none whitespace-pre-wrap">
              {event.content}
            </div>
          </div>

          {/* 첨부파일 */}
          {event.attachments && event.attachments.length > 0 && (
            <div className="border-t pt-4">
              {event.attachments.map((file) => (
                <div key={file.id} className="flex items-center gap-2">
                  <Download className="h-4 w-4 text-muted-foreground" />
                  <a
                    href={file.url}
                    className="text-sm text-blue-600 hover:underline"
                    download
                  >
                    {file.name}
                  </a>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
  ), [event]);

  return (
    <IntegratedDetailTemplate
      config={eventConfig}
      mode="view"
      initialData={event as unknown as Record<string, unknown>}
      itemId={event.id}
      renderView={() => renderFormContent()}
      renderForm={() => renderFormContent()}
    />
  );
}

export default EventDetail;