sam-react-prod/src/components/process-management/StepDetail.tsx

'use client';

/**
 * 단계 상세 뷰 컴포넌트
 *
 * 기획서 스크린샷 2 기준:
 * - 기본 정보: 단계코드, 단계명, 필수여부, 승인여부, 검사여부, 상태
 * - 연결 정보: 유형(팝업/없음), 도달(입고완료 자재 목록 등)
 * - 완료 정보: 유형(선택 완료 시 완료/클릭 시 완료)
 */

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, Edit, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { useMenuStore } from '@/stores/menuStore';
import { usePermission } from '@/hooks/usePermission';
import { deleteProcessStep } from './actions';
import { toast } from 'sonner';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import type { ProcessStep } from '@/types/process';

interface StepDetailProps {
  step: ProcessStep;
  processId: string;
}

export function StepDetail({ step, processId }: StepDetailProps) {
  const router = useRouter();
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
  const { canUpdate, canDelete } = usePermission();
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleEdit = () => {
    router.push(
      `/ko/master-data/process-management/${processId}/steps/${step.id}?mode=edit`
    );
  };

  const handleBack = () => {
    router.push(`/ko/master-data/process-management/${processId}`);
  };

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      const result = await deleteProcessStep(processId, step.id);
      if (result.success) {
        toast.success('단계가 삭제되었습니다.');
        router.push(`/ko/master-data/process-management/${processId}`);
      } else {
        toast.error(result.error || '삭제에 실패했습니다.');
      }
    } catch {
      toast.error('삭제 중 오류가 발생했습니다.');
    } finally {
      setIsDeleting(false);
      setShowDeleteDialog(false);
    }
  };

  return (
    <PageLayout>
      <PageHeader title="단계 상세" />

      <div className="space-y-6 pb-24">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">단계코드</div>
                <div className="font-medium font-mono">{step.stepCode}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">단계명</div>
                <div className="font-medium">{step.stepName}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">필수여부</div>
                <Badge variant={step.isRequired ? 'default' : 'outline'}>
                  {step.isRequired ? '필수' : '선택'}
                </Badge>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">승인여부</div>
                <Badge variant={step.needsApproval ? 'default' : 'outline'}>
                  {step.needsApproval ? '필요' : '불필요'}
                </Badge>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">검사여부</div>
                <Badge variant={step.needsInspection ? 'default' : 'outline'}>
                  {step.needsInspection ? '필요' : '불필요'}
                </Badge>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">상태</div>
                <Badge variant={step.isActive ? 'default' : 'secondary'}>
                  {step.isActive ? '사용' : '미사용'}
                </Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 연결 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">연결 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">유형</div>
                <div className="font-medium">{step.connectionType}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">도달</div>
                <div className="font-medium">{step.connectionTarget || '-'}</div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 완료 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">완료 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">유형</div>
                <div className="font-medium">{step.completionType}</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 하단 액션 버튼 (sticky) */}
      <div
        className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}
      >
        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
          <ArrowLeft className="h-4 w-4 md:mr-2" />
          <span className="hidden md:inline">공정으로 돌아가기</span>
        </Button>
        <div className="flex items-center gap-2">
          {canDelete && (
            <Button
              variant="destructive"
              onClick={() => setShowDeleteDialog(true)}
              size="sm"
              className="md:size-default"
            >
              <Trash2 className="h-4 w-4 md:mr-2" />
              <span className="hidden md:inline">삭제</span>
            </Button>
          )}
          {canUpdate && (
            <Button onClick={handleEdit} size="sm" className="md:size-default">
              <Edit className="h-4 w-4 md:mr-2" />
              <span className="hidden md:inline">수정</span>
            </Button>
          )}
        </div>
      </div>

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>단계 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &apos;{step.stepName}&apos; 단계를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? '삭제 중...' : '삭제'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </PageLayout>
  );
}