'use client';

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

import { useRouter } from 'next/navigation';
import { ArrowLeft, Edit } 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 '@/store/menuStore';
import { usePermission } from '@/hooks/usePermission';
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 } = usePermission();

  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}`);
  };

  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>
        {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>
    </PageLayout>
  );
}