'use client';

/**
 * 작업지시 상세 페이지
 * API 연동 완료 (2025-12-26)
 * IntegratedDetailTemplate 마이그레이션 완료 (2026-01-20)
 */

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { invalidateDashboard } from '@/lib/dashboard-invalidation';
import { useRouter } from 'next/navigation';
import { FileText, Play, CheckCircle2, Loader2, Undo2, ClipboardCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { workOrderConfig } from './workOrderConfig';
import { ServerErrorPage } from '@/components/common/ServerErrorPage';
import { WorkLogModal } from '../WorkerScreen/WorkLogModal';
import { InspectionReportModal } from './documents';
import { toast } from 'sonner';
import { getWorkOrderById, updateWorkOrderStatus } from './actions';
import {
  WORK_ORDER_STATUS_LABELS,
  WORK_ORDER_STATUS_COLORS,
  ISSUE_STATUS_LABELS,
  SCREEN_PROCESS_STEPS,
  SLAT_PROCESS_STEPS,
  BENDING_PROCESS_STEPS,
  filterBendingSteps,
  type WorkOrder,
  type ProcessType,
  type ProcessStep,
} from './types';

// 수량 포맷팅 (EA, 개 등 개수 단위는 정수, m, kg 등은 소수점 유지)
function formatQuantity(quantity: number | string, unit: string): string {
  const num = typeof quantity === 'string' ? Number(quantity) : quantity;
  if (isNaN(num)) return String(quantity);
  const countableUnits = ['EA', 'ea', '개', '대', '세트', 'SET', 'set', 'PCS', 'pcs'];
  if (countableUnits.includes(unit) || unit === '-') {
    return String(Math.floor(num));
  }
  // 소수점이 있으면 표시, 없으면 정수로
  return Number.isInteger(num) ? String(num) : num.toFixed(2);
}

// 공정 진행 단계 (wrapper 없이 pills만 렌더링)
function ProcessStepPills({
  processType,
  currentStep,
  workSteps,
  itemCodes,
}: {
  processType: ProcessType;
  currentStep: number;
  workSteps?: ProcessStep[];
  itemCodes?: string[];
}) {
  // 동적 workSteps 우선 사용, 없으면 하드코딩 폴백
  let steps = workSteps && workSteps.length > 0
    ? workSteps
    : processType === 'screen'
      ? SCREEN_PROCESS_STEPS
      : processType === 'slat'
        ? SLAT_PROCESS_STEPS
        : BENDING_PROCESS_STEPS;

  // 절곡 공정: BD 코드에 따라 필요한 단계만 필터링
  if (processType === 'bending' && itemCodes && itemCodes.length > 0) {
    steps = filterBendingSteps(itemCodes, BENDING_PROCESS_STEPS);
  }

  if (steps.length === 0) {
    return <p className="text-gray-500">공정 단계가 설정되지 않았습니다.</p>;
  }

  return (
    <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2">
      {steps.map((step, index) => {
        const isCompleted = index < currentStep;

        return (
          <div
            key={step.key || `step-${index}`}
            className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium ${
              isCompleted
                ? 'bg-emerald-500 text-white'
                : 'bg-gray-800 text-white'
            }`}
          >
            <span>{step.label}</span>
            {isCompleted && (
              <span className="font-semibold">완료</span>
            )}
          </div>
        );
      })}
    </div>
  );
}

// 전개도 상세정보 컴포넌트 (절곡용)
function BendingDetailsSection({ order }: { order: WorkOrder }) {
  if (!order.bendingDetails || order.bendingDetails.length === 0) {
    return null;
  }

  return (
    <div className="bg-white border rounded-lg p-6">
      <h3 className="font-semibold mb-4">전개도 상세정보</h3>
      <div className="space-y-4">
        {order.bendingDetails.map((detail) => (
          <div key={detail.id} className="border rounded-lg overflow-hidden">
            {/* 헤더 */}
            <div className="flex items-center justify-between bg-gray-100 px-4 py-2">
              <div className="flex items-center gap-2">
                <span className="font-semibold">{detail.code}</span>
                <span className="font-medium">{detail.name}</span>
                <span className="text-sm text-muted-foreground">{detail.material}</span>
              </div>
              <span className="text-sm">수량: {Math.floor(detail.quantity)}</span>
            </div>

            {/* 상세 정보 */}
            <div className="grid grid-cols-5 gap-4 p-4">
              <div>
                <p className="text-xs text-muted-foreground mb-1">전개폭</p>
                <p className="font-medium">{detail.developWidth}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-1">길이</p>
                <p className="font-medium">{detail.length}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-1">중량</p>
                <p className="font-medium">{detail.weight}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-1">비고</p>
                <p className="font-medium">{detail.note}</p>
              </div>
              <div className="row-span-2 flex items-center justify-center border rounded bg-gray-50">
                {/* 전개도 이미지 placeholder */}
                <div className="text-center p-4">
                  <div className="w-24 h-16 border-2 border-dashed border-gray-300 rounded flex items-center justify-center mb-1">
                    <span className="text-xs text-muted-foreground">전개도</span>
                  </div>
                  <span className="text-xs text-muted-foreground">{detail.developDimension}</span>
                </div>
              </div>
              <div className="col-span-4">
                <p className="text-xs text-muted-foreground mb-1">전개치수</p>
                <p className="font-medium">{detail.developDimension}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 이슈 섹션 컴포넌트
function IssueSection({ order }: { order: WorkOrder }) {
  if (!order.issues || order.issues.length === 0) {
    return null;
  }

  return (
    <div className="bg-white border rounded-lg p-6">
      <h3 className="font-semibold mb-4">이슈 ({order.issues.length}건)</h3>
      <div className="space-y-3">
        {order.issues.map((issue) => (
          <div key={issue.id} className="flex items-start gap-3 p-4 bg-red-50 border border-red-200 rounded-lg">
            <Badge
              variant="outline"
              className={`shrink-0 ${
                issue.status === 'processing'
                  ? 'bg-yellow-100 text-yellow-700 border-yellow-300'
                  : issue.status === 'resolved'
                  ? 'bg-green-100 text-green-700 border-green-300'
                  : 'bg-gray-100 text-gray-700 border-gray-300'
              }`}
            >
              {ISSUE_STATUS_LABELS[issue.status]}
            </Badge>
            <div>
              <span className="font-medium">{issue.type}</span>
              <span className="mx-2 text-muted-foreground">·</span>
              <span>{issue.description}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

interface WorkOrderDetailProps {
  orderId: string;
}

export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
  const router = useRouter();
  const [isWorkLogOpen, setIsWorkLogOpen] = useState(false);
  const [isInspectionOpen, setIsInspectionOpen] = useState(false);
  const [order, setOrder] = useState<WorkOrder | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isStatusUpdating, setIsStatusUpdating] = useState(false);

  // 수정 모드로 이동 핸들러
  const handleEdit = useCallback(() => {
    router.push(`/production/work-orders/${orderId}?mode=edit`);
  }, [router, orderId]);

  // API에서 데이터 로드
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      const result = await getWorkOrderById(orderId);
      if (result.success && result.data) {
        const orderData = result.data;
        setOrder(orderData);
      } else {
        toast.error(result.error || '작업지시 조회에 실패했습니다.');
      }
    } catch (error) {
      console.error('[WorkOrderDetail] loadData error:', error);
      toast.error('데이터 로드 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, [orderId]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // 상태 변경 핸들러
  const handleStatusChange = useCallback(async (newStatus: 'waiting' | 'in_progress' | 'completed') => {
    if (!order) return;

    setIsStatusUpdating(true);
    try {
      const result = await updateWorkOrderStatus(orderId, newStatus);
      if (result.success && result.data) {
        invalidateDashboard('production');
        setOrder(result.data);
        const statusLabels = {
          waiting: '작업대기',
          in_progress: '작업중',
          completed: '작업완료',
        };
        toast.success(`상태가 '${statusLabels[newStatus]}'(으)로 변경되었습니다.`);
      } else {
        toast.error(result.error || '상태 변경에 실패했습니다.');
      }
    } catch (error) {
      console.error('[WorkOrderDetail] handleStatusChange error:', error);
      toast.error('상태 변경 중 오류가 발생했습니다.');
    } finally {
      setIsStatusUpdating(false);
    }
  }, [order, orderId]);

  // 커스텀 헤더 액션 (상태 변경 버튼, 작업일지 버튼)
  const customHeaderActions = useMemo(() => {
    if (!order) return null;

    return (
      <>
        {/* 상태 변경 버튼 */}
        {order.status === 'waiting' && (
          <Button
            onClick={() => handleStatusChange('in_progress')}
            disabled={isStatusUpdating}
            className="bg-green-600 hover:bg-green-700"
            size="sm"
          >
            {isStatusUpdating ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Play className="w-4 h-4 md:mr-2" />
            )}
            <span className="hidden md:inline">작업 시작</span>
          </Button>
        )}
        {order.status === 'in_progress' && (
          <>
            <Button
              variant="outline"
              onClick={() => handleStatusChange('waiting')}
              disabled={isStatusUpdating}
              className="text-muted-foreground hover:text-foreground"
              size="sm"
            >
              {isStatusUpdating ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Undo2 className="w-4 h-4 md:mr-2" />
              )}
              <span className="hidden md:inline">작업 취소</span>
            </Button>
            <Button
              onClick={() => handleStatusChange('completed')}
              disabled={isStatusUpdating}
              className="bg-purple-600 hover:bg-purple-700"
              size="sm"
            >
              {isStatusUpdating ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <CheckCircle2 className="w-4 h-4 md:mr-2" />
              )}
              <span className="hidden md:inline">작업 완료</span>
            </Button>
          </>
        )}
        {order.status === 'completed' && (
          <Button
            variant="outline"
            onClick={() => handleStatusChange('in_progress')}
            disabled={isStatusUpdating}
            className="text-orange-600 hover:text-orange-700 border-orange-300 hover:bg-orange-50"
            size="sm"
          >
            {isStatusUpdating ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Undo2 className="w-4 h-4 md:mr-2" />
            )}
            <span className="hidden md:inline">되돌리기</span>
          </Button>
        )}
        <Button variant="outline" onClick={() => setIsWorkLogOpen(true)} size="sm">
          <FileText className="w-4 h-4 md:mr-2" />
          <span className="hidden md:inline">작업일지 보기</span>
        </Button>
        <Button
          variant="outline"
          onClick={() => setIsInspectionOpen(true)}
          size="sm"
        >
          <ClipboardCheck className="w-4 h-4 md:mr-2" />
          <span className="hidden md:inline">중간검사성적서 보기</span>
        </Button>
      </>
    );
  }, [order, isStatusUpdating, handleStatusChange]);

  // 폼 내용 렌더링
  const renderFormContent = () => {
    if (!order) return null;

    return (
      <div className="space-y-6">
        {/* 기본 정보 (기획서 4열 구성) */}
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
          <h3 className="font-semibold mb-4">기본 정보</h3>
          <div className="max-h-[360px] overflow-y-auto md:max-h-none md:overflow-visible">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-4">
              {/* 1행: 작업번호 | 수주일 | 공정 | 구분 */}
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">작업번호</p>
                <p className="font-medium text-xs sm:text-sm break-all">{order.workOrderNo}</p>
              </div>
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">수주일</p>
                <p className="font-medium">{order.salesOrderDate || '-'}</p>
              </div>
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">공정</p>
                <p className="font-medium">{order.processName}</p>
              </div>
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">구분</p>
                <p className="font-medium">{order.processName !== '-' ? order.processName : '-'}</p>
              </div>

              {/* 2행: 로트번호 | 수주처 | 현장명 | 수주 담당자 */}
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">로트번호</p>
                <p className="font-medium text-xs sm:text-sm break-all">{order.lotNo}</p>
              </div>
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">수주처</p>
                <p className="font-medium break-words">{order.client}</p>
              </div>
              <div className="min-w-0">
                <p className="text-sm text-muted-foreground mb-1">현장명</p>
                <p className="font-medium break-words">{order.projectName}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">수주 담당자</p>
                <p className="font-medium">{order.salesOrderWriter || '-'}</p>
              </div>

              {/* 3행: 담당자 연락처 | 출고예정일 | 틀수 | 우선순위 */}
              <div>
                <p className="text-sm text-muted-foreground mb-1">담당자 연락처</p>
                <p className="font-medium">{order.clientContact || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">출고예정일</p>
                <p className="font-medium">{order.shipmentDate || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">틀수 (개소)</p>
                <p className="font-medium">{order.shutterCount != null ? `${Math.floor(order.shutterCount)}개소` : '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">우선순위</p>
                <p className="font-medium">{order.priorityLabel || '-'}</p>
              </div>

              {/* 4행: 부서 | 생산 담당자 | 상태 | 비고 */}
              <div>
                <p className="text-sm text-muted-foreground mb-1">부서</p>
                <p className="font-medium">{order.department || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">생산 담당자</p>
                <p className="font-medium">
                  {order.assignees && order.assignees.length > 0
                    ? order.assignees.map(a => a.name).join(', ')
                    : order.assignee}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">상태</p>
                <Badge className={`${WORK_ORDER_STATUS_COLORS[order.status]} border-0`}>
                  {WORK_ORDER_STATUS_LABELS[order.status]}
                </Badge>
              </div>
              <div>
                <p className="text-sm text-muted-foreground mb-1">비고</p>
                <p className="font-medium whitespace-pre-wrap">{order.note || '-'}</p>
              </div>
            </div>
          </div>
        </div>

        {/* 공정 진행 + 작업 품목 (기획서 구조) */}
        <div className="bg-white border rounded-lg p-6">
          <h3 className="font-semibold mb-4">공정 진행</h3>

          {/* 공정 단계 박스 (inner bordered box) */}
          <div className="border rounded-lg p-4 mb-6">
            {/* 품목 정보 헤더 (항상 표시) */}
            <p className="font-semibold mb-3">
              {order.items.length > 0 ? (
                <>
                  {order.items[0].productName}
                  {order.items[0].specification !== '-' ? `  ${order.items[0].specification}` : ''}
                  {`  ${formatQuantity(order.items[0].quantity, order.items[0].unit)}${order.items[0].unit !== '-' ? order.items[0].unit : '개'}`}
                </>
              ) : (
                <>
                  {order.processCode} ({order.processName})
                </>
              )}
            </p>

            {/* 공정 단계 pills */}
            <ProcessStepPills
              processType={order.processType}
              currentStep={order.currentStep}
              workSteps={order.workSteps}
              itemCodes={order.items?.map((i) => i.itemCode).filter(Boolean) as string[]}
            />
          </div>

          {/* 작업 품목 - 개소별 그룹 */}
          {order.items.length > 0 ? (
            <div className="space-y-6">
              {/* 개소별 품목 그룹 */}
              <div>
                <h4 className="text-sm font-semibold text-muted-foreground mb-2">개소별 품목</h4>
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-36">개소</TableHead>
                      <TableHead>품목명</TableHead>
                      <TableHead>규격</TableHead>
                      <TableHead className="w-24 text-right">수량</TableHead>
                      <TableHead className="w-20">단위</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {(() => {
                      // 개소(층/부호)별로 그룹화
                      const nodeGroups = new Map<string, { label: string; items: typeof order.items }>();

                      // order_node_id 기반 그룹핑 (floor_code/symbol_code는 표시용)
                      for (const item of order.items) {
                        const floorLabel = item.floorCode !== '-' ? item.floorCode : '';
                        const key = item.orderNodeId != null ? String(item.orderNodeId) : (floorLabel || 'none');
                        const label = floorLabel || item.orderNodeName || `개소 ${nodeGroups.size + 1}`;
                        if (!nodeGroups.has(key)) {
                          nodeGroups.set(key, { label, items: [] });
                        }
                        nodeGroups.get(key)!.items.push(item);
                      }

                      const rows: React.ReactNode[] = [];
                      for (const [key, group] of nodeGroups) {
                        group.items.forEach((item, idx) => {
                          rows.push(
                            <TableRow key={`node-${key}-${item.id}`} className={idx === 0 ? 'border-t-2' : ''}>
                              {idx === 0 && (
                                <TableCell rowSpan={group.items.length} className="align-top font-medium bg-muted/30">
                                  {group.label}
                                </TableCell>
                              )}
                              <TableCell>{item.productName}</TableCell>
                              <TableCell className="text-muted-foreground">{item.specification || '-'}</TableCell>
                              <TableCell className="text-right">{formatQuantity(item.quantity, item.unit)}</TableCell>
                              <TableCell>{item.unit}</TableCell>
                            </TableRow>
                          );
                        });
                      }
                      return rows;
                    })()}
                  </TableBody>
                </Table>
              </div>

              {/* 품목별 합산 그룹 */}
              <div>
                <h4 className="text-sm font-semibold text-muted-foreground mb-2">품목별 합산</h4>
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-12 text-center">No</TableHead>
                      <TableHead>품목명</TableHead>
                      <TableHead className="w-24 text-right">합산수량</TableHead>
                      <TableHead className="w-20">단위</TableHead>
                      <TableHead className="w-20 text-right">개소수</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {(() => {
                      // 품목명+단위 기준으로 중복 합산
                      const itemMap = new Map<string, { productName: string; totalQty: number; unit: string; nodeCount: number }>();
                      for (const item of order.items) {
                        const key = `${item.productName}||${item.unit}`;
                        if (!itemMap.has(key)) {
                          itemMap.set(key, { productName: item.productName, totalQty: 0, unit: item.unit, nodeCount: 0 });
                        }
                        const entry = itemMap.get(key)!;
                        entry.totalQty += Number(item.quantity);
                        entry.nodeCount += 1;
                      }

                      let no = 0;
                      return Array.from(itemMap.values()).map((entry) => {
                        no++;
                        return (
                          <TableRow key={`sum-${entry.productName}-${entry.unit}`}>
                            <TableCell className="text-center">{no}</TableCell>
                            <TableCell className="font-medium">{entry.productName}</TableCell>
                            <TableCell className="text-right">{formatQuantity(entry.totalQty, entry.unit)}</TableCell>
                            <TableCell>{entry.unit}</TableCell>
                            <TableCell className="text-right">{entry.nodeCount}</TableCell>
                          </TableRow>
                        );
                      });
                    })()}
                  </TableBody>
                </Table>
              </div>
            </div>
          ) : (
            <p className="text-muted-foreground text-center py-8">
              등록된 품목이 없습니다.
            </p>
          )}
        </div>

        {/* 절곡 전용: 전개도 상세정보 */}
        {order.processType === 'bending' && <BendingDetailsSection order={order} />}

        {/* 이슈 섹션 */}
        <IssueSection order={order} />
      </div>
    );
  };

  // 데이터 없음
  if (!isLoading && !order) {
    return (
      <ServerErrorPage
        title="작업지시를 불러올 수 없습니다"
        message="작업지시를 찾을 수 없습니다."
        showBackButton={true}
        showHomeButton={true}
      />
    );
  }

  return (
    <>
      <IntegratedDetailTemplate
        config={workOrderConfig}
        mode="view"
        initialData={{}}
        itemId={orderId}
        isLoading={isLoading}
        headerActions={customHeaderActions}
        onEdit={handleEdit}
        renderView={() => renderFormContent()}
        renderForm={() => renderFormContent()}
      />

      {/* 작업일지 모달 (공정별) */}
      {order && (
        <WorkLogModal
          open={isWorkLogOpen}
          onOpenChange={setIsWorkLogOpen}
          workOrderId={order.id}
          processType={order.processType}
        />
      )}

      {/* 중간검사 성적서 모달 (공정별) */}
      {order && (
        <InspectionReportModal
          open={isInspectionOpen}
          onOpenChange={setIsInspectionOpen}
          workOrderId={order.id}
          processType={order.processType}
        />
      )}
    </>
  );
}