'use client';

/**
 * 단가 목록 페이지 (Client Component)
 *
 * 경로: /sales/pricing-management
 * API:
 *   - GET /api/v1/items - 품목 목록 (품목기준관리에서 등록한 전체 품목)
 *   - GET /api/v1/pricing - 단가 목록 (등록된 단가 정보)
 *
 * 데이터 흐름:
 *   품목 목록 + 단가 목록 → 병합 → 품목별 단가 현황 표시
 */

import { useEffect, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { PricingListClient } from '@/components/pricing';
import { getPricingListData, type PricingListItem } from '@/components/pricing/actions';

export default function PricingManagementPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const mode = searchParams.get('mode');
  const [data, setData] = useState<PricingListItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getPricingListData()
      .then(result => {
        setData(result);
      })
      .finally(() => setIsLoading(false));
  }, []);

  // mode=new: 단가 등록은 품목 선택이 필요하므로 안내 표시
  if (mode === 'new') {
    return (
      <div className="container mx-auto py-6 px-4">
        <div className="text-center py-12">
          <h2 className="text-xl font-semibold mb-2">품목을 선택해주세요</h2>
          <p className="text-muted-foreground mb-4">
            단가 등록은 품목 선택이 필요합니다.<br />
            단가 목록에서 미등록 품목을 선택한 후 등록해주세요.
          </p>
          <button
            onClick={() => router.push('/sales/pricing-management')}
            className="text-primary hover:underline"
          >
            단가 목록으로 이동
          </button>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

  return <PricingListClient initialData={data} />;
}