/**
 * 디자인 시스템 초기 데이터
 * 
 * 첫 실행 시 localStorage에 저장될 기본 컴포넌트 목록
 */

import { ComponentItem } from "../contexts/DesignSystemContext";

export const initialAtoms: Omit<ComponentItem, "id" | "createdAt" | "updatedAt">[] = [
  {
    name: "Button",
    path: "/components/ui/button.tsx",
    category: "Interactive",
    description: "클릭 가능한 버튼 컴포넌트",
    variants: ["default", "destructive", "outline", "secondary", "ghost", "link"],
    preview: "다양한 스타일의 버튼 컴포넌트",
    code: `import { Button } from "./components/ui/button";

<Button>클릭</Button>
<Button variant="destructive">삭제</Button>
<Button variant="outline">아웃라인</Button>`,
  },
  {
    name: "Input",
    path: "/components/ui/input.tsx",
    category: "Form",
    description: "텍스트 입력 필드",
    variants: ["text", "email", "password", "number"],
    preview: "다양한 타입의 입력 필드",
    code: `import { Input } from "./components/ui/input";

<Input type="text" placeholder="입력하세요" />
<Input type="email" placeholder="email@example.com" />`,
  },
  {
    name: "Select",
    path: "/components/ui/select.tsx",
    category: "Form",
    description: "드롭다운 선택 메뉴",
    variants: ["default"],
    preview: "선택 가능한 드롭다운 메뉴",
    code: `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/ui/select";

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">옵션 1</SelectItem>
  </SelectContent>
</Select>`,
  },
];

export const initialMolecules: Omit<ComponentItem, "id" | "createdAt" | "updatedAt">[] = [
  {
    name: "FormField",
    path: "/components/molecules/FormField.tsx",
    category: "Form",
    description: "레이블 + 입력필드 조합 (필수 표시 지원)",
    preview: "레이블과 입력 필드가 결합된 폼 컴포넌트",
    code: `import { FormField } from "./components/molecules/FormField";

<FormField 
  label="이름" 
  required
  helper="실명을 입력하세요"
>
  <Input value={name} onChange={e => setName(e.target.value)} />
</FormField>`,
  },
  {
    name: "SearchBar",
    path: "/components/molecules/SearchBar.tsx",
    category: "Form",
    description: "검색 입력 + 아이콘",
    preview: "검색 아이콘이 포함된 검색 바",
    code: `import { SearchBar } from "./components/molecules/SearchBar";

<SearchBar 
  value={searchTerm}
  onChange={setSearchTerm}
  placeholder="검색..."
/>`,
  },
];

export const initialOrganisms: Omit<ComponentItem, "id" | "createdAt" | "updatedAt">[] = [
  {
    name: "PageHeader",
    path: "/components/organisms/PageHeader.tsx",
    category: "Display",
    description: "페이지 헤더 (제목, 설명, 액션버튼)",
    preview: "아이콘, 제목, 설명, 액션 버튼이 포함된 페이지 헤더",
    code: `import { PageHeader } from "./components/organisms/PageHeader";
import { Plus } from "lucide-react";

<PageHeader
  icon={Plus}
  title="품목 관리"
  description="제품, 부품, 부자재 등록 및 관리"
  actions={<Button>품목 등록</Button>}
/>`,
  },
  {
    name: "StatCards",
    path: "/components/organisms/StatCards.tsx",
    category: "Dashboard",
    description: "통계 카드 그리드",
    preview: "여러 개의 통계 카드를 그리드로 표시",
    code: `import { StatCards } from "./components/organisms/StatCards";

<StatCards stats={[
  { label: "전체", value: 100, icon: Package, color: "blue" },
  { label: "제품", value: 50, icon: Box, color: "purple" }
]} />`,
  },
];

export const initialTemplates: Omit<ComponentItem, "id" | "createdAt" | "updatedAt">[] = [
  {
    name: "ResponsiveListTemplate",
    path: "/components/templates/ResponsiveListTemplate.tsx",
    category: "List",
    description: "기본 목록 템플릿 - 데스크톱/태블릿/모바일 반응형 (품목관리 스타일)",
    structure: "PageHeader → StatCards → SearchFilter → Tabs(Desktop/Mobile) → DataTable/CardList",
    preview: `완전한 반응형 목록 페이지 템플릿

구조:
1. PageHeader - 제목, 설명, 등록 버튼
2. StatCards - 통계 카드 (전체, 제품, 부품 등)
3. SearchFilter - 검색 입력
4. 탭 영역
   - 데스크톱: TabsList 컴포넌트
   - 모바일: 커스텀 버튼 탭 (색상별)
5. 데이터 영역
   - 데스크톱: DataTable
   - 모바일: 카드 리스트 (체크박스, 번호, 필드, 액션)`,
    code: `import { ResponsiveListTemplate } from "./components/templates/ResponsiveListTemplate";

const tabs = [
  { value: "all", label: "전체", count: 100, color: "blue" },
  { value: "FG", label: "제품", count: 50, color: "purple" },
];

<ResponsiveListTemplate
  title="품목 관리"
  description="제품, 부품, 부자재 등록 및 관리"
  icon={Package}
  headerActions={<Button>품목 등록</Button>}
  stats={stats}
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  tabs={tabs}
  currentTab={currentTab}
  onTabChange={setCurrentTab}
  data={filteredItems}
  columns={columns}
  renderMobileCard={renderMobileCard}
/>`,
  },
  {
    name: "IntegratedListTemplateV2",
    path: "/components/templates/IntegratedListTemplateV2.tsx",
    category: "List",
    description: "기본 통합 목록_버젼2 - 체크박스, 선택 지원",
    structure: "PageHeader → StatCards → SearchFilter → Tabs → DataTable/CardList + Selection",
    preview: `IntegratedListTemplateV2는 ResponsiveListTemplate의 향상된 버전입니다.

주요 특징:
- 행 선택 기능 (체크박스)
- 선택된 항목 액션 (일괄 삭제, 내보내기 등)
- 더 나은 반응형 지원
- 페이지네이션 기본 지원`,
    code: `import { IntegratedListTemplateV2 } from "./components/templates/IntegratedListTemplateV2";

<IntegratedListTemplateV2
  title="견적 관리"
  description="견적서 등록 및 관리"
  icon={FileText}
  headerActions={<Button>견적 등록</Button>}
  stats={stats}
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  tabs={tabs}
  currentTab={currentTab}
  onTabChange={setCurrentTab}
  data={data}
  keyField="id"
  columns={columns}
  selectable={true}
  selectedIds={selectedIds}
  onToggleSelection={handleToggle}
  renderMobileCard={renderMobileCard}
/>`,
  },
  {
    name: "ResponsiveFormTemplate",
    path: "/components/templates/ResponsiveFormTemplate.tsx",
    category: "Form",
    description: "기본 등록_데스크톱/태블릿/모바일 통합 템플릿",
    structure: "PageHeader → FormSections → Actions",
    preview: `완전한 반응형 등록/수정 폼 템플릿

특징:
- 섹션별로 구분된 폼
- 필수 입력 필드 표시
- 취소/저장 액션
- 모바일 최적화된 레이아웃`,
    code: `import { ResponsiveFormTemplate } from "./components/templates/ResponsiveFormTemplate";

<ResponsiveFormTemplate
  title="품목 등록"
  onSubmit={handleSubmit}
  onCancel={handleCancel}
>
  <FormSection title="기본 정보">
    <FormField label="품목코드" required>
      <Input value={code} onChange={e => setCode(e.target.value)} />
    </FormField>
  </FormSection>
</ResponsiveFormTemplate>`,
  },
];

export const initialWidgets: Omit<ComponentItem, "id" | "createdAt" | "updatedAt">[] = [
  {
    name: "SalesOverviewWidget",
    path: "/components/widgets/SalesOverviewWidget.tsx",
    category: "Sales",
    description: "영업 현황 요약 (매출, 주문, 견적)",
    preview: "일별/월별/연간 매출 통계 및 목표 달성률을 표시하는 위젯",
    code: `import { SalesOverviewWidget } from "./components/widgets/SalesOverviewWidget";

<SalesOverviewWidget />`,
  },
  {
    name: "ProductionStatusWidget",
    path: "/components/widgets/ProductionStatusWidget.tsx",
    category: "Production",
    description: "생산 현황 위젯",
    preview: "현재 생산 중인 작업, 완료된 작업, 대기 중인 작업을 표시",
    code: `import { ProductionStatusWidget } from "./components/widgets/ProductionStatusWidget";

<ProductionStatusWidget />`,
  },
];
