'use client';

import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/components/ui/utils';
import type { CalendarHeaderProps, CalendarView } from './types';
import { formatYearMonth, formatYearMonthDay } from './utils';

/**
 * 달력 헤더 컴포넌트
 * - 년월 표시 및 네비게이션 (◀ ▶)
 * - 주/월 뷰 전환 탭
 * - 필터 slot (children으로 외부 주입)
 */
export function CalendarHeader({
  currentDate,
  view,
  onPrevMonth,
  onNextMonth,
  onViewChange,
  titleSlot,
  filterSlot,
  availableViews,
  hideNavigation,
}: CalendarHeaderProps) {
  const views: { value: CalendarView; label: string }[] = availableViews || [
    { value: 'week', label: '주' },
    { value: 'month', label: '월' },
  ];

  // 뷰에 따른 날짜 표시 형식
  const dateLabel = view === 'day-time'
    ? formatYearMonthDay(currentDate)
    : formatYearMonth(currentDate);

  // 뷰 전환 버튼 렌더링 (재사용)
  const renderViewTabs = (className?: string) => (
    <div className={cn('flex rounded-md border', className)}>
      {views.map((v) => (
        <button
          key={v.value}
          onClick={() => onViewChange(v.value)}
          className={cn(
            'px-3 py-1 text-sm font-medium transition-colors',
            'first:rounded-l-md last:rounded-r-md',
            view === v.value
              ? 'bg-primary text-primary-foreground'
              : 'hover:bg-primary/10 text-foreground'
          )}
        >
          {v.label}
        </button>
      ))}
    </div>
  );

  return (
    <div className="flex flex-col gap-2 pb-3 border-b">
      {/* 모바일 전용: 타이틀 */}
      {titleSlot && (
        <div className="xl:hidden text-base font-semibold text-foreground">
          {titleSlot}
        </div>
      )}

      {/* 모바일: 네비게이션 (1줄) + 뷰전환 (2줄) */}
      <div className="flex xl:hidden flex-col gap-2">
        {/* 1줄: 네비게이션 < 년월 > */}
        <div className="flex items-center justify-center gap-1">
          {!hideNavigation && (
            <Button
              variant="outline"
              size="icon"
              className="h-7 w-7 shrink-0 hover:bg-primary/10"
              onClick={onPrevMonth}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
          )}

          <span className="text-sm font-bold text-center whitespace-nowrap px-1">
            {dateLabel}
          </span>

          {!hideNavigation && (
            <Button
              variant="outline"
              size="icon"
              className="h-7 w-7 shrink-0 hover:bg-primary/10"
              onClick={onNextMonth}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          )}
        </div>

        {/* 2줄: 뷰 전환 탭 */}
        {views.length > 1 && (
          <div className="flex justify-center">
            {renderViewTabs()}
          </div>
        )}
      </div>

      {/* PC: 타이틀 + 네비게이션 | 뷰전환 + 필터 (한 줄) */}
      <div className="hidden xl:flex items-center justify-between">
        {/* 좌측: 타이틀 + 네비게이션 */}
        <div className="flex items-center gap-4">
          {titleSlot && (
            <span className="text-base font-semibold text-foreground">
              {titleSlot}
            </span>
          )}
          <div className="flex items-center gap-2">
            {!hideNavigation && (
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 shrink-0 hover:bg-primary/10"
                onClick={onPrevMonth}
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
            )}

            <span className="text-lg font-bold min-w-[120px] text-center whitespace-nowrap">
              {dateLabel}
            </span>

            {!hideNavigation && (
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 shrink-0 hover:bg-primary/10"
                onClick={onNextMonth}
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            )}
          </div>
        </div>

        {/* 우측: 뷰 전환 + 필터 */}
        <div className="flex items-center gap-3">
          {views.length > 1 && renderViewTabs('px-4 py-1.5')}
          {filterSlot && <div className="flex items-center gap-2">{filterSlot}</div>}
        </div>
      </div>

      {/* 모바일 전용: 필터 */}
      {filterSlot && (
        <div className="flex xl:hidden items-center gap-2">{filterSlot}</div>
      )}
    </div>
  );
}
