import {
    TrashIcon,
    PlusIcon,
    ChevronDownIcon
} from "@heroicons/react/24/outline";
import { Section, Lecture } from "@nice/common";
import { useState } from "react";
import { LectureFormList } from "./LectureFormList";
import { cn } from "@web/src/utils/classname";
import { FormInput } from "@web/src/components/common/form/FormInput";
import { Button } from "@web/src/components/common/element/Button";
import { Card } from "@web/src/components/common/container/Card";
interface SectionProps {
    section: Section;
    index: number;
    onUpdate: (section: Section) => void;
    onDelete: (id: string) => void;
}

export function SectionFormItem({ section, index, onUpdate, onDelete }: SectionProps) {
    const [isCollapsed, setIsCollapsed] = useState(false);
    const handleAddLecture = () => {
        const newLecture: Lecture = {
            id: Date.now().toString(),
            title: '新课时',
            type: 'video'
        };
        onUpdate({
            ...section,
            lectures: [...section.lectures, newLecture]
        });
    };

    return (
        <Card className="group/section relative flex-1 p-4">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <Button
                        onClick={() => setIsCollapsed(!isCollapsed)}
                        title={isCollapsed ? "展开章节" : "收起章节"}
                        size="xs"
                        variant="ghost"
                        leftIcon={<ChevronDownIcon
                            className={cn(
                                "transition-transform duration-300 ease-out",
                                isCollapsed ? "-rotate-90" : "rotate-0"
                            )}
                        />}
                    >

                    </Button>
                    <span className="inline-flex items-center justify-center w-7 h-7 
                                bg-blue-50 text-blue-600 text-sm font-semibold rounded">
                        {index + 1}
                    </span>
                    <FormInput viewMode name="title"></FormInput>

                </div>

                <div className="flex items-center gap-3 opacity-0 group-hover/section:opacity-100 
                        transition-all duration-200 ease-in-out">
                    <Button
                        onClick={() => onDelete(section.id)}
                        variant="ghost-danger"
                        size="sm"
                        aria-label="删除章节"
                        title="删除章节"
                        leftIcon={<TrashIcon />}
                    >

                    </Button>
                </div>
            </div>

            <div
                className={cn(
                    "grid  transition-all duration-300 ease-out",
                    isCollapsed
                        ? "grid-rows-[0fr] opacity-0 invisible"
                        : "grid-rows-[1fr] opacity-100 visible"
                )}
            >
                <div className={cn(
                    "overflow-hidden transition-all duration-300",
                    isCollapsed ? "hidden" : "px-10 py-4"
                )}>
                    <div className="space-y-4">
                        <LectureFormList
                            lectures={section.lectures}
                            sectionId={section.id}
                            onUpdate={(updatedLectures) =>
                                onUpdate({ ...section, lectures: updatedLectures })}
                        />

                        <Button
                            onClick={handleAddLecture}
                            size="md"
                            fullWidth
                            variant="soft-primary"
                            leftIcon={<PlusIcon></PlusIcon>}
                        >

                            <span className="font-medium">添加课时</span>
                        </Button>
                    </div>
                </div>
            </div>
        </Card>
    );
}