import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import {
  Package,
  FileText,
  Edit,
  List,
  Eye,
  FileEdit,
  Code,
  Smartphone,
  Tablet,
  Monitor,
} from "lucide-react";
import { Alert, AlertDescription } from "./ui/alert";

export function DesignSystemTemplateGuide() {
  return (
    <div className="space-y-6 p-6">
      {/* 헤더 */}
      <div>
        <h1 className="text-2xl font-bold mb-2">
          표준 페이지 템플릿 시스템
        </h1>
        <p className="text-gray-600">
          품목관리 기준으로 표준화된 List/Detail/Form 페이지 템플릿 사용 가이드
        </p>
      </div>

      <Alert>
        <AlertDescription>
          <strong>💡 핵심 개념:</strong> 모든 메뉴(품목관리, 거래처관리, 수주관리
          등)에서 동일한 스타일과 레이아웃을 유지하기 위한 재사용 가능한 템플릿
          시스템입니다. 모바일/태블릿/데스크탑 모두 지원합니다.
        </AlertDescription>
      </Alert>

      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
          <TabsTrigger value="overview">개요</TabsTrigger>
          <TabsTrigger value="list">List 템플릿</TabsTrigger>
          <TabsTrigger value="detail">Detail 템플릿</TabsTrigger>
          <TabsTrigger value="form">Form 템플릿</TabsTrigger>
          <TabsTrigger value="responsive">반응형</TabsTrigger>
        </TabsList>

        {/* 개요 */}
        <TabsContent value="overview" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>아토믹 디자인 시스템 구조</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <h3 className="font-medium flex items-center gap-2">
                  <Code className="h-4 w-4" />
                  계층 구조
                </h3>
                <div className="bg-gray-50 p-4 rounded-lg space-y-2 text-sm font-mono">
                  <div>📦 /components</div>
                  <div className="ml-4">├── ui/ (Atoms - Shadcn 컴포넌트)</div>
                  <div className="ml-4">├── molecules/ (작은 조합)</div>
                  <div className="ml-4">
                    ├── organisms/ (복잡한 컴포넌트)
                  </div>
                  <div className="ml-8">│ ├── PageLayout.tsx</div>
                  <div className="ml-8">│ ├── PageHeader.tsx</div>
                  <div className="ml-8">│ ├── StatCards.tsx</div>
                  <div className="ml-8">│ ├── SearchFilter.tsx</div>
                  <div className="ml-8">│ ├── DataTable.tsx</div>
                  <div className="ml-8">│ ├── DetailSection.tsx ⭐ NEW</div>
                  <div className="ml-8">│ ├── TabViewContainer.tsx ⭐ NEW</div>
                  <div className="ml-8">│ └── FormSection.tsx</div>
                  <div className="ml-4">└── templates/ (페이지 템플릿)</div>
                  <div className="ml-8">├── ListPageTemplate.tsx</div>
                  <div className="ml-8">├── DetailViewTemplate.tsx ⭐ NEW</div>
                  <div className="ml-8">└── FormPageTemplate.tsx</div>
                </div>
              </div>

              <div className="space-y-2">
                <h3 className="font-medium">3가지 페이지 템플릿</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card className="border-blue-200 bg-blue-50">
                    <CardContent className="pt-6">
                      <List className="h-8 w-8 text-blue-600 mb-2" />
                      <h4 className="font-medium mb-1">List 템플릿</h4>
                      <p className="text-sm text-gray-600">
                        목록 조회, 검색, 필터, 통계, 테이블
                      </p>
                    </CardContent>
                  </Card>
                  <Card className="border-green-200 bg-green-50">
                    <CardContent className="pt-6">
                      <Eye className="h-8 w-8 text-green-600 mb-2" />
                      <h4 className="font-medium mb-1">Detail 템플릿</h4>
                      <p className="text-sm text-gray-600">
                        상세보기, 섹션, 탭, 액션버튼
                      </p>
                    </CardContent>
                  </Card>
                  <Card className="border-purple-200 bg-purple-50">
                    <CardContent className="pt-6">
                      <FileEdit className="h-8 w-8 text-purple-600 mb-2" />
                      <h4 className="font-medium mb-1">Form 템플릿</h4>
                      <p className="text-sm text-gray-600">
                        등록/수정 폼, 섹션, 저장/취소
                      </p>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* List 템플릿 */}
        <TabsContent value="list" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <List className="h-5 w-5" />
                ListPageTemplate 사용법
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium mb-2">Import</h3>
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
                  {`import { ListPageTemplate } from "./templates";
import type { Column } from "./organisms/DataTable";`}
                </pre>
              </div>

              <div>
                <h3 className="font-medium mb-2">기본 사용 예제</h3>
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
                  {`<ListPageTemplate
  // Header
  title="품목관리"
  description="품목 정보를 조회하고 관리합니다"
  icon={Package}
  actions={<Button>품목 등록</Button>}
  
  // Stats (선택사항)
  stats={[
    { label: "전체 품목", value: 150, icon: Package },
    { label: "활성 품목", value: 120, icon: Archive }
  ]}
  
  // Search & Filter
  searchValue={searchValue}
  onSearchChange={setSearchValue}
  searchPlaceholder="품목코드, 품목명 검색"
  filterButton
  
  // Data
  data={items}
  keyField="id"
  columns={columns}
  onRowClick={(row) => console.log(row)}
  
  // Mobile Card
  renderMobileCard={(item) => ({
    title: item.name,
    subtitle: item.code,
    fields: [
      { label: "유형", value: item.type }
    ]
  })}
/>`}
                </pre>
              </div>

              <div>
                <h3 className="font-medium mb-2">주요 Props</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <Badge>title</Badge>
                    <span className="text-gray-600">페이지 제목 (필수)</span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge>columns</Badge>
                    <span className="text-gray-600">
                      테이블 컬럼 정의 (필수)
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge>data</Badge>
                    <span className="text-gray-600">표시할 데이터 배열 (필수)</span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge>renderMobileCard</Badge>
                    <span className="text-gray-600">
                      모바일 카드 렌더링 함수 (필수)
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge variant="outline">stats</Badge>
                    <span className="text-gray-600">대시보드 통계 (선택)</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Detail 템플릿 */}
        <TabsContent value="detail" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Eye className="h-5 w-5" />
                DetailViewTemplate 사용법
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium mb-2">Import</h3>
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
                  {`import { DetailViewTemplate } from "./templates";`}
                </pre>
              </div>

              <div>
                <h3 className="font-medium mb-2">기본 사용 예제</h3>
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
                  {`<DetailViewTemplate
  // Header
  title="알루미늄 프로파일"
  description="품목코드: ITEM-001"
  icon={Package}
  badge={{ label: "활성", variant: "default" }}
  
  // Navigation
  onBack={() => setPageMode("list")}
  
  // Actions (데스크탑)
  primaryActions={[
    { label: "수정", icon: Edit, onClick: () => {} },
    { label: "복사", icon: Copy, onClick: () => {} }
  ]}
  
  // More Actions (모바일)
  moreActions={[
    { label: "삭제", icon: Trash2, variant: "destructive" }
  ]}
  
  // Sections
  sections={[
    {
      title: "기본 정보",
      icon: Package,
      columns: 2,
      fields: [
        { label: "품목코드", value: "ITEM-001" },
        { label: "품목명", value: "알루미늄 프로파일" }
      ]
    }
  ]}
  
  // Tabs (선택사항)
  tabs={[
    {
      id: "bom",
      label: "BOM",
      icon: Layers,
      content: <div>BOM 내용</div>
    }
  ]}
/>`}
                </pre>
              </div>

              <div>
                <h3 className="font-medium mb-2">주요 Props</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <Badge>sections</Badge>
                    <span className="text-gray-600">
                      정보 섹션 배열 (DetailSection)
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge>primaryActions</Badge>
                    <span className="text-gray-600">
                      주요 액션 버튼 (수정, 복사 등)
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge>moreActions</Badge>
                    <span className="text-gray-600">
                      모바일 드롭다운 액션
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <Badge variant="outline">tabs</Badge>
                    <span className="text-gray-600">탭 컨텐츠 (선택)</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Form 템플릿 */}
        <TabsContent value="form" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileEdit className="h-5 w-5" />
                FormPageTemplate 사용법
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium mb-2">기본 사용 예제</h3>
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
                  {`<FormPageTemplate
  title="품목 등록"
  description="새로운 품목을 등록합니다"
  icon={Package}
  
  sections={[
    {
      title: "기본 정보",
      content: (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label>품목코드</Label>
            <Input placeholder="자동 생성" />
          </div>
          <div>
            <Label>품목명</Label>
            <Input placeholder="품목명 입력" />
          </div>
        </div>
      )
    }
  ]}
  
  onSave={() => console.log("저장")}
  onCancel={() => console.log("취소")}
/>`}
                </pre>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 반응형 */}
        <TabsContent value="responsive" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>반응형 디자인 가이드</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="border-blue-200">
                  <CardContent className="pt-6">
                    <Smartphone className="h-8 w-8 text-blue-600 mb-2" />
                    <h4 className="font-medium mb-2">모바일 {"(<"} 768px)</h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 카드 레이아웃</li>
                      <li>• 드롭다운 액션</li>
                      <li>• 세로 스크롤</li>
                      <li>• 풀스크린 폼</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-green-200">
                  <CardContent className="pt-6">
                    <Tablet className="h-8 w-8 text-green-600 mb-2" />
                    <h4 className="font-medium mb-2">태블릿 (768px ~ 1024px)</h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 2컬럼 그리드</li>
                      <li>• 테이블 표시</li>
                      <li>• 탭 네비게이션</li>
                      <li>• 반응형 폼</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-purple-200">
                  <CardContent className="pt-6">
                    <Monitor className="h-8 w-8 text-purple-600 mb-2" />
                    <h4 className="font-medium mb-2">데스크탑 {"(>"} 1024px)</h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 3~4컬럼 그리드</li>
                      <li>• 풀 테이블</li>
                      <li>• 인라인 액션</li>
                      <li>• 사이드바 가능</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>

              <Alert>
                <AlertDescription>
                  <strong>✅ 자동 적용:</strong> 모든 템플릿은 Tailwind의
                  반응형 클래스(md:, lg:)를 활용하여 자동으로 반응형이 적용됩니다.
                  별도 설정 불필요!
                </AlertDescription>
              </Alert>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 실제 예제 링크 */}
      <Card className="border-green-200 bg-green-50">
        <CardContent className="pt-6">
          <div className="flex items-start gap-3">
            <Code className="h-5 w-5 text-green-600 mt-0.5" />
            <div>
              <h3 className="font-medium text-green-900 mb-1">
                실제 구현 예제 보기
              </h3>
              <p className="text-sm text-green-700 mb-2">
                <code className="bg-white px-2 py-1 rounded">
                  /components/examples/StandardPageExample.tsx
                </code>{" "}
                파일에서 완전한 구현 예제를 확인하세요.
              </p>
              <p className="text-sm text-green-700">
                품목관리의 List/Detail/Form 페이지가 모두 구현되어 있으며, 다른
                메뉴에서도 동일하게 사용할 수 있습니다.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}