import React from "react";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Separator } from "./ui/separator";
import { ArrowLeft, Printer, Download, Calendar, MapPin, Package, User, FileText, Clock, CheckCircle2 } from "lucide-react";

interface WorkOrderSheetProps {
  workOrder: any;
  onBack: () => void;
}

export function WorkOrderSheet({ workOrder, onBack }: WorkOrderSheetProps) {
  const handlePrint = () => {
    window.print();
  };

  const getStatusColor = (status: string) => {
    const statusColors: Record<string, string> = {
      "대기": "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-0",
      "작업중": "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border-0",
      "작업취소": "bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 border-0",
      "검수": "bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 border-0",
      "완료": "bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 border-0"
    };
    return statusColors[status] || "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-0";
  };

  return (
    <div className="min-h-screen bg-muted/30 dark:bg-background">
      {/* 헤더 - 프린트 시 숨김 */}
      <div className="print:hidden bg-card border-b border-border sticky top-0 z-10">
        <div className="px-4 md:px-6 py-4">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <Button
                variant="outline"
                onClick={onBack}
                size="sm"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                뒤로가기
              </Button>
              <div>
                <h1 className="text-xl md:text-2xl font-bold">작업지시서</h1>
                <p className="text-xs text-muted-foreground mt-0.5">
                  작업지시 번호: WO-{workOrder.no.toString().padStart(4, '0')}
                </p>
              </div>
            </div>
            <div className="flex gap-2">
              <Button variant="outline" size="sm" onClick={handlePrint}>
                <Printer className="h-4 w-4 mr-2" />
                인쇄
              </Button>
              <Button variant="outline" size="sm">
                <Download className="h-4 w-4 mr-2" />
                PDF
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 작업지시서 본문 */}
      <div className="px-4 md:px-6 py-6">
        <Card className="border border-border/50 shadow-sm bg-card">
          {/* 헤더 - 프린트용 */}
          <CardHeader className="border-b border-border bg-muted/30 dark:bg-muted/10 print:bg-white">
            <div className="flex flex-col md:flex-row md:items-start justify-between gap-4">
              <div className="space-y-2">
                <div className="flex items-center gap-3">
                  <CardTitle className="text-xl md:text-2xl">작업지시서</CardTitle>
                  <Badge className={getStatusColor(workOrder.status)}>
                    {workOrder.status}
                  </Badge>
                </div>
                <div className="text-xs md:text-sm text-muted-foreground">
                  발행일: {new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })}
                </div>
              </div>
              <div className="text-right">
                <div className="text-sm font-medium text-muted-foreground">지시번호</div>
                <div className="text-2xl md:text-3xl font-bold text-primary">
                  WO-{workOrder.no.toString().padStart(4, '0')}
                </div>
              </div>
            </div>
          </CardHeader>

          <CardContent className="p-4 md:p-6 space-y-6">
            {/* 기본 정보 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
              <div className="space-y-3 md:space-y-4">
                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-md shrink-0">
                    <User className="h-4 w-4 md:h-5 md:w-5 text-blue-600 dark:text-blue-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      고객사
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground truncate">
                      {workOrder.buyer}
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-md shrink-0">
                    <MapPin className="h-4 w-4 md:h-5 md:w-5 text-green-600 dark:text-green-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      설치 현장
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground">
                      {workOrder.siteName}
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-md shrink-0">
                    <Package className="h-4 w-4 md:h-5 md:w-5 text-purple-600 dark:text-purple-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      제품명
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground">
                      {workOrder.productName}
                    </div>
                  </div>
                </div>
              </div>

              <div className="space-y-3 md:space-y-4">
                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-orange-100 dark:bg-orange-900/30 rounded-md shrink-0">
                    <Calendar className="h-4 w-4 md:h-5 md:w-5 text-orange-600 dark:text-orange-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      수주일
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground">
                      {new Date(workOrder.orderDate).toLocaleDateString('ko-KR')}
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-md shrink-0">
                    <Clock className="h-4 w-4 md:h-5 md:w-5 text-red-600 dark:text-red-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      납기일
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground">
                      {new Date(workOrder.requestDate).toLocaleDateString('ko-KR')}
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3 md:p-4 bg-muted/30 dark:bg-muted/10 rounded-lg border border-border/50">
                  <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-md shrink-0">
                    <FileText className="h-4 w-4 md:h-5 md:w-5 text-indigo-600 dark:text-indigo-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs text-muted-foreground font-medium mb-1">
                      수량
                    </div>
                    <div className="text-base md:text-lg font-semibold text-foreground">
                      {workOrder.quantity} EA
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <Separator className="my-6" />

            {/* 작업 상세 정보 */}
            <div className="space-y-3 md:space-y-4">
              <h3 className="text-base md:text-lg font-bold text-foreground flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 md:h-5 md:w-5 text-primary" />
                작업 상세 정보
              </h3>
              
              <div className="bg-muted/50 dark:bg-muted/20 rounded-lg p-3 md:p-4 border border-border/50">
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
                  <div className="bg-card dark:bg-card/50 p-3 md:p-4 rounded-lg border border-border/30">
                    <div className="text-xs text-muted-foreground mb-1">작업 우선순위</div>
                    <div className="text-lg md:text-xl font-bold text-foreground">
                      {workOrder.workPriority !== null ? `${workOrder.workPriority}순위` : '-'}
                    </div>
                  </div>

                  <div className="bg-card dark:bg-card/50 p-3 md:p-4 rounded-lg border border-border/30">
                    <div className="text-xs text-muted-foreground mb-1">작업 상태</div>
                    <div className="mt-1">
                      <Badge className={getStatusColor(workOrder.status)}>
                        {workOrder.status}
                      </Badge>
                    </div>
                  </div>

                  <div className="bg-card dark:bg-card/50 p-3 md:p-4 rounded-lg border border-border/30">
                    <div className="text-xs text-muted-foreground mb-1">잔여 일수</div>
                    <div className="text-lg md:text-xl font-bold text-foreground">
                      {Math.ceil((new Date(workOrder.requestDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}일
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <Separator className="my-6" />

            {/* 작업 지시 내용 */}
            <div className="space-y-3 md:space-y-4">
              <h3 className="text-base md:text-lg font-bold text-foreground">작업 지시 내용</h3>
              
              <div className="border border-border rounded-lg overflow-hidden bg-card">
                <table className="w-full">
                  <thead className="bg-muted/50 dark:bg-muted/20">
                    <tr>
                      <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                        공정
                      </th>
                      <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider hidden md:table-cell">
                        작업 내용
                      </th>
                      <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider hidden sm:table-cell">
                        담당자
                      </th>
                      <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                        상태
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    <tr className="hover:bg-muted/30 dark:hover:bg-muted/10 transition-colors">
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm font-medium text-foreground">재단</td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden md:table-cell">
                        {workOrder.productName} 재단 작업
                      </td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden sm:table-cell">김재단</td>
                      <td className="px-3 md:px-4 py-2 md:py-3">
                        <Badge className="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border-0">
                          {workOrder.status === "완료" ? "완료" : workOrder.status === "작업중" ? "진행중" : "대기"}
                        </Badge>
                      </td>
                    </tr>
                    <tr className="hover:bg-muted/30 dark:hover:bg-muted/10 transition-colors">
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm font-medium text-foreground">조립</td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden md:table-cell">
                        부품 조립 및 결합
                      </td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden sm:table-cell">이조립</td>
                      <td className="px-3 md:px-4 py-2 md:py-3">
                        <Badge className="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-0">
                          {workOrder.status === "완료" ? "완료" : "대기"}
                        </Badge>
                      </td>
                    </tr>
                    <tr className="hover:bg-muted/30 dark:hover:bg-muted/10 transition-colors">
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm font-medium text-foreground">검수</td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden md:table-cell">
                        품질 검사 및 확인
                      </td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden sm:table-cell">박검수</td>
                      <td className="px-3 md:px-4 py-2 md:py-3">
                        <Badge className="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-0">
                          {workOrder.status === "완료" || workOrder.status === "검수" ? "완료" : "대기"}
                        </Badge>
                      </td>
                    </tr>
                    <tr className="hover:bg-muted/30 dark:hover:bg-muted/10 transition-colors">
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm font-medium text-foreground">포장</td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden md:table-cell">
                        최종 포장 및 출하 준비
                      </td>
                      <td className="px-3 md:px-4 py-2 md:py-3 text-sm text-muted-foreground hidden sm:table-cell">최포장</td>
                      <td className="px-3 md:px-4 py-2 md:py-3">
                        <Badge className="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-0">
                          {workOrder.status === "완료" ? "완료" : "대기"}
                        </Badge>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <Separator className="my-6" />

            {/* 특기사항 */}
            <div className="space-y-3 md:space-y-4">
              <h3 className="text-base md:text-lg font-bold text-foreground">특기사항</h3>
              <div className="bg-muted/50 dark:bg-muted/20 rounded-lg p-3 md:p-4 min-h-[100px] border border-border/50">
                <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">
                  • 제품은 납기일 하루 전까지 완료되어야 합니다.
                  <br />
                  • 현장 설치 일정에 맞춰 출고 준비해 주시기 바랍니다.
                  <br />
                  • 품질 검수는 최종 포장 전 반드시 완료해야 합니다.
                </p>
              </div>
            </div>

            {/* 서명란 */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 mt-6 md:mt-8 pt-6 border-t border-border">
              <div className="text-center space-y-3 md:space-y-4">
                <div className="text-xs md:text-sm font-medium text-muted-foreground">작성자</div>
                <div className="h-16 md:h-20 border-b-2 border-border/50 flex items-end justify-center pb-2">
                  <div className="text-xs md:text-sm text-muted-foreground">(서명)</div>
                </div>
              </div>
              <div className="text-center space-y-3 md:space-y-4">
                <div className="text-xs md:text-sm font-medium text-muted-foreground">생산팀장</div>
                <div className="h-16 md:h-20 border-b-2 border-border/50 flex items-end justify-center pb-2">
                  <div className="text-xs md:text-sm text-muted-foreground">(서명)</div>
                </div>
              </div>
              <div className="text-center space-y-3 md:space-y-4">
                <div className="text-xs md:text-sm font-medium text-muted-foreground">공장장</div>
                <div className="h-16 md:h-20 border-b-2 border-border/50 flex items-end justify-center pb-2">
                  <div className="text-xs md:text-sm text-muted-foreground">(서명)</div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 프린트용 스타일 */}
      <style jsx global>{`
        @media print {
          body {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }
          .print\\:hidden {
            display: none !important;
          }
          @page {
            margin: 1cm;
          }
        }
      `}</style>
    </div>
  );
}
