'use client';

/**
 * 문서 헤더 공통 컴포넌트
 *
 * @example
 * // 기본 사용
 * <DocumentHeader
 *   title="작업일지"
 *   documentCode="WL-SCR"
 *   subtitle="스크린 생산부서"
 *   approval={{ type: '4col', writer: { name: '홍길동', date: '01/22' } }}
 * />
 *
 * // 로고 포함
 * <DocumentHeader
 *   logo={{ text: 'KD', subtext: '정동기업' }}
 *   title="작업일지"
 *   approval={{ type: '4col' }}
 * />
 *
 * // 결재선 위에 추가 정보
 * <DocumentHeader
 *   title="견적서"
 *   topInfo={<div>LOT: KD-WO-260122</div>}
 *   approval={{ type: '3col' }}
 * />
 *
 * // 외부 송부 (결재선 숨김)
 * <DocumentHeader title="견적서" mode="external" />
 *
 * // 품질검사 레이아웃 (2줄 제목)
 * <DocumentHeader
 *   title="스크린"
 *   subtitle="중간검사 성적서"
 *   layout="quality"
 *   logo={{ text: 'KD', subtext: '경동기업\nKYUNGDONG COMPANY' }}
 *   customApproval={<QualityApprovalTable type="4col" approvers={approvers} />}
 * />
 */

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { ApprovalLine, ApprovalLineProps } from './ApprovalLine';

export interface DocumentHeaderLogo {
  /** 로고 텍스트 (예: 'KD') */
  text: string;
  /** 로고 서브텍스트 (예: '정동기업') */
  subtext?: string;
  /** 로고 이미지 URL (text 대신 사용) */
  imageUrl?: string;
}

export interface DocumentHeaderProps {
  /** 문서 제목 */
  title: string;
  /** 문서 코드 (예: 'WL-SCR') */
  documentCode?: string;
  /** 부제목 (예: '스크린 생산부서') */
  subtitle?: string;
  /** 로고 설정 */
  logo?: DocumentHeaderLogo;
  /** 결재선 위에 표시할 추가 정보 */
  topInfo?: ReactNode;
  /** 결재란 설정 (null이면 숨김) */
  approval?: Omit<ApprovalLineProps, 'mode'> | null;
  /** 커스텀 결재란 컴포넌트 (approval 대신 사용) */
  customApproval?: ReactNode;
  /** 문서 모드: internal(내부), external(외부송부) */
  mode?: 'internal' | 'external';
  /** 레이아웃 유형 */
  layout?: 'default' | 'centered' | 'simple' | 'quality' | 'construction' | 'quote';
  /** 추가 className */
  className?: string;
}

export function DocumentHeader({
  title,
  documentCode,
  subtitle,
  logo,
  topInfo,
  approval,
  customApproval,
  mode = 'internal',
  layout = 'default',
  className,
}: DocumentHeaderProps) {
  const isExternal = mode === 'external';
  const showApproval = (approval !== null || customApproval) && !isExternal;

  // 간단한 레이아웃 (제목만)
  if (layout === 'simple') {
    return (
      <div className={cn('mb-6', className)}>
        <h1 className="text-2xl font-bold text-center tracking-widest">{title}</h1>
        {documentCode && (
          <p className="text-sm text-gray-500 text-center mt-1">{documentCode}</p>
        )}
        {subtitle && (
          <p className="text-sm font-medium text-center mt-1">{subtitle}</p>
        )}
      </div>
    );
  }

  // 품질검사 레이아웃 (로고 + 2줄 제목 + 결재란, 테두리 없음)
  if (layout === 'quality') {
    return (
      <div className={cn('flex justify-between items-start mb-4', className)}>
        {/* 좌측: 로고 영역 */}
        {logo && (
          <div className="flex items-center gap-2">
            {logo.imageUrl ? (
              <img src={logo.imageUrl} alt={logo.text} className="h-8" />
            ) : (
              <div className="text-2xl font-bold">{logo.text}</div>
            )}
            {logo.subtext && (
              <div className="text-xs text-gray-600 whitespace-pre-line">{logo.subtext}</div>
            )}
          </div>
        )}

        {/* 중앙: 2줄 제목 */}
        <div className="text-center">
          <div className="text-xl font-bold">{title}</div>
          {subtitle && (
            <div className="text-xl font-bold tracking-[0.2rem]">{subtitle}</div>
          )}
        </div>

        {/* 우측: 결재란 */}
        {showApproval && (
          customApproval || (approval && <ApprovalLine {...approval} mode={mode} />)
        )}
      </div>
    );
  }

  // 건설 문서 레이아웃 (좌측 정렬 제목 + 결재란)
  if (layout === 'construction') {
    return (
      <div className={cn('flex justify-between items-start mb-6', className)}>
        {/* 좌측: 제목 및 문서정보 */}
        <div>
          <h1 className="text-2xl font-bold mb-2">{title}</h1>
          {(documentCode || subtitle) && (
            <div className="text-sm text-gray-600">
              {documentCode && <span>문서번호: {documentCode}</span>}
              {documentCode && subtitle && <span> | </span>}
              {subtitle && <span>{subtitle}</span>}
            </div>
          )}
        </div>

        {/* 우측: 결재란 */}
        {showApproval && (
          customApproval || (approval && <ApprovalLine {...approval} mode={mode} />)
        )}
      </div>
    );
  }

  // 견적/발주 문서 레이아웃 (중앙 제목 + 우측 로트번호/결재란)
  if (layout === 'quote') {
    return (
      <div className={cn('flex items-center justify-between mb-5 pb-4 border-b-2 border-black', className)}>
        {/* 중앙: 제목 */}
        <div className="flex-1 text-center">
          <h1 className="text-4xl font-bold tracking-[8px]">{title}</h1>
        </div>

        {/* 우측: 로트번호 + 결재란 (customApproval로 전달) */}
        {showApproval && customApproval}
      </div>
    );
  }

  // 중앙 정렬 레이아웃 (견적서 스타일)
  if (layout === 'centered') {
    return (
      <div className={cn('flex justify-between items-start mb-6', className)}>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-center tracking-[0.3em]">{title}</h1>
          {(documentCode || subtitle) && (
            <div className="text-sm mt-4 text-center">
              {documentCode && <span>문서번호: {documentCode}</span>}
              {documentCode && subtitle && <span className="mx-2">|</span>}
              {subtitle && <span>{subtitle}</span>}
            </div>
          )}
        </div>
        {showApproval && (
          <div className="ml-4">
            {customApproval || (approval && <ApprovalLine {...approval} mode={mode} />)}
          </div>
        )}
      </div>
    );
  }

  // 기본 레이아웃 (로고 + 제목 + 결재란)
  return (
    <div className={cn('flex border border-gray-300 mb-6', className)}>
      {/* 좌측: 로고 영역 */}
      {logo && (
        <div className="w-24 border-r border-gray-300 flex flex-col items-center justify-center p-3 shrink-0">
          {logo.imageUrl ? (
            <img src={logo.imageUrl} alt={logo.text} className="h-8" />
          ) : (
            <span className="text-2xl font-bold">{logo.text}</span>
          )}
          {logo.subtext && (
            <span className="text-xs text-gray-500 whitespace-nowrap">{logo.subtext}</span>
          )}
        </div>
      )}

      {/* 중앙: 문서 제목 */}
      <div className="flex-1 flex flex-col items-center justify-center p-3 border-r border-gray-300">
        <h1 className="text-xl font-bold tracking-widest mb-1">{title}</h1>
        {documentCode && (
          <p className="text-xs text-gray-500">{documentCode}</p>
        )}
        {subtitle && (
          <p className="text-sm font-medium mt-1">{subtitle}</p>
        )}
      </div>

      {/* 우측: 결재선 위 정보 + 결재란 */}
      {(showApproval || topInfo) && (
        <div className="shrink-0 flex flex-col">
          {topInfo && (
            <div className="p-2 text-xs border-b border-gray-300">
              {topInfo}
            </div>
          )}
          {showApproval && (
            customApproval || (approval && <ApprovalLine {...approval} mode={mode} />)
          )}
        </div>
      )}
    </div>
  );
}
