import React, { useState, useEffect, useRef } from 'react';
import { Check } from 'lucide-react';
import { Episode } from '@/types';
import { InputControl } from '../shared/FormControls';
import { Button } from "@/components/ui/button";
import { Textarea } from '@/components/ui/textarea';

interface CreateEpisodeFormProps {
    onCancelCreate?: () => void;
    onCreateEpisode?: (episode: Partial<Episode>) => void;
    setFooter?: (footer: React.ReactNode) => void;
    isActive?: boolean;
}

export default function CreateEpisodeForm({
    onCancelCreate,
    onCreateEpisode,
    setFooter,
    isActive = true
}: CreateEpisodeFormProps) {
    const [title, setTitle] = useState('');
    const [desc, setDesc] = useState('');
    const [content, setContent] = useState('');

    const handleCreate = () => {
        onCreateEpisode?.({
            title,
            desc,
            content,
            status: 'draft'
        });
    };

    const handleCreateRef = useRef(handleCreate);
    useEffect(() => {
        handleCreateRef.current = handleCreate;
    });

    useEffect(() => {
        if (isActive && setFooter) {
            setFooter(
                <Button 
                    className="w-full gap-2 bg-blue-600 hover:bg-blue-500 text-white text-[11px] shadow-lg shadow-blue-900/20"
                    onClick={() => handleCreateRef.current()}
                >
                    <Check size={14} />
                    <span>创建章节</span>
                </Button>
            );
        }
    }, [isActive, setFooter]);

    return (
        <section className="h-full flex flex-col">
            <div className="p-6 space-y-4">
                <InputControl 
                    label="章节标题" 
                    placeholder="例如：第一章 觉醒" 
                    value={title}
                    onChange={setTitle}
                />
                
                <div className="space-y-2 pt-2 border-t border-border">
                    <label className="text-[10px] text-muted-foreground font-medium">章节概要</label>
                    <Textarea 
                        className="w-full h-24 bg-background border border-border rounded-lg p-3 text-[11px] text-foreground placeholder-zinc-700 resize-none focus:outline-none focus:border-blue-500/50 leading-relaxed"
                        placeholder="简要描述本章发生的故事..."
                        value={desc}
                        onChange={(e) => setDesc(e.target.value)}
                    />
                </div>

                <div className="space-y-2 pt-2 border-t border-border">
                    <label className="text-[10px] text-muted-foreground font-medium">正文内容</label>
                    <Textarea 
                        className="w-full h-48 bg-background border border-border rounded-lg p-3 text-[11px] text-foreground placeholder-zinc-700 resize-none focus:outline-none focus:border-blue-500/50 leading-relaxed"
                        placeholder="输入小说原文或详细剧本内容..."
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                    />
                </div>

                {!setFooter && (
                    <Button 
                        className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-[11px] shadow-lg shadow-blue-900/20 gap-2 mt-4"
                        onClick={handleCreate}
                    >
                        <Check size={14} />
                        <span>创建章节</span>
                    </Button>
                )}
            </div>
        </section>
    );
}
