'use client';

import {
  Dialog,
  DialogContent,
  DialogTitle,
  VisuallyHidden,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import {
  Copy,
  Edit,
  X as XIcon,
  CheckCircle,
  Printer,
  Share2,
  ChevronDown,
  FileText,
  Mail,
  Phone,
  MessageCircle,
} from 'lucide-react';
import { ProposalDocument } from './ProposalDocument';
import { ExpenseReportDocument } from './ExpenseReportDocument';
import { ExpenseEstimateDocument } from './ExpenseEstimateDocument';
import type {
  DocumentType,
  DocumentDetailModalProps,
  ProposalDocumentData,
  ExpenseReportDocumentData,
  ExpenseEstimateDocumentData,
} from './types';

export function DocumentDetailModal({
  open,
  onOpenChange,
  documentType,
  data,
  onEdit,
  onCopy,
  onApprove,
  onReject,
}: DocumentDetailModalProps) {
  const getDocumentTitle = () => {
    switch (documentType) {
      case 'proposal':
        return '품의서';
      case 'expenseReport':
        return '지출결의서';
      case 'expenseEstimate':
        return '지출 예상 내역서';
      default:
        return '문서';
    }
  };

  const handlePrint = () => {
    window.print();
  };

  const handleSharePdf = () => {
    console.log('PDF 다운로드');
  };

  const handleShareEmail = () => {
    console.log('이메일 공유');
  };

  const handleShareFax = () => {
    console.log('팩스 전송');
  };

  const handleShareKakao = () => {
    console.log('카카오톡 공유');
  };

  const renderDocument = () => {
    switch (documentType) {
      case 'proposal':
        return <ProposalDocument data={data as ProposalDocumentData} />;
      case 'expenseReport':
        return <ExpenseReportDocument data={data as ExpenseReportDocumentData} />;
      case 'expenseEstimate':
        return <ExpenseEstimateDocument data={data as ExpenseEstimateDocumentData} />;
      default:
        return null;
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] md:max-w-[800px] lg:max-w-[900px] h-[95vh] p-0 flex flex-col gap-0 overflow-hidden [&>button]:hidden">
        <VisuallyHidden>
          <DialogTitle>{getDocumentTitle()} 상세</DialogTitle>
        </VisuallyHidden>

        {/* 헤더 영역 - 고정 */}
        <div className="flex-shrink-0 flex items-center justify-between px-6 py-4 border-b bg-white">
          <h2 className="text-lg font-semibold">{getDocumentTitle()} 상세</h2>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onOpenChange(false)}
            className="h-8 w-8"
          >
            <XIcon className="h-4 w-4" />
          </Button>
        </div>

        {/* 버튼 영역 - 고정 */}
        <div className="flex-shrink-0 flex items-center gap-2 px-6 py-3 bg-muted/30 border-b">
          <Button variant="outline" size="sm" onClick={onCopy}>
            <Copy className="h-4 w-4 mr-1" />
            복제
          </Button>
          <Button variant="outline" size="sm" onClick={onEdit}>
            <Edit className="h-4 w-4 mr-1" />
            수정
          </Button>
          <Button variant="outline" size="sm" onClick={onReject} className="text-red-600 hover:text-red-700">
            <XIcon className="h-4 w-4 mr-1" />
            반려
          </Button>
          <Button variant="default" size="sm" onClick={onApprove} className="bg-blue-600 hover:bg-blue-700">
            <CheckCircle className="h-4 w-4 mr-1" />
            승인
          </Button>
          <Button variant="outline" size="sm" onClick={handlePrint}>
            <Printer className="h-4 w-4 mr-1" />
            인쇄
          </Button>

          {/* 공유 드롭다운 */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm">
                <Share2 className="h-4 w-4 mr-1" />
                공유
                <ChevronDown className="h-3 w-3 ml-1" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={handleSharePdf}>
                <FileText className="h-4 w-4 mr-2" />
                PDF 다운로드
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handleShareEmail}>
                <Mail className="h-4 w-4 mr-2" />
                이메일
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handleShareFax}>
                <Phone className="h-4 w-4 mr-2" />
                팩스
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handleShareKakao}>
                <MessageCircle className="h-4 w-4 mr-2" />
                카카오톡
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        {/* 문서 영역 - 스크롤 */}
        <div className="flex-1 overflow-y-auto bg-gray-100 p-6">
          <div className="max-w-[210mm] mx-auto bg-white shadow-lg rounded-lg">
            {renderDocument()}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

// Re-export types and components
export type { DocumentType, DocumentDetailModalProps } from './types';
export { ProposalDocument } from './ProposalDocument';
export { ExpenseReportDocument } from './ExpenseReportDocument';
export { ExpenseEstimateDocument } from './ExpenseEstimateDocument';