import { useState, useRef } from 'react';
import { SearchInput } from './SearchInput';
import { ExcelExport } from './ExcelExport';
import { PrintButton } from './PrintButton';
import { Pagination } from './Pagination';
import { Download } from 'lucide-react';

/*
 * SFR-02 공통컴포넌트: 페이지 공통 툴바 + 페이징
 * - 오른쪽 상단: 검색, 파일다운로드, 엑셀 내보내기, 인쇄
 * - 하단: 페이지네이션
 */

interface PageToolbarProps {
  /** 페이지 제목 (왼쪽) */
  title: React.ReactNode;
  /** 검색 placeholder */
  searchPlaceholder?: string;
  /** 검색어 변경 콜백 */
  onSearch?: (query: string) => void;
  /** 엑셀 내보내기용 데이터 */
  exportData?: Record<string, unknown>[];
  /** 엑셀 컬럼 정의 */
  exportColumns?: { key: string; label: string }[];
  /** 엑셀 파일명 */
  exportFilename?: string;
  /** 파일 다운로드 콜백 (없으면 버튼 숨김) */
  onDownload?: () => void;
  /** 페이징: 현재 페이지 */
  page?: number;
  /** 페이징: 전체 페이지 수 */
  totalPages?: number;
  /** 페이징: 전체 아이템 수 */
  totalItems?: number;
  /** 페이징: 페이지 크기 */
  pageSize?: number;
  /** 페이징: 페이지 변경 콜백 */
  onPageChange?: (page: number) => void;
  /** 추가 액션 버튼 (오른쪽 끝) */
  extra?: React.ReactNode;
  children: React.ReactNode;
}

export function PageToolbar({
  title,
  searchPlaceholder = '검색...',
  onSearch,
  exportData,
  exportColumns,
  exportFilename = 'data',
  onDownload,
  page,
  totalPages,
  totalItems,
  pageSize = 20,
  onPageChange,
  extra,
  children,
}: PageToolbarProps) {
  const [query, setQuery] = useState('');
  const contentRef = useRef<HTMLDivElement>(null);

  const handleSearch = (v: string) => {
    setQuery(v);
    onSearch?.(v);
  };

  return (
    <div className="p-5 flex flex-col h-full">
      {/* 상단: 제목 + 툴바 */}
      <div className="flex items-center justify-between mb-4 shrink-0">
        <div className="min-w-0">{title}</div>
        <div className="flex items-center gap-1.5 shrink-0">
          {onSearch && (
            <SearchInput
              value={query}
              onChange={handleSearch}
              placeholder={searchPlaceholder}
              className="w-52"
            />
          )}
          {onDownload && (
            <button
              onClick={onDownload}
              className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-[10px] font-medium bg-surface-overlay border border-border text-muted-foreground hover:text-heading hover:border-border transition-colors"
            >
              <Download className="w-3 h-3" />
              다운로드
            </button>
          )}
          {exportData && exportColumns && (
            <ExcelExport
              data={exportData}
              columns={exportColumns}
              filename={exportFilename}
            />
          )}
          <PrintButton targetRef={contentRef} />
          {extra}
        </div>
      </div>

      {/* 콘텐츠 */}
      <div ref={contentRef} className="flex-1 min-h-0 overflow-auto">
        {children}
      </div>

      {/* 하단: 페이지네이션 */}
      {onPageChange && totalPages != null && totalItems != null && page != null && (
        <div className="shrink-0 mt-2">
          <Pagination
            page={page}
            totalPages={totalPages}
            totalItems={totalItems}
            pageSize={pageSize}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </div>
  );
}
