import { ArrowLeftIcon, ClockIcon } from '@heroicons/react/24/outline';
import { SubmitHandler, useFormContext } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { Button } from '@web/src/components/common/element/Button';
import { CourseStatus, CourseStatusLabel } from '@nice/common';
import Tag from '@web/src/components/common/element/Tag';
import { CourseFormData, useCourseEditor } from '../context/CourseEditorContext';
const courseStatusVariant: Record<CourseStatus, string> = {
    [CourseStatus.DRAFT]: 'default',
    [CourseStatus.UNDER_REVIEW]: 'warning',
    [CourseStatus.PUBLISHED]: 'success',
    [CourseStatus.ARCHIVED]: 'danger'
};
export default function CourseEditorHeader() {
    const navigate = useNavigate();
    
    const { handleSubmit, formState: { isValid, isDirty, errors } } = useFormContext<CourseFormData>()

    const { onSubmit, course } = useCourseEditor()
    return (
        <header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-10">
            <div className="h-full flex items-center justify-between px-3 md:px-4">
                <div className="flex items-center space-x-3">
                    <button
                        onClick={() => navigate(-1)}
                        className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
                    >
                        <ArrowLeftIcon className="w-5 h-5 text-gray-600" />
                    </button>
                    <div className="flex items-center space-x-2">
                        <h2 className="font-medium text-gray-900">{course?.title || '新建课程'}</h2>
                        <Tag variant={courseStatusVariant[course?.status || CourseStatus.DRAFT]}>
                            {course?.status ? CourseStatusLabel[course.status] : CourseStatusLabel[CourseStatus.DRAFT]}
                        </Tag>
                        {course?.totalDuration ? (
                            <div className="hidden md:flex items-center text-gray-500 text-sm">
                                <ClockIcon className="w-4 h-4 mr-1" />
                                <span>总时长 {course?.totalDuration}</span>
                            </div>
                        ) : null}
                    </div>
                </div>
                <Button
                    disabled={course ? (!isValid || !isDirty) : !isValid}
                    size="sm"
                    onClick={handleSubmit(onSubmit)}
                >
                    保存
                </Button>
            </div>
        </header>
    );
}