'use client';

import { Field } from '@/components/ui/field';

interface BoardAttachmentFieldProps {
  label?: string;
  /** 이미 저장돼 있는 첨부파일 식별자(수정 화면). 없으면 신규 등록이다. */
  attachmentId?: string | null;
}

/** 다운로드 라우트 — 백엔드 파일 API를 중계한다(`boards/attachments/route.ts`). */
const ATTACHMENT_DOWNLOAD_PATH = '/boards/attachments';

/**
 * 첨부파일 입력 — 파일을 고르면 **폼과 함께 그대로 제출**되고, Server Action이 업로드한 뒤
 * 게시물에 연결한다(브라우저에서 미리 업로드하지 않는다 — `_actions.ts` 주석 참조).
 *
 * 기존 첨부는 **다운로드 링크로만** 보여준다. 시안(A_BOA_008_p)은 `pic_0001.jpg 88KB`처럼 파일명과
 * 용량을 표기하지만, **백엔드에 atchFileId로 파일 정보를 조회하는 API가 없어** 저장된 첨부의
 * 이름·크기를 알 방법이 없다(업로드·다운로드·삭제·이미지·스트림만 존재). 그 API가 생기면 여기에
 * 파일명·용량 표기와 개별 삭제 버튼을 붙이면 된다.
 *
 * 새 파일을 고르면 기존 첨부는 교체된다(백엔드 필드가 `atchFileId` 하나뿐이다). 파일을 고르지
 * 않으면 기존 첨부가 그대로 유지된다.
 */
export function BoardAttachmentField({
  label = '첨부파일',
  attachmentId,
}: BoardAttachmentFieldProps) {
  return (
    <Field label={label}>
      {/* 기존 첨부 id를 함께 제출해 "파일을 안 골랐으면 유지"를 서버가 판단할 수 있게 한다. */}
      <input type="hidden" name="attachmentId" value={attachmentId ?? ''} />

      {attachmentId ? (
        <p className="text-body-sm text-foreground-muted">
          기존 첨부파일{' '}
          <a
            href={`${ATTACHMENT_DOWNLOAD_PATH}?atchFileId=${encodeURIComponent(attachmentId)}`}
            className="text-primary underline underline-offset-2"
          >
            다운로드
          </a>{' '}
          — 새 파일을 선택하면 교체됩니다.
        </p>
      ) : null}

      <input
        type="file"
        name="attachment"
        className="w-full text-body-sm text-foreground file:mr-3 file:rounded-md file:border file:border-border file:bg-surface file:px-3 file:py-1.5 file:text-body-sm file:text-foreground"
      />
    </Field>
  );
}