import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
import { Badge } from "./ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "./ui/dialog";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Textarea } from "./ui/textarea";
import { toast } from "sonner@2.0.3";
import { Search, Plus, Download, Filter, Eye, Edit, Trash2, MessageSquare, FileText, Bell, Pin, Upload, Calendar } from "lucide-react";

interface Notice {
  id: string;
  title: string;
  content: string;
  author: string;
  department: string;
  date: string;
  views: number;
  isPinned: boolean;
  isImportant: boolean;
  category: string;
}

interface Document {
  id: string;
  title: string;
  description: string;
  fileName: string;
  fileSize: string;
  version: string;
  author: string;
  uploadDate: string;
  downloads: number;
  category: string;
  accessLevel: string;
}

interface Approval {
  id: string;
  title: string;
  type: string;
  requestor: string;
  department: string;
  requestDate: string;
  status: string;
  currentApprover: string;
  amount?: number;
  urgency: string;
}

export function Board() {
  const [notices, setNotices] = useState<Notice[]>([
    {
      id: "N001",
      title: "2025년 1분기 생산 계획 공지",
      content: "2025년 1분기 생산 계획이 확정되었습니다. 각 부서는 계획에 따라 준비하시기 바랍니다.",
      author: "김경영",
      department: "경영팀",
      date: "2025-09-25",
      views: 45,
      isPinned: true,
      isImportant: true,
      category: "일반공지"
    },
    {
      id: "N002",
      title: "안전교육 실시 안내",
      content: "월간 안전교육을 다음 주에 실시합니다. 전직원 필수 참석 바랍니다.",
      author: "박안전",
      department: "안전관리팀",
      date: "2025-09-24",
      views: 32,
      isPinned: true,
      isImportant: false,
      category: "안전공지"
    },
    {
      id: "N003",
      title: "신규 설비 도입 완료",
      content: "CNC 머시닝센터 3호기 설치가 완료되었습니다.",
      author: "이설비",
      department: "설비팀",
      date: "2025-09-23",
      views: 28,
      isPinned: false,
      isImportant: false,
      category: "업무공지"
    },
    {
      id: "N004",
      title: "시스템 업데이트 예정",
      content: "SAM 시스템 정기 업데이트가 금요일 밤에 진행됩니다.",
      author: "최IT",
      department: "IT팀",
      date: "2025-09-22",
      views: 67,
      isPinned: false,
      isImportant: true,
      category: "시스템"
    }
  ]);

  const [documents, setDocuments] = useState<Document[]>([
    {
      id: "D001",
      title: "품질관리 매뉴얼 v2.1",
      description: "품질관리 표준 작업 절차서 및 체크리스트",
      fileName: "QMS_Manual_v2.1.pdf",
      fileSize: "2.4MB",
      version: "v2.1",
      author: "박품질",
      uploadDate: "2025-09-20",
      downloads: 23,
      category: "매뉴얼",
      accessLevel: "전체"
    },
    {
      id: "D002",
      title: "생산 공정도 템플릿",
      description: "표준 생산 공정도 작성 템플릿",
      fileName: "Process_Template.xlsx",
      fileSize: "156KB",
      version: "v1.3",
      author: "이생산",
      uploadDate: "2025-09-18",
      downloads: 15,
      category: "템플릿",
      accessLevel: "생산팀"
    },
    {
      id: "D003",
      title: "안전관리 체크리스트",
      description: "일일 안전점검 체크리스트 양식",
      fileName: "Safety_Checklist.pdf",
      fileSize: "890KB",
      version: "v1.0",
      author: "박안전",
      uploadDate: "2025-09-15",
      downloads: 41,
      category: "안전자료",
      accessLevel: "전체"
    }
  ]);

  const [approvals, setApprovals] = useState<Approval[]>([
    {
      id: "A001",
      title: "원자재 구매 품의",
      type: "구매품의",
      requestor: "최자재",
      department: "자재팀",
      requestDate: "2025-09-25",
      status: "결재대기",
      currentApprover: "김부장",
      amount: 15000000,
      urgency: "긴급"
    },
    {
      id: "A002",
      title: "설비 수리비 지출 결의",
      type: "지출결의",
      requestor: "정설비",
      department: "설비팀",
      requestDate: "2025-09-24",
      status: "승인완료",
      currentApprover: "-",
      amount: 2500000,
      urgency: "보통"
    },
    {
      id: "A003",
      title: "신제품 개발 품의",
      type: "개발품의",
      requestor: "김개발",
      department: "개발팀",
      requestDate: "2025-09-23",
      status: "검토중",
      currentApprover: "이이사",
      urgency: "보통"
    }
  ]);

  const [activeTab, setActiveTab] = useState("notices");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<any>(null);
  const [isViewModalOpen, setIsViewModalOpen] = useState(false);

  const getCategoryColor = (category: string) => {
    switch (category) {
      case "일반공지": return "bg-blue-500";
      case "안전공지": return "bg-red-500";
      case "업무공지": return "bg-green-500";
      case "시스템": return "bg-purple-500";
      default: return "bg-gray-500";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "결재대기": return "bg-yellow-500";
      case "승인완료": return "bg-green-500";
      case "반려": return "bg-red-500";
      case "검토중": return "bg-blue-500";
      default: return "bg-gray-500";
    }
  };

  const getUrgencyColor = (urgency: string) => {
    switch (urgency) {
      case "긴급": return "text-red-600";
      case "보통": return "text-yellow-600";
      case "낮음": return "text-green-600";
      default: return "text-gray-600";
    }
  };

  const handleViewItem = (item: any) => {
    setSelectedItem(item);
    setIsViewModalOpen(true);
    
    // 조회수 증가 (공지사항의 경우)
    if (activeTab === "notices" && item.id) {
      setNotices(prev => prev.map(notice => 
        notice.id === item.id ? { ...notice, views: notice.views + 1 } : notice
      ));
    }
  };

  return (
    <div className="p-4 md:p-8 space-y-6 md:space-y-8">
      {/* 헤더 */}
      <div className="samsung-card samsung-gradient-card relative overflow-hidden">
        <div className="absolute top-0 left-0 right-0 h-2 samsung-hero-gradient"></div>
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pt-2">
          <div>
            <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-2">전자결재·협업</h1>
            <p className="text-muted-foreground text-lg">공지사항, 자료실, 전자결재 통합 관리 시스템</p>
          </div>
          <Button 
            className="samsung-button w-full md:w-auto min-h-[48px]" 
            onClick={() => setIsModalOpen(true)}
          >
            <Plus className="h-5 w-5 mr-3" />
            새 글 작성
          </Button>
        </div>
      </div>

      {/* 협업 대시보드 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mb-8">
        <Card className="samsung-card samsung-gradient-card hover:scale-105 hover:-translate-y-2 transition-all duration-500 border-0 group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
            <CardTitle className="text-sm font-bold text-muted-foreground uppercase tracking-wide">신규 공지</CardTitle>
            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center samsung-shadow group-hover:scale-110 transition-transform duration-300">
              <Bell className="h-6 w-6 text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black text-blue-600 mb-3">
              {notices.filter(n => {
                const today = new Date();
                const noticeDate = new Date(n.date);
                const diffTime = Math.abs(today.getTime() - noticeDate.getTime());
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                return diffDays <= 7;
              }).length}건
            </div>
            <p className="text-sm text-muted-foreground bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl px-3 py-2 font-semibold">
              최근 7일 내 공지
            </p>
          </CardContent>
        </Card>

        <Card className="samsung-card samsung-gradient-card hover:scale-105 hover:-translate-y-2 transition-all duration-500 border-0 group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
            <CardTitle className="text-sm font-bold text-muted-foreground uppercase tracking-wide">자료실</CardTitle>
            <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center samsung-shadow group-hover:scale-110 transition-transform duration-300">
              <FileText className="h-6 w-6 text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black text-green-600 mb-3">{documents.length}개</div>
            <p className="text-sm text-muted-foreground bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl px-3 py-2 font-semibold">
              등록된 문서 수
            </p>
          </CardContent>
        </Card>

        <Card className="samsung-card samsung-gradient-card hover:scale-105 hover:-translate-y-2 transition-all duration-500 border-0 group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
            <CardTitle className="text-sm font-bold text-muted-foreground uppercase tracking-wide">결재 대기</CardTitle>
            <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center samsung-shadow group-hover:scale-110 transition-transform duration-300">
              <MessageSquare className="h-6 w-6 text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black text-orange-600 mb-3">
              {approvals.filter(a => a.status === "결재대기").length}건
            </div>
            <p className="text-sm text-muted-foreground bg-gradient-to-r from-orange-50 to-red-50 rounded-xl px-3 py-2 font-semibold">
              처리 대기중인 결재
            </p>
          </CardContent>
        </Card>

        <Card className="samsung-card samsung-gradient-card hover:scale-105 hover:-translate-y-2 transition-all duration-500 border-0 group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
            <CardTitle className="text-sm font-bold text-muted-foreground uppercase tracking-wide">긴급 건</CardTitle>
            <div className="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-2xl flex items-center justify-center samsung-shadow group-hover:scale-110 transition-transform duration-300">
              <Calendar className="h-6 w-6 text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black text-red-600 mb-3">
              {approvals.filter(a => a.urgency === "긴급").length}건
            </div>
            <p className="text-sm text-muted-foreground bg-gradient-to-r from-red-50 to-pink-50 rounded-xl px-3 py-2 font-semibold">
              긴급 처리 필요
            </p>
          </CardContent>
        </Card>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <div className="overflow-x-auto">
          <TabsList className="grid w-full grid-cols-3 min-w-[400px] samsung-glass h-14 p-2 rounded-2xl">
            <TabsTrigger value="notices" className="flex items-center space-x-3 rounded-xl h-10 transition-all duration-300 data-[state=active]:samsung-hero-gradient data-[state=active]:text-white">
              <Bell className="h-5 w-5" />
              <span className="hidden sm:inline font-semibold">공지사항</span>
              <span className="sm:hidden font-semibold">공지</span>
            </TabsTrigger>
            <TabsTrigger value="documents" className="flex items-center space-x-3 rounded-xl h-10 transition-all duration-300 data-[state=active]:samsung-hero-gradient data-[state=active]:text-white">
              <FileText className="h-5 w-5" />
              <span className="hidden sm:inline font-semibold">자료실</span>
              <span className="sm:hidden font-semibold">자료</span>
            </TabsTrigger>
            <TabsTrigger value="approvals" className="flex items-center space-x-3 rounded-xl h-10 transition-all duration-300 data-[state=active]:samsung-hero-gradient data-[state=active]:text-white">
              <MessageSquare className="h-5 w-5" />
              <span className="hidden sm:inline font-semibold">전자결재</span>
              <span className="sm:hidden font-semibold">결재</span>
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="notices" className="space-y-6">
          <Card className="samsung-card samsung-gradient-card border-0">
            <CardHeader>
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <CardTitle className="text-2xl font-bold text-foreground">📢 공지사항</CardTitle>
                <div className="flex flex-col md:flex-row items-stretch md:items-center space-y-3 md:space-y-0 md:space-x-4">
                  <div className="relative">
                    <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5" />
                    <Input placeholder="제목 검색..." className="pl-12 w-full md:w-80 samsung-input border-0" />
                  </div>
                  <Select defaultValue="all">
                    <SelectTrigger className="w-full md:w-40 samsung-input border-0">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">전체</SelectItem>
                      <SelectItem value="일반공지">일반공지</SelectItem>
                      <SelectItem value="안전공지">안전공지</SelectItem>
                      <SelectItem value="업무공지">업무공지</SelectItem>
                      <SelectItem value="시스템">시스템</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="min-w-[60px]">상태</TableHead>
                      <TableHead className="min-w-[80px]">분류</TableHead>
                      <TableHead className="min-w-[200px]">제목</TableHead>
                      <TableHead className="min-w-[80px]">작성자</TableHead>
                      <TableHead className="min-w-[100px]">부서</TableHead>
                      <TableHead className="min-w-[100px]">작성일</TableHead>
                      <TableHead className="min-w-[60px]">조회</TableHead>
                      <TableHead className="min-w-[80px]">관리</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {notices.map((notice) => (
                      <TableRow key={notice.id}>
                        <TableCell>
                          <div className="flex items-center space-x-1">
                            {notice.isPinned && (
                              <Pin className="h-3 w-3 text-red-500" />
                            )}
                            {notice.isImportant && (
                              <span className="text-red-500 text-xs">●</span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge className={`${getCategoryColor(notice.category)} text-white text-xs`}>
                            {notice.category}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <button 
                            onClick={() => handleViewItem(notice)}
                            className="text-left hover:text-blue-600 hover:underline"
                          >
                            {notice.title}
                          </button>
                        </TableCell>
                        <TableCell>{notice.author}</TableCell>
                        <TableCell>{notice.department}</TableCell>
                        <TableCell>{notice.date}</TableCell>
                        <TableCell>{notice.views}</TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-1">
                            <Button 
                              size="sm" 
                              variant="outline"
                              onClick={() => handleViewItem(notice)}
                              className="p-3 rounded-xl hover:scale-105 transition-all duration-300 border-primary/20 hover:bg-primary/10"
                            >
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline" className="p-3 rounded-xl hover:scale-105 transition-all duration-300 border-primary/20 hover:bg-primary/10">
                              <Edit className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="documents" className="space-y-6">
          <Card className="samsung-card samsung-gradient-card border-0">
            <CardHeader>
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <CardTitle className="text-2xl font-bold text-foreground">📁 자료실</CardTitle>
                <Button className="samsung-button w-full md:w-auto min-h-[48px]">
                  <Upload className="h-5 w-5 mr-3" />
                  파일 업로드
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {documents.map((doc) => (
                  <Card key={doc.id} className="samsung-card samsung-gradient-card border-0 p-6 hover:scale-105 hover:-translate-y-2 transition-all duration-500 group">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex-1">
                        <h4 className="font-bold text-base mb-2 text-foreground">{doc.title}</h4>
                        <p className="text-sm text-muted-foreground mb-3">{doc.description}</p>
                        <div className="flex items-center space-x-2 text-sm text-muted-foreground bg-muted/50 rounded-xl px-3 py-2">
                          <span>{doc.fileName}</span>
                          <span>•</span>
                          <span className="font-semibold">{doc.fileSize}</span>
                        </div>
                      </div>
                      <Badge variant="outline" className="text-sm font-semibold px-3 py-1 rounded-xl">
                        {doc.version}
                      </Badge>
                    </div>
                    <div className="flex justify-between items-center text-sm text-muted-foreground mb-4">
                      <span className="font-semibold">{doc.author}</span>
                      <span>{doc.uploadDate}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-muted-foreground">다운로드: <span className="font-bold text-primary">{doc.downloads}</span>회</span>
                      <div className="flex space-x-2">
                        <Button size="sm" variant="outline" className="p-3 rounded-xl hover:scale-105 transition-all duration-300 border-primary/20 hover:bg-primary/10">
                          <Download className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="outline" className="p-3 rounded-xl hover:scale-105 transition-all duration-300 border-primary/20 hover:bg-primary/10">
                          <Eye className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="approvals" className="space-y-6">
          <Card className="samsung-card samsung-gradient-card border-0">
            <CardHeader>
              <CardTitle className="text-2xl font-bold text-foreground">📋 전자결재</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="min-w-[100px]">결재번호</TableHead>
                      <TableHead className="min-w-[150px]">제목</TableHead>
                      <TableHead className="min-w-[80px]">유형</TableHead>
                      <TableHead className="min-w-[80px]">기안자</TableHead>
                      <TableHead className="min-w-[80px]">부서</TableHead>
                      <TableHead className="min-w-[100px]">기안일</TableHead>
                      <TableHead className="min-w-[80px]">상태</TableHead>
                      <TableHead className="min-w-[100px]">현재결재자</TableHead>
                      <TableHead className="min-w-[80px]">긴급도</TableHead>
                      <TableHead className="min-w-[80px]">관리</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {approvals.map((approval) => (
                      <TableRow key={approval.id}>
                        <TableCell className="font-medium">{approval.id}</TableCell>
                        <TableCell>
                          <button 
                            onClick={() => handleViewItem(approval)}
                            className="text-left hover:text-blue-600 hover:underline"
                          >
                            {approval.title}
                          </button>
                        </TableCell>
                        <TableCell>{approval.type}</TableCell>
                        <TableCell>{approval.requestor}</TableCell>
                        <TableCell>{approval.department}</TableCell>
                        <TableCell>{approval.requestDate}</TableCell>
                        <TableCell>
                          <Badge className={`${getStatusColor(approval.status)} text-white text-xs`}>
                            {approval.status}
                          </Badge>
                        </TableCell>
                        <TableCell>{approval.currentApprover}</TableCell>
                        <TableCell>
                          <span className={getUrgencyColor(approval.urgency)}>
                            {approval.urgency}
                          </span>
                        </TableCell>
                        <TableCell>
                          <Button 
                            size="sm" 
                            variant="outline"
                            onClick={() => handleViewItem(approval)}
                            className="p-3 rounded-xl hover:scale-105 transition-all duration-300 border-primary/20 hover:bg-primary/10"
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 상세보기 모달 */}
      <Dialog open={isViewModalOpen} onOpenChange={setIsViewModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-xl md:max-w-4xl max-h-[90vh] overflow-y-auto samsung-glass rounded-3xl border-0">
          <DialogHeader>
            <DialogTitle>
              {activeTab === "notices" && "공지사항 상세"}
              {activeTab === "documents" && "문서 상세"}
              {activeTab === "approvals" && "결재 상세"}
            </DialogTitle>
            <DialogDescription>
              {activeTab === "notices" && "공지사항의 상세 내용을 확인합니다."}
              {activeTab === "documents" && "문서의 상세 정보를 확인합니다."}
              {activeTab === "approvals" && "결재 건의 상세 내용을 확인합니다."}
            </DialogDescription>
          </DialogHeader>
          {selectedItem && (
            <div className="space-y-6">
              {activeTab === "notices" && (
                <div>
                  <div className="border-b pb-4 mb-4">
                    <div className="flex items-center space-x-2 mb-2">
                      <h2 className="text-xl font-bold">{selectedItem.title}</h2>
                      {selectedItem.isPinned && <Pin className="h-4 w-4 text-red-500" />}
                      {selectedItem.isImportant && <span className="text-red-500">●</span>}
                    </div>
                    <div className="flex items-center space-x-4 text-sm text-gray-600">
                      <span>작성자: {selectedItem.author}</span>
                      <span>부서: {selectedItem.department}</span>
                      <span>작성일: {selectedItem.date}</span>
                      <span>조회수: {selectedItem.views}</span>
                    </div>
                  </div>
                  <div className="prose max-w-none">
                    <p>{selectedItem.content}</p>
                  </div>
                </div>
              )}
              
              {activeTab === "approvals" && (
                <div>
                  <div className="border-b pb-4 mb-4">
                    <h2 className="text-xl font-bold mb-2">{selectedItem.title}</h2>
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-gray-600">결재번호:</span> {selectedItem.id}
                      </div>
                      <div>
                        <span className="text-gray-600">유형:</span> {selectedItem.type}
                      </div>
                      <div>
                        <span className="text-gray-600">기안자:</span> {selectedItem.requestor}
                      </div>
                      <div>
                        <span className="text-gray-600">부서:</span> {selectedItem.department}
                      </div>
                      <div>
                        <span className="text-gray-600">기안일:</span> {selectedItem.requestDate}
                      </div>
                      <div>
                        <span className="text-gray-600">상태:</span> 
                        <Badge className={`ml-2 ${getStatusColor(selectedItem.status)} text-white text-xs`}>
                          {selectedItem.status}
                        </Badge>
                      </div>
                      {selectedItem.amount && (
                        <div>
                          <span className="text-gray-600">금액:</span> {selectedItem.amount.toLocaleString()}원
                        </div>
                      )}
                      <div>
                        <span className="text-gray-600">긴급도:</span> 
                        <span className={getUrgencyColor(selectedItem.urgency)}> {selectedItem.urgency}</span>
                      </div>
                    </div>
                  </div>
                  
                  {selectedItem.status === "결재대기" && (
                    <div className="flex space-x-4">
                      <Button className="samsung-button bg-gradient-to-r from-green-500 to-emerald-600">승인</Button>
                      <Button variant="outline" className="samsung-button-secondary border-red-500 text-red-600 hover:bg-red-50">반려</Button>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
          <div className="flex justify-end">
            <Button variant="outline" onClick={() => setIsViewModalOpen(false)} className="samsung-button-secondary">닫기</Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}