/**
 * MobileItemListTemplate 사용 예제
 * 
 * 이 파일은 MobileItemListTemplate 컴포넌트를 실제 프로젝트에서
 * 어떻게 사용하는지 보여주는 예제입니다.
 */

import { useState } from "react";
import { MobileItemListTemplate, MobileItemListItem } from "./MobileItemListTemplate";
import { useData } from "../contexts/DataContext";
import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { Package } from "lucide-react";

export function MobileItemListTemplateExample() {
  const { itemMasters } = useData();
  const [searchTerm, setSearchTerm] = useState("");
  const [filterType, setFilterType] = useState<string>("all");
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedView, setSelectedView] = useState<"list" | "detail">("list");
  const [selectedItem, setSelectedItem] = useState<MobileItemListItem | null>(null);

  // itemMasters를 MobileItemListItem 형식으로 변환
  const items: MobileItemListItem[] = itemMasters.map(item => ({
    id: item.id,
    itemCode: item.itemCode,
    itemName: item.itemName,
    itemType: item.itemType,
    specification: item.specification,
    unit: item.unit,
    purchasePrice: item.purchasePrice,
    salesPrice: item.salesPrice,
    isActive: item.isActive,
  }));

  const handleItemClick = (item: MobileItemListItem) => {
    setSelectedItem(item);
    setSelectedView("detail");
  };

  const handleEdit = (item: MobileItemListItem) => {
    console.log("수정:", item);
    // 수정 로직 구현
  };

  const handleView = (item: MobileItemListItem) => {
    handleItemClick(item);
  };

  const handleDelete = (itemId: string) => {
    console.log("삭제:", itemId);
    // 삭제 로직 구현
  };

  if (selectedView === "detail" && selectedItem) {
    return (
      <PageLayout maxWidth="xl">
        <div className="space-y-4">
          <button
            onClick={() => setSelectedView("list")}
            className="flex items-center gap-2 text-sm text-muted-foreground"
          >
            ← 목록으로 돌아가기
          </button>
          <div className="p-4 border rounded-lg space-y-3">
            <h2 className="text-lg font-semibold">{selectedItem.itemName}</h2>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">품목코드</span>
                <span className="font-medium">{selectedItem.itemCode}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">규격</span>
                <span className="font-medium">{selectedItem.specification || "-"}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">단위</span>
                <span className="font-medium">{selectedItem.unit || "-"}</span>
              </div>
              {selectedItem.purchasePrice !== undefined && (
                <div className="flex justify-between">
                  <span className="text-muted-foreground">구매단가</span>
                  <span className="font-medium">
                    ₩{Number(selectedItem.purchasePrice).toLocaleString()}
                  </span>
                </div>
              )}
              {selectedItem.salesPrice !== undefined && (
                <div className="flex justify-between">
                  <span className="text-muted-foreground">판매단가</span>
                  <span className="font-medium">
                    ₩{Number(selectedItem.salesPrice).toLocaleString()}
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </PageLayout>
    );
  }

  return (
    <PageLayout maxWidth="xl">
      <PageHeader
        title="품목관리"
        subtitle="모바일 품목 목록 템플릿 예제"
        icon={Package}
      />

      {/* 모바일 전용 - 768px 이하에서만 표시 */}
      <div className="md:hidden">
        <MobileItemListTemplate
          items={items}
          searchValue={searchTerm}
          onSearchChange={setSearchTerm}
          filterType={filterType}
          onFilterChange={setFilterType}
          currentPage={currentPage}
          onPageChange={setCurrentPage}
          itemsPerPage={20}
          onItemClick={handleItemClick}
          onEdit={handleEdit}
          onView={handleView}
          onDelete={handleDelete}
          showActions={true}
          canViewPrice={true}
        />
      </div>

      {/* 데스크톱 - 768px 이상에서 표시 */}
      <div className="hidden md:block">
        <div className="text-center py-12 text-muted-foreground">
          <p>이 템플릿은 모바일 전용입니다.</p>
          <p className="text-sm mt-2">화면 크기를 줄이거나 모바일 기기에서 확인해주세요.</p>
        </div>
      </div>
    </PageLayout>
  );
}
