import { Button } from "@web/src/components/common/element/Button";
import { useState } from "react";
import { PlusIcon, } from "@heroicons/react/24/outline";
import { Section, UUIDGenerator } from "@nice/common";
import SectionFormList from "./SectionFormList";

const CourseContentFormHeader = () =>
    <div className="mb-8 bg-blue-50 p-4 rounded-lg">
        <h2 className="text-xl font-semibold text-blue-800 mb-2">创建您的课程大纲</h2>
        <p className="text-blue-600">
            通过组织清晰的章节和课时,帮助学员更好地学习。建议:
        </p>
        <ul className="mt-2 text-blue-600 list-disc list-inside">
            <li>将相关内容组织到章节中</li>
            <li>每个章节建议包含 3-7 个课时</li>
            <li>课时可以是视频、文章或测验</li>
        </ul>
    </div>
const CourseSectionEmpty = () => (
    <div className="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed">
        <div className="text-gray-500">
            <PlusIcon className="mx-auto h-12 w-12 mb-4" />
            <h3 className="text-lg font-medium mb-2">开始创建您的课程内容</h3>
            <p className="text-sm">点击下方按钮添加第一个章节</p>
        </div>
    </div>
)

export default function CourseContentForm() {
    const [sections, setSections] = useState<Section[]>([]);
    const addSection = () => {
        setSections(prev => [...prev, {
            id: UUIDGenerator.generate(),
            title: '新章节',
            lectures: []
        }]);
    };

    return (
        <div className="max-w-4xl mx-auto p-6">
            <CourseContentFormHeader />
            <div className="space-y-4">
                {sections.length === 0 ? (
                    <CourseSectionEmpty />
                ) : (
                    <SectionFormList
                        sections={sections}
                        setSections={setSections}
                    />
                )}
                <Button
                    fullWidth
                    size="lg"
                    rounded="xl"
                    onClick={addSection}
                    leftIcon={<PlusIcon></PlusIcon>}
                    className="mt-4 bg-blue-500 hover:bg-blue-600 text-white"
                >
                    添加新章节
                </Button>
            </div>
        </div>
    );
}