"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 Submission Menu Guide
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>File Upload Guide</DialogTitle>
          <DialogDescription>
            Please upload with the correct file name format
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-6">
          {/* 탭 설명 */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold">Tab Description</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">
                  This shows the status of uploaded files. SHI will respond with file acceptance status.
                  You can check the acceptance status of uploaded files, and cancel uploads in Standby status before acceptance.
                </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">
                  After uploading a file, if SHI accepts the uploaded file, Rev and Activity No are created and added to this table.
                  Activity No is assigned upon acceptance.
                </p>
              </div>
            </div>
          </div>

          {/* 파일명 형식 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">File Name Format</h3>
            <div className="rounded-lg bg-muted p-4 font-mono text-sm">
              [DOC_NO]_[REV_NO]_[STAGE].[Extension]
            </div>
            <p className="text-xs text-muted-foreground">
              [Note] Must contain at least 2 underscores (_)
            </p>
            <p className="text-xs text-muted-foreground">
              [Optional] You can add a file name as the 4th item (e.g. [DOC_NO]_[REV_NO]_[STAGE]_[FileName].[Extension])
            </p>
          </div>

          {/* 각 항목 설명 - 1라인 형태 */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold">Item Description</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">Vendor Document Number</span>
                <span className="text-muted-foreground"> - Must be unique per project</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">Revision Number</span>
                <span className="text-muted-foreground"> - Usually increments like 01, 02 based on feedback</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">Stage</span>
                <span className="text-muted-foreground"> - Please enter stage information. (e.g. 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">
                File Name
              </Badge>
              <div className="text-sm">
                <span className="font-medium">Free File Name (Optional)</span>
                <span className="text-muted-foreground"> - Name to identify the document (Underscores allowed, optional)</span>
              </div>
            </div>
          </div>

          {/* 예시 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Correct Examples</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] Basic Format (File Name Omitted)
                </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] File Name Added (Underscores allowed in file name)
                </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] Basic Format Used
                </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] File Name Added (Multiple words allowed)
                </p>
              </div>
            </div>
          </div>

          {/* 잘못된 예시 */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Incorrect Examples</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] Hyphen (-) used instead of Underscore (_)
                </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 info missing (Minimum 3 items required)
                </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] Contains spaces (Use underscores)
                </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 empty (Cannot be empty)
                </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">
              [Precautions]
            </h3>
            <ul className="text-xs text-amber-800 dark:text-amber-200 space-y-1 list-disc list-inside">
              <li>File name must be at least in [DOC_NO]_[REV_NO]_[STAGE].[Extension] format</li>
              <li>DOC_NO must be a document number assigned to the current project</li>
              <li>The 4th item (File Name) is optional and can be omitted</li>
              <li>Upload date/time is automatically generated by the system</li>
              <li>If a file with the same name is already uploaded, it will not be overwritten and will be treated as an error</li>
              <li>You must select a project first to enable the upload button</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}