'use client';

import { useRouter } from 'next/navigation';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ClipboardList, ArrowLeft, Edit, Trash2 } from 'lucide-react';
import { useMenuStore } from '@/stores/menuStore';
import type { Board } from './types';
import {
  BOARD_STATUS_LABELS,
  BOARD_STATUS_COLORS,
  BOARD_TARGET_LABELS,
} from './types';

interface BoardDetailProps {
  board: Board;
  onEdit?: () => void;
  onDelete?: () => void;
}

// 날짜/시간 포맷
const formatDateTime = (dateString: string): string => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

export function BoardDetail({ board, onEdit, onDelete }: BoardDetailProps) {
  const router = useRouter();
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);

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

  // 대상 표시 텍스트
  const getTargetDisplay = () => {
    if (board.target === 'all') {
      return BOARD_TARGET_LABELS.all;
    }
    return board.targetName || BOARD_TARGET_LABELS.department;
  };

  return (
    <PageLayout>
      <PageHeader
        title="게시판 상세"
        description="게시판 정보를 조회합니다"
        icon={ClipboardList}
      />

      <div className="space-y-6 pb-24">
        {/* 게시판 정보 */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-base">게시판 정보</CardTitle>
            <Badge className={BOARD_STATUS_COLORS[board.status]}>
              {BOARD_STATUS_LABELS[board.status]}
            </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">{board.authorName}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">게시판명</dt>
                <dd className="text-sm mt-1">{board.boardName}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">상태</dt>
                <dd className="text-sm mt-1">
                  <Badge className={BOARD_STATUS_COLORS[board.status]}>
                    {BOARD_STATUS_LABELS[board.status]}
                  </Badge>
                </dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">등록일시</dt>
                <dd className="text-sm mt-1">{formatDateTime(board.createdAt)}</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} size="sm" className="md:size-default">
          <ArrowLeft className="w-4 h-4 md:mr-2" />
          <span className="hidden md:inline">목록으로</span>
        </Button>
        <div className="flex items-center gap-1 md:gap-2">
          {onDelete && (
            <Button
              variant="outline"
              onClick={onDelete}
              size="sm"
              className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
            >
              <Trash2 className="w-4 h-4 md:mr-2" />
              <span className="hidden md:inline">삭제</span>
            </Button>
          )}
          {onEdit && (
            <Button onClick={onEdit} size="sm" className="md:size-default">
              <Edit className="w-4 h-4 md:mr-2" />
              <span className="hidden md:inline">수정</span>
            </Button>
          )}
        </div>
      </div>
    </PageLayout>
  );
}