import { useState } from "react";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Truck, Package, FileText, Calendar } from "lucide-react";
import { SalesOrderWithShippingSchedule } from "./SalesOrderWithShippingSchedule";
import { ShippingScheduleManagement } from "./ShippingScheduleManagement";
import { SalesOrderViewWithShipping } from "./SalesOrderViewWithShipping";

type DemoView = "menu" | "order-create" | "shipping-schedule" | "order-view";

export function ShippingDemo() {
  const [currentView, setCurrentView] = useState<DemoView>("menu");

  if (currentView === "order-create") {
    return <SalesOrderWithShippingSchedule onBack={() => setCurrentView("menu")} />;
  }

  if (currentView === "shipping-schedule") {
    return <ShippingScheduleManagement />;
  }

  if (currentView === "order-view") {
    return <SalesOrderViewWithShipping orderId="SO-001" onBack={() => setCurrentView("menu")} />;
  }

  return (
    <PageLayout>
      <PageHeader
        title="분할 출고 관리 시스템 데모"
        description="수주 분할 출고 프로세스 테스트"
        icon={Truck}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => setCurrentView("order-create")}>
          <CardHeader>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <Package className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <CardTitle>수주 등록 (분할 출고)</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  분할 출고 계획이 포함된 수주 등록
                </p>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <p>✓ 총 수주 수량 입력</p>
              <p>✓ 3회 분할 출고 계획 설정</p>
              <p>✓ 각 출하별 수량, 날짜, 배송지 관리</p>
              <p>✓ 출하 후 잔량 자동 계산</p>
            </div>
            <Button className="w-full mt-4">
              수주 등록 화면 열기
            </Button>
          </CardContent>
        </Card>

        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => setCurrentView("shipping-schedule")}>
          <CardHeader>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <Truck className="h-6 w-6 text-green-600" />
              </div>
              <div>
                <CardTitle>분할 출고 관리</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  출고 계획 조회 및 출고 지시
                </p>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <p>✓ 수주별 출고 계획 목록 조회</p>
              <p>✓ 출고 지시서 생성</p>
              <p>✓ 로트 번호 입력 및 추적</p>
              <p>✓ 출고 상태 관리</p>
            </div>
            <Button className="w-full mt-4">
              출고 관리 화면 열기
            </Button>
          </CardContent>
        </Card>

        <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => setCurrentView("order-view")}>
          <CardHeader>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <FileText className="h-6 w-6 text-purple-600" />
              </div>
              <div>
                <CardTitle>수주 상세 조회</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  수주 정보 및 출고 이력 확인
                </p>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <p>✓ 수주 기본 정보 조회</p>
              <p>✓ 출고 진행률 확인</p>
              <p>✓ 분할 출고 계획 및 이력</p>
              <p>✓ 누적 출고량 / 잔여량 확인</p>
            </div>
            <Button className="w-full mt-4">
              수주 상세 화면 열기
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                <Calendar className="h-6 w-6 text-orange-600" />
              </div>
              <div>
                <CardTitle>프로세스 설명</CardTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  분할 출고 업무 흐름
                </p>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 text-sm">
                  1
                </div>
                <div>
                  <p className="font-medium">수주 등록</p>
                  <p className="text-sm text-muted-foreground">
                    총 수주 수량과 3회 분할 출고 계획 입력
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 text-sm">
                  2
                </div>
                <div>
                  <p className="font-medium">출고 지시</p>
                  <p className="text-sm text-muted-foreground">
                    각 출하 예정일에 출고 지시서 생성 및 로트 번호 부여
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 text-sm">
                  3
                </div>
                <div>
                  <p className="font-medium">재고 차감</p>
                  <p className="text-sm text-muted-foreground">
                    로트별 재고 차감 및 출고 완료 처리
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 bg-orange-600 text-white rounded-full flex items-center justify-center flex-shrink-0 text-sm">
                  4
                </div>
                <div>
                  <p className="font-medium">이력 관리</p>
                  <p className="text-sm text-muted-foreground">
                    수주별 출고 이력 및 잔량 자동 업데이트
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <Card className="mt-6">
        <CardHeader>
          <CardTitle>시스템 특징</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 bg-blue-50 rounded-lg">
              <h4 className="font-medium mb-2">자동 계산</h4>
              <p className="text-sm text-muted-foreground">
                출하 수량 입력 시 자동으로 출하 후 잔량이 계산되며, 총 수주 수량과 일치하는지 검증합니다.
              </p>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h4 className="font-medium mb-2">로트 추적</h4>
              <p className="text-sm text-muted-foreground">
                각 출고 건에 로트 번호를 부여하여 생산부터 출고까지 추적이 가능합니다.
              </p>
            </div>
            <div className="p-4 bg-purple-50 rounded-lg">
              <h4 className="font-medium mb-2">실시간 현황</h4>
              <p className="text-sm text-muted-foreground">
                수주 조회 시 누적 출고량, 잔여량, 출고 진행률을 실시간으로 확인할 수 있습니다.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </PageLayout>
  );
}
