'use client';

/**
 * 단가 등록 페이지 (Client Component)
 *
 * 경로: /sales/pricing-management/create?itemId=xxx
 * API: POST /api/v1/pricing
 *
 * item_type_code는 품목 정보에서 자동으로 가져옴 (FG, PT, SM, RM, CS 등)
 */

import { useEffect, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { PricingFormClient } from '@/components/pricing';
import { getItemInfo, createPricing } from '@/components/pricing/actions';
import type { PricingData, ItemInfo } from '@/components/pricing';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

export default function CreatePricingPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const itemId = searchParams.get('itemId') || '';

  const [itemInfo, setItemInfo] = useState<ItemInfo | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!itemId) {
      setIsLoading(false);
      return;
    }

    getItemInfo(itemId)
      .then(result => {
        if (result) {
          setItemInfo(result);
        } else {
          setError('품목 정보를 찾을 수 없습니다.');
        }
      })
      .catch(() => {
        setError('품목 정보를 불러오는 중 오류가 발생했습니다.');
      })
      .finally(() => setIsLoading(false));
  }, [itemId]);

  // 단가 등록 핸들러
  const handleSave = async (data: PricingData) => {
    const result = await createPricing(data);
    if (!result.success) {
      throw new Error(result.error || '단가 등록에 실패했습니다.');
    }
  };

  if (isLoading) return <GenericPageSkeleton />;

  // 품목 정보 없이 접근한 경우
  if (!itemId) {
    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">
            단가 목록에서 품목을 선택한 후 등록해주세요.
          </p>
          <button
            onClick={() => router.back()}
            className="text-primary hover:underline"
          >
            뒤로 가기
          </button>
        </div>
      </div>
    );
  }

  if (error || !itemInfo) {
    return (
      <div className="container mx-auto py-6 px-4">
        <div className="text-center py-12">
          <h2 className="text-xl font-semibold mb-2">{error || '품목 정보를 찾을 수 없습니다'}</h2>
          <p className="text-muted-foreground mb-4">
            올바른 품목 정보로 다시 시도해주세요.
          </p>
          <button
            onClick={() => router.back()}
            className="text-primary hover:underline"
          >
            뒤로 가기
          </button>
        </div>
      </div>
    );
  }

  return (
    <PricingFormClient
      mode="create"
      itemInfo={itemInfo}
      onSave={handleSave}
    />
  );
}