'use client';

/**
 * 공지사항 상세 컴포넌트
 *
 * 디자인 스펙:
 * - 페이지 타이틀: 공지사항 상세
 * - 공지사항 / 제목
 * - 작성자 | 날짜 | 조회수
 * - 이미지 영역
 * - 내용
 * - 첨부파일
 */

import { useRouter } from 'next/navigation';
import { Bell, ArrowLeft, Download } from 'lucide-react';
import Image from 'next/image';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { type Notice } from './types';

interface NoticeDetailProps {
  notice: Notice;
}

export function NoticeDetail({ notice }: NoticeDetailProps) {
  const router = useRouter();

  const handleBack = () => {
    router.push('/ko/customer-center/notices');
  };

  return (
    <PageLayout>
      <PageHeader
        title="공지사항 상세"
        description="공지사항을 조회합니다"
        icon={Bell}
      />

      <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">{notice.title}</h2>
          </div>

          {/* 메타 정보: 작성자 | 날짜 | 조회수 */}
          <div className="flex items-center gap-4 text-sm text-muted-foreground mb-6">
            <span>{notice.author}</span>
            <span>|</span>
            <span>{notice.createdAt}</span>
            <span className="ml-auto">조회수 {notice.viewCount}</span>
          </div>

          {/* 이미지 영역 */}
          {notice.imageUrl ? (
            <div className="border rounded-md p-4 mb-4 bg-muted/30">
              <div className="relative w-full aspect-video">
                <Image
                  src={notice.imageUrl}
                  alt={notice.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">
              {notice.content}
            </div>
          </div>

          {/* 첨부파일 */}
          {notice.attachments && notice.attachments.length > 0 && (
            <div className="border-t pt-4">
              {notice.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>

      {/* 목록으로 버튼 */}
      <div className="flex items-center">
        <Button variant="outline" onClick={handleBack}>
          <ArrowLeft className="w-4 h-4 mr-2" />
          목록으로
        </Button>
      </div>
    </PageLayout>
  );
}

export default NoticeDetail;