import * as React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { GenericData } from "./export-excel-form";
import { SpreadSheets, Worksheet, Column } from "@mescius/spread-sheets-react";
import * as GC from "@mescius/spread-sheets";


interface TemplateViewDialogProps {
    isOpen: boolean;
    onClose: () => void;
    templateData: any;
    selectedRow: GenericData;
    formCode: string;
  }

export function TemplateViewDialog({
    isOpen,
    onClose,
    templateData,
    selectedRow,
    formCode
  }: TemplateViewDialogProps) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="w-[80%] max-w-none h-[80vh] flex flex-col" style={{maxWidth:"80vw"}}>
          <DialogHeader className="flex-shrink-0">
            <DialogTitle>SEDP Template - {formCode}</DialogTitle>
            <DialogDescription>
              {selectedRow && `Selected TAG_NO: ${selectedRow.TAG_NO || 'N/A'}`}
            </DialogDescription>
          </DialogHeader>
          
          {/* 스크롤 가능한 콘텐츠 영역 */}
          <div className="flex-1 overflow-y-auto space-y-4 py-4">
            {/* 여기에 템플릿 데이터나 다른 콘텐츠가 들어갈 예정 */}
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground">
                Template content will be displayed here...
              </p>
              
              {/* 임시로 templateData 표시 */}
              {templateData && (
                <pre className="bg-muted p-4 rounded text-sm overflow-auto">
                  {JSON.stringify(templateData, null, 2)}
                </pre>
              )}
            </div>
          </div>
  
          <DialogFooter className="flex-shrink-0">
            <Button variant="outline" onClick={onClose}>
              Close
            </Button>
            <Button 
              variant="default" 
              onClick={() => {
                // 여기에 Template 적용 로직 추가 가능
                console.log('Apply template logic here');
                onClose();
              }}
            >
              Apply Template
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }