"use client";

import React, { useState } from "react";
import { EntitySearchInputComponent } from "@/lib/registry/components/entity-search-input";
import { AutocompleteSearchInputComponent } from "@/lib/registry/components/autocomplete-search-input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";

export default function TestEntitySearchPage() {
  const [customerCode, setCustomerCode] = useState<string>("");
  const [customerData, setCustomerData] = useState<any>(null);

  const [itemCode, setItemCode] = useState<string>("");
  const [itemData, setItemData] = useState<any>(null);

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">EntitySearchInput 테스트</h1>
        <p className="text-muted-foreground mt-2">
          엔티티 검색 입력 컴포넌트 동작 테스트
        </p>
      </div>

      {/* 거래처 검색 테스트 - 자동완성 방식 */}
      <Card>
        <CardHeader>
          <CardTitle>거래처 검색 (자동완성 드롭다운 방식) ⭐ NEW</CardTitle>
          <CardDescription>
            타이핑하면 바로 드롭다운이 나타나는 방식 - 수주 등록에서 사용
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>거래처</Label>
            <AutocompleteSearchInputComponent
              tableName="customer_mng"
              displayField="customer_name"
              valueField="customer_code"
              searchFields={["customer_name", "customer_code", "business_number"]}
              placeholder="거래처명 입력하여 검색"
              showAdditionalInfo
              additionalFields={["customer_code", "address", "contact_phone"]}
              value={customerCode}
              onChange={(code, fullData) => {
                setCustomerCode(code || "");
                setCustomerData(fullData);
              }}
            />
          </div>

          {customerData && (
            <div className="mt-4 p-4 bg-muted rounded-md">
              <h3 className="font-semibold mb-2">선택된 거래처 정보:</h3>
              <pre className="text-xs">
                {JSON.stringify(customerData, null, 2)}
              </pre>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 거래처 검색 테스트 - 모달 방식 */}
      <Card>
        <CardHeader>
          <CardTitle>거래처 검색 (모달 방식)</CardTitle>
          <CardDescription>
            버튼 클릭 → 모달 열기 → 검색 및 선택 방식
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>거래처</Label>
            <EntitySearchInputComponent
              tableName="customer_mng"
              displayField="customer_name"
              valueField="customer_code"
              searchFields={["customer_name", "customer_code", "business_number"]}
              mode="combo"
              placeholder="거래처를 검색하세요"
              modalTitle="거래처 검색 및 선택"
              modalColumns={["customer_code", "customer_name", "address", "contact_phone"]}
              showAdditionalInfo
              additionalFields={["address", "contact_phone", "business_number"]}
              value={customerCode}
              onChange={(code, fullData) => {
                setCustomerCode(code || "");
                setCustomerData(fullData);
              }}
            />
          </div>
        </CardContent>
      </Card>

      {/* 품목 검색 테스트 */}
      <Card>
        <CardHeader>
          <CardTitle>품목 검색 (Modal 모드)</CardTitle>
          <CardDescription>
            item_info 테이블에서 품목을 검색합니다
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>품목</Label>
            <EntitySearchInputComponent
              tableName="item_info"
              displayField="item_name"
              valueField="id"
              searchFields={["item_name", "id", "item_number"]}
              mode="modal"
              placeholder="품목 선택"
              modalTitle="품목 검색"
              modalColumns={["id", "item_name", "item_number", "unit", "selling_price"]}
              showAdditionalInfo
              additionalFields={["item_number", "unit", "selling_price"]}
              value={itemCode}
              onChange={(code, fullData) => {
                setItemCode(code || "");
                setItemData(fullData);
              }}
            />
          </div>

          {itemData && (
            <div className="mt-4 p-4 bg-muted rounded-md">
              <h3 className="font-semibold mb-2">선택된 품목 정보:</h3>
              <pre className="text-xs">
                {JSON.stringify(itemData, null, 2)}
              </pre>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}