"use client";

import React, { useState } from "react";
import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function TestOrderRegistrationPage() {
  const [modalOpen, setModalOpen] = useState(false);

  const handleSuccess = () => {
    console.log("수주 등록 성공!");
  };

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">수주 등록 테스트</h1>
        <p className="text-muted-foreground mt-2">
          EntitySearchInput + ModalRepeaterTable을 활용한 수주 등록 화면
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>수주 등록 모달</CardTitle>
          <CardDescription>
            모달 버튼을 클릭하여 수주 등록 화면을 테스트하세요
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button onClick={() => setModalOpen(true)}>
            수주 등록 모달 열기
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>구현된 기능</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm">
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>EntitySearchInput: 거래처 검색 및 선택 (콤보 모드)</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>ModalRepeaterTable: 품목 검색 및 동적 추가</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>자동 계산: 수량 × 단가 = 금액</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>인라인 편집: 수량, 단가, 납품일, 비고 수정 가능</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>중복 방지: 이미 추가된 품목은 선택 불가</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>행 삭제: 추가된 품목 개별 삭제 가능</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>전체 금액 표시: 모든 품목 금액의 합계</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-primary">✓</span>
            <span>입력 방식 전환: 거래처 우선 / 견대 방식 / 단가 방식</span>
          </div>
        </CardContent>
      </Card>

      {/* 수주 등록 모달 */}
      <OrderRegistrationModal
        open={modalOpen}
        onOpenChange={setModalOpen}
        onSuccess={handleSuccess}
      />
    </div>
  );
}