"use client";

import { HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";

export function SwpUploadHelpDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <HelpCircle className="h-4 w-4" />
          SWP 제출 메뉴 가이드
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>파일 업로드 가이드</DialogTitle>
          <DialogDescription>
            올바른 파일명 형식으로 업로드해주세요
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-6">
          {/* 탭 설명 */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold">탭 설명</h3>
            
            <div className="rounded-lg border p-4 space-y-3">
              <div>
                <Badge variant="default" className="mb-2">
                  DOCUMENT REGISTRATION TAB
                </Badge>
                <p className="text-sm text-muted-foreground">
                  파일을 업로드한 현황입니다. SHI가 파일 접수 여부를 응답할 예정입니다. 
                  업로드한 파일의 승낙 여부 등을 확인할 수 있으며, 접수 전의 Standby 상태의 경우 업로드를 취소할 수 있습니다.
                </p>
              </div>

              <div className="border-t pt-3">
                <Badge variant="default" className="mb-2">
                  DOCUMENT LIST TAB
                </Badge>
                <p className="text-sm text-muted-foreground">
                  파일을 업로드한 뒤, SHI가 업로드한 파일을 수락하면 Rev, Activity No가 만들어지며, 해당 테이블에 추가됩니다. 
                  수락시 Activity No 가 부여됩니다.
                </p>
              </div>
            </div>
          </div>

          {/* 파일명 형식 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">파일명 형식</h3>
            <div className="rounded-lg bg-muted p-4 font-mono text-sm">
              [DOC_NO]_[REV_NO]_[STAGE].[확장자]
            </div>
            <p className="text-xs text-muted-foreground">
              [주의] 언더스코어(_)가 최소 2개 이상 있어야 합니다
            </p>
            <p className="text-xs text-muted-foreground">
              [선택사항] 4번째 항목으로 파일명을 추가할 수 있습니다 (예: [DOC_NO]_[REV_NO]_[STAGE]_[파일명].[확장자])
            </p>
          </div>

          {/* 각 항목 설명 - 1라인 형태 */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold">항목 설명</h3>
            
            <div className="flex items-center gap-3 rounded-lg border p-3">
              <Badge variant="secondary" className="font-mono shrink-0">
                DOC_NO
              </Badge>
              <div className="text-sm">
                <span className="font-medium">벤더의 문서번호</span>
                <span className="text-muted-foreground"> - 프로젝트마다 유니크해야 합니다</span>
              </div>
            </div>

            <div className="flex items-center gap-3 rounded-lg border p-3">
              <Badge variant="secondary" className="font-mono shrink-0">
                REV_NO
              </Badge>
              <div className="text-sm">
                <span className="font-medium">리비전 번호</span>
                <span className="text-muted-foreground"> - 보통 01, 02 같은 식으로 피드백에 따라 증가합니다</span>
              </div>
            </div>

            <div className="flex items-center gap-3 rounded-lg border p-3">
              <Badge variant="secondary" className="font-mono shrink-0">
                STAGE
              </Badge>
              <div className="text-sm">
                <span className="font-medium">스테이지</span>
                <span className="text-muted-foreground"> - 스테이지 정보를 입력해주세요. (예: IFA, IFC)</span>
              </div>
            </div>

            <div className="flex items-center gap-3 rounded-lg border p-3">
              <Badge variant="secondary" className="font-mono shrink-0">
                파일명
              </Badge>
              <div className="text-sm">
                <span className="font-medium">자유 파일명 (선택사항)</span>
                <span className="text-muted-foreground"> - 문서를 식별할 수 있는 이름 (언더스코어 포함 가능, 생략 가능)</span>
              </div>
            </div>
          </div>

          {/* 예시 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">올바른 예시</h3>
            <div className="space-y-2">
              <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3">
                <code className="text-xs font-mono text-green-700 dark:text-green-300">
                  VD-DOC-001_01_IFA.pdf
                </code>
                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                  [O] 기본 형식 (파일명 생략)
                </p>
              </div>
              <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3">
                <code className="text-xs font-mono text-green-700 dark:text-green-300">
                  VD-DOC-001_01_IFA_drawing_final.pdf
                </code>
                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                  [O] 파일명 추가 (파일명에 언더스코어 포함 가능)
                </p>
              </div>
              <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3">
                <code className="text-xs font-mono text-green-700 dark:text-green-300">
                  TECH-SPEC-002_02_IFC.dwg
                </code>
                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                  [O] 기본 형식 사용
                </p>
              </div>
              <div className="rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 p-3">
                <code className="text-xs font-mono text-green-700 dark:text-green-300">
                  DOC-003_03_IFA_test_result_data.xlsx
                </code>
                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                  [O] 파일명 추가 (여러 단어 조합 가능)
                </p>
              </div>
            </div>
          </div>

          {/* 잘못된 예시 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">잘못된 예시</h3>
            <div className="space-y-2">
              <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3">
                <code className="text-xs font-mono text-red-700 dark:text-red-300">
                  VD-DOC-001-01-IFA.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  [X] 언더스코어(_) 대신 하이픈(-) 사용
                </p>
              </div>
              <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3">
                <code className="text-xs font-mono text-red-700 dark:text-red-300">
                  VD-DOC-001_01.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  [X] STAGE 정보 누락 (최소 3개 항목 필요)
                </p>
              </div>
              <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3">
                <code className="text-xs font-mono text-red-700 dark:text-red-300">
                  VD DOC 001_01_IFA.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  [X] 공백 포함 (언더스코어 사용 필요)
                </p>
              </div>
              <div className="rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 p-3">
                <code className="text-xs font-mono text-red-700 dark:text-red-300">
                  VD-DOC-001__IFA.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  [X] REV_NO 비어있음 (빈 항목 불가)
                </p>
              </div>
            </div>
          </div>

          {/* 주의사항 */}
          <div className="rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 p-4">
            <h3 className="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-2">
              [주의사항]
            </h3>
            <ul className="text-xs text-amber-800 dark:text-amber-200 space-y-1 list-disc list-inside">
              <li>파일명은 최소 [DOC_NO]_[REV_NO]_[STAGE].[확장자] 형식이어야 합니다</li>
              <li>DOC_NO는 현재 프로젝트에 할당된 문서번호여야 합니다</li>
              <li>4번째 항목(파일명)은 선택사항으로 생략 가능합니다</li>
              <li>업로드 날짜/시간은 시스템에서 자동으로 생성됩니다</li>
              <li>같은 파일명으로 이미 업로드된 파일이 있으면 덮어쓰지 않고 오류 처리됩니다</li>
              <li>프로젝트를 먼저 선택해야 업로드 버튼이 활성화됩니다</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}