video-flow-b/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx

"use client";

import React, { useEffect, useMemo, useState } from 'react';
import { Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { fetchSettingByCode } from '@/api/serversetting';
import type { PortraitAnimeValue } from './config-options';

interface PortraitAnimeSelectorProps {
    /** Current value: 'portrait' or anime pcode */
    value: PortraitAnimeValue;
    /** Change handler */
    onChange: (value: PortraitAnimeValue) => void;
    /** Optional class name */
    className?: string;
    /** Disabled state */
    disabled?: boolean;
}

/**
 * Portrait/Anime selector with dropdown for Anime subtypes.
 * Styled to match VideoCreationForm design.
 * @param {PortraitAnimeValue} value - Current value: 'portrait' or anime pcode
 * @param {(value: PortraitAnimeValue) => void} onChange - Change handler
 * @param {string} [className] - Optional wrapper class
 * @param {boolean} [disabled] - Disable interaction when true
 * @returns {JSX.Element}
 */
export function PortraitAnimeSelector({
    value,
    onChange,
    className,
    disabled = false,
}: PortraitAnimeSelectorProps) {
    const [lastAnimeChoice, setLastAnimeChoice] = useState<string>('STANDARD_V1_734684_116483');
    const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]);

    useEffect(() => {
        if (value && value !== 'portrait') {
            setLastAnimeChoice(value);
        }
    }, [value]);

    useEffect(() => {
        let mounted = true;
        (async () => {
            const list = await fetchSettingByCode<Array<{ name: string; pcode: string }>>('comic_config', []);
            if (!mounted) return;
            if (Array.isArray(list) && list.length > 0) {
                setAnimeOptions(list);
                setLastAnimeChoice((prev) => (prev === 'STANDARD_V1_734684_116483' ? list[0].pcode : prev));
            } else {
                setAnimeOptions([
                    { name: 'Korean Comics Long', pcode: 'STANDARD_V1_734684_116483' },
                ]);
            }
        })();
        return () => { mounted = false; };
    }, []);

    const isPortrait = value === 'portrait';
    const currentAnime = useMemo(() => (value && value !== 'portrait' ? value : lastAnimeChoice), [value, lastAnimeChoice]);
    const pcodeToName = useMemo(() => {
        const map: Record<string, string> = {};
        animeOptions.forEach((o) => { map[o.pcode] = o.name; });
        return map;
    }, [animeOptions]);

    /** Anime dropdown menu items */
    const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
        key: opt.pcode,
        label: <span className="text-gray-300 text-sm">{opt.name}</span>,
    }));

    return (
        <div
            data-alt="portrait-anime-selector"
            className={`h-8 p-1 flex items-center rounded-full border border-white/20 hover:border-cyan-400/60 ${className || ''}`}
        >
            {/* Portrait button */}
            <button
                data-alt="portrait-button"
                type="button"
                disabled={disabled}
                onClick={() => onChange('portrait')}
                className={`h-6 px-2 rounded-full transition-all duration-200 flex items-center text-sm ${
                    disabled 
                        ? 'opacity-40 cursor-not-allowed bg-transparent text-gray-400'
                        : isPortrait
                        ? 'bg-white/10 text-cyan-400 shadow-sm'
                        : 'bg-transparent text-gray-400 hover:text-gray-300'
                }`}
            >
                Portrait
            </button>

            {/* Anime dropdown button */}
            <Dropdown 
                menu={{ 
                    items: animeMenuItems,
                    onClick: ({ key }) => onChange(key as PortraitAnimeValue),
                    className: 'bg-[#1a1a1a] border border-white/10'
                }} 
                trigger={['click']} 
                disabled={disabled}
            >
                <button
                    data-alt="anime-button"
                    type="button"
                    disabled={disabled}
                    className={`h-6 px-2 rounded-full transition-all duration-200 flex items-center gap-1.5 text-sm ${
                        disabled
                            ? 'opacity-40 cursor-not-allowed bg-transparent text-gray-400'
                            : !isPortrait
                            ? 'bg-white/10 text-cyan-400 shadow-sm'
                            : 'bg-transparent text-gray-400 hover:text-gray-300'
                    }`}
                >
                    <span className="max-w-[100px] truncate">
                        {!isPortrait && pcodeToName[currentAnime] 
                            ? pcodeToName[currentAnime] 
                            : 'Anime'}
                    </span>
                    <DownOutlined className="text-xs" />
                </button>
            </Dropdown>
        </div>
    );
}

export default PortraitAnimeSelector;