'use client';

import { useState, useEffect } from 'react';
import { PricingTableForm } from './PricingTableForm';
import { getPricingTableById } from './actions';
import type { PricingTable } from './types';
import { DetailPageSkeleton } from '@/components/ui/skeleton';
import { ErrorCard } from '@/components/ui/error-card';
import { toast } from 'sonner';

interface PricingTableDetailClientProps {
  pricingTableId?: string;
}

const BASE_PATH = '/ko/master-data/pricing-table-management';

export function PricingTableDetailClient({ pricingTableId }: PricingTableDetailClientProps) {
  const isNewMode = !pricingTableId || pricingTableId === 'new';

  const [data, setData] = useState<PricingTable | null>(null);
  const [isLoading, setIsLoading] = useState(!isNewMode);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadData = async () => {
      if (isNewMode) {
        setIsLoading(false);
        return;
      }

      setIsLoading(true);
      setError(null);

      try {
        const result = await getPricingTableById(pricingTableId!);
        if (result.success && result.data) {
          setData(result.data);
        } else {
          setError(result.error || '단가표를 찾을 수 없습니다.');
          toast.error('단가표를 불러오는데 실패했습니다.');
        }
      } catch (err) {
        console.error('단가표 조회 실패:', err);
        setError('단가표 정보를 불러오는 중 오류가 발생했습니다.');
        toast.error('단가표를 불러오는데 실패했습니다.');
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, [pricingTableId, isNewMode]);

  if (isLoading) {
    return <DetailPageSkeleton sections={2} fieldsPerSection={4} />;
  }

  if (error && !isNewMode) {
    return (
      <ErrorCard
        type="network"
        title="단가표를 불러올 수 없습니다"
        description={error}
        tips={[
          '해당 단가표가 존재하는지 확인해주세요',
          '인터넷 연결 상태를 확인해주세요',
          '잠시 후 다시 시도해주세요',
        ]}
        homeButtonLabel="목록으로 이동"
        homeButtonHref={BASE_PATH}
      />
    );
  }

  if (isNewMode) {
    return <PricingTableForm mode="create" />;
  }

  if (data) {
    return <PricingTableForm mode="edit" initialData={data} />;
  }

  return (
    <ErrorCard
      type="not-found"
      title="단가표를 찾을 수 없습니다"
      description="요청하신 단가표 정보가 존재하지 않습니다."
      homeButtonLabel="목록으로 이동"
      homeButtonHref={BASE_PATH}
    />
  );
}
