import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Settings, Code, Sparkles, Eye, CheckCircle } from "lucide-react";

export default function MenuCustomizationGuide() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
        <CardHeader>
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-purple-500 flex items-center justify-center">
              <Code className="w-6 h-6 text-white" />
            </div>
            <div>
              <CardTitle className="text-2xl">메뉴 커스터마이징 가이드</CardTitle>
              <CardDescription>시스템 관리자 전용 기능</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
              <Eye className="w-5 h-5 text-purple-600" />
              접근 방법
            </h3>
            <div className="space-y-2">
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-purple-500 text-white">1</Badge>
                <div>
                  <p className="font-semibold">역할 전환</p>
                  <p className="text-sm text-gray-600">헤더 우측 상단의 "역할 선택" 드롭다운에서 <strong>"시스템관리자"</strong> 선택</p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-purple-500 text-white">2</Badge>
                <div>
                  <p className="font-semibold">시스템 설정 메뉴 클릭</p>
                  <p className="text-sm text-gray-600">좌측 사이드바에 표시되는 <Settings className="w-4 h-4 inline text-purple-600" /> <strong>"시스템 설정"</strong> 메뉴 클릭</p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-purple-500 text-white">3</Badge>
                <div>
                  <p className="font-semibold">메뉴 탭 선택</p>
                  <p className="text-sm text-gray-600">상단 탭에서 <Code className="w-4 h-4 inline text-purple-600" /> <strong>"메뉴"</strong> 탭 클릭</p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-purple-500 text-white">4</Badge>
                <div>
                  <p className="font-semibold">커스터마이징 시작!</p>
                  <p className="text-sm text-gray-600">카테고리, 메뉴 항목, 역할별 할당을 자유롭게 설정</p>
                </div>
              </div>
            </div>
          </div>

          <div className="border-t pt-6">
            <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-pink-600" />
              AI 자동 매칭 사용법
            </h3>
            <div className="space-y-2">
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-pink-500 text-white">1</Badge>
                <div>
                  <p className="font-semibold">AI 자동 매칭 버튼 클릭</p>
                  <p className="text-sm text-gray-600">우측 상단의 <Sparkles className="w-4 h-4 inline text-pink-600" /> "AI 자동 매칭" 버튼 클릭</p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-pink-500 text-white">2</Badge>
                <div>
                  <p className="font-semibold">산업군 선택</p>
                  <p className="text-sm text-gray-600">8가지 산업군 중 회사에 맞는 산업 선택 (자동차, 식품, 전자, 의약품 등)</p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-3 bg-white rounded-lg">
                <Badge className="bg-pink-500 text-white">3</Badge>
                <div>
                  <p className="font-semibold">프리셋 적용</p>
                  <p className="text-sm text-gray-600">"프리셋 적용" 버튼 클릭하면 AI가 최적화된 메뉴 자동 설정!</p>
                </div>
              </div>
            </div>
          </div>

          <div className="border-t pt-6">
            <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-600" />
              주요 기능
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div className="p-3 bg-white rounded-lg border-l-4 border-blue-500">
                <p className="font-semibold text-sm">카테고리 관리</p>
                <p className="text-xs text-gray-600 mt-1">새로운 카테고리 생성 및 삭제</p>
              </div>
              <div className="p-3 bg-white rounded-lg border-l-4 border-green-500">
                <p className="font-semibold text-sm">메뉴 항목 관리</p>
                <p className="text-xs text-gray-600 mt-1">메뉴 추가, 수정, 삭제</p>
              </div>
              <div className="p-3 bg-white rounded-lg border-l-4 border-purple-500">
                <p className="font-semibold text-sm">역할별 할당</p>
                <p className="text-xs text-gray-600 mt-1">각 역할에 맞는 메뉴 구성</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
