import { VideoCameraIcon, DocumentTextIcon, QuestionMarkCircleIcon, Bars3Icon, PencilIcon, TrashIcon, CloudArrowUpIcon, CheckIcon, ChevronUpIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import { Lecture } from "@nice/common";
import { Card } from "@web/src/components/common/container/Card";
import { Button } from "@web/src/components/common/element/Button";
import { FormInput } from "@web/src/components/common/form/FormInput";
import { FormQuillInput } from "@web/src/components/common/form/FormQuillInput";
import FileUploader from "@web/src/components/common/uploader/FileUploader";
import { useState } from "react";
const LectureTypeIcon = ({ type }: { type: string }) => {
    const iconClass = "h-5 w-5";
    switch (type) {
        case 'video':
            return <VideoCameraIcon className={`${iconClass} text-blue-500`} />;
        case 'article':
            return <DocumentTextIcon className={`${iconClass} text-green-500`} />;
        case 'quiz':
            return <QuestionMarkCircleIcon className={`${iconClass} text-purple-500`} />;
        default:
            return null;
    }
};
interface LectureHeaderProps {
    lecture: Lecture;
    index: number;
    isExpanded: boolean;
    onToggle: () => void;
    onDelete: (id: string) => void;
}
export function LectureHeader({
    lecture,
    index,
    isExpanded,
    onToggle,
    onDelete
}: LectureHeaderProps) {
    return (
        <div
            className="group/lecture flex items-center gap-4 justify-between"
        >
            <div className="flex items-center gap-2 flex-1">
                <Button
                    onClick={(e) => {
                        e.stopPropagation();
                        onToggle();
                    }}
                    size="xs"
                    variant="ghost"
                    title={isExpanded ? "收起课时" : "展开课时"}
                    leftIcon={<ChevronRightIcon
                        className={`transform transition-transform duration-200 ease-in-out
                            ${isExpanded ? 'rotate-90' : ''}`}
                    />}
                >

                </Button>

                <div className="flex items-center space-x-3 flex-1">
                    <div className="flex-shrink-0">
                        <LectureTypeIcon type={lecture.type} />
                    </div>
                    <span className="inline-flex items-center justify-center w-5 h-5 
                                 text-xs  rounded-full bg-blue-100 text-blue-500">
                        {index + 1}
                    </span>
                    <FormInput viewMode name="title"></FormInput>
                </div>
            </div>

            <div className="flex space-x-1 opacity-0 group-hover/lecture:opacity-100 
                transition-all duration-200 ease-in-out">
                <Button
                    onClick={(e) => {
                        e.stopPropagation();
                        onDelete(lecture.id);
                    }}
                    size="sm"
                    variant="ghost-danger"
                    leftIcon={<TrashIcon></TrashIcon>}
                    title="删除课时"
                >
                </Button>
            </div>
        </div>
    );
}
interface LectureEditorProps {
    lecture: Lecture;
    onUpdate: (lecture: Lecture) => void;

}
export function LectureEditor({ lecture, onUpdate }: LectureEditorProps) {
    const tabs = [
        { key: 'video', icon: VideoCameraIcon, label: '视频' },
        { key: 'article', icon: DocumentTextIcon, label: '文章' }
    ];
    return (
        <div className=" pt-6 bg-white" >
            <div className="flex space-x-4 mb-6 px-6">
                {tabs.map(({ key, icon: Icon, label }) => (
                    <button
                        key={key}
                        onClick={() => onUpdate({ ...lecture, type: key })}
                        className={`flex items-center space-x-2 px-6 py-2.5 rounded-lg transition-all
                            ${lecture.type === key
                                ? 'bg-blue-50 text-blue-600 shadow-sm ring-1 ring-blue-100'
                                : 'text-gray-600 hover:bg-gray-50'
                            }`}
                    >
                        <Icon className="h-5 w-5" />
                        <span className="font-medium">{label}</span>
                    </button>
                ))}
            </div>

            <div className="px-6 pb-6 flex flex-col gap-4">
                {lecture.type === 'video' && (
                    <div className="relative">
                        <FileUploader placeholder="点击或拖拽视频到这里上传" />
                    </div>
                )}
                {lecture.type === 'article' && (
                    <div>
                        <FormQuillInput minRows={8} label="文章内容" name="content" />
                    </div>
                )}
                <div className="relative">
                    <FileUploader placeholder="点击或拖拽资源到这里上传" />
                </div>
            </div>
        </div>
    );
}

interface LectureFormItemProps {
    lecture: Lecture;
    index: number;
    onUpdate: (lecture: Lecture) => void;
    onDelete: (id: string) => void;
}

export function LectureFormItem(props: LectureFormItemProps) {
    const [isExpanded, setIsExpanded] = useState(false);
    const handleToggle = () => {
        setIsExpanded(!isExpanded);
    };
    return (
        <Card
            variant="outlined"
            className="flex-1 group relative flex flex-col p-4  "
        >
            <LectureHeader
                {...props}
                isExpanded={isExpanded}
                onToggle={handleToggle}
            />
            {isExpanded && (
                <LectureEditor
                    lecture={props.lecture}
                    onUpdate={props.onUpdate}
                />
            )}
        </Card>
    );
}