"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" />
          업로드 가이드
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl" opacityControl={false}>
        <DialogHeader>
          <DialogTitle>파일 업로드 가이드</DialogTitle>
          <DialogDescription>
            올바른 파일명 형식으로 업로드해주세요
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-6">
          {/* 파일명 형식 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">파일명 형식</h3>
            <div className="rounded-lg bg-muted p-4 font-mono text-sm">
              [OWN_DOC_NO]_[REV_NO]_[STAGE]_[YYYYMMDDhhmmss].[확장자]
            </div>
            <p className="text-xs text-muted-foreground">
              ⚠️ 언더스코어(_)가 정확히 3개 있어야 합니다
            </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">
                OWN_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">
                YYYYMMDDhhmmss
              </Badge>
              <div className="text-sm">
                <span className="font-medium">날짜 및 시간</span>
                <span className="text-muted-foreground"> - 업로드 날짜 정보를 기입합니다 (14자리 숫자)</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_20250124143000.pdf
                </code>
              </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_20250124150000.dwg
                </code>
              </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-20250124.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  ✗ 언더스코어(_) 대신 하이픈(-) 사용
                </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">
                  ✗ 날짜/시간 정보 누락
                </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_20250124.pdf
                </code>
                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
                  ✗ 시간 정보 누락 (14자리가 아님)
                </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>파일명 형식이 올바르지 않으면 업로드가 실패합니다</li>
              <li>같은 파일명으로 이미 업로드된 파일이 있으면 덮어쓰지 않고 오류 처리됩니다</li>
              <li>프로젝트와 업체 코드를 먼저 선택해야 업로드 버튼이 활성화됩니다</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}