import { ChevronDown, Eye } from "lucide-react";
import { FloatingStylePreview } from "@/features/home/ui/FloatingStylePreview";

interface SubtitleStyleOption {
  id: string;
  label: string;
  font_family?: string;
  font_file?: string;
  font_size?: number;
  highlight_color?: string;
  normal_color?: string;
  stroke_color?: string;
  stroke_size?: number;
  letter_spacing?: number;
  bottom_margin?: number;
  is_default?: boolean;
}

interface TitleStyleOption {
  id: string;
  label: string;
  font_family?: string;
  font_file?: string;
  font_size?: number;
  color?: string;
  stroke_color?: string;
  stroke_size?: number;
  letter_spacing?: number;
  font_weight?: number;
  top_margin?: number;
  is_default?: boolean;
}

interface TitleSubtitlePanelProps {
  showStylePreview: boolean;
  onTogglePreview: () => void;
  videoTitle: string;
  onTitleChange: (value: string) => void;
  onTitleCompositionStart?: () => void;
  onTitleCompositionEnd?: (value: string) => void;
  videoSecondaryTitle: string;
  onSecondaryTitleChange: (value: string) => void;
  onSecondaryTitleCompositionStart?: () => void;
  onSecondaryTitleCompositionEnd?: (value: string) => void;
  titleStyles: TitleStyleOption[];
  selectedTitleStyleId: string;
  onSelectTitleStyle: (id: string) => void;
  titleFontSize: number;
  onTitleFontSizeChange: (value: number) => void;
  selectedSecondaryTitleStyleId: string;
  onSelectSecondaryTitleStyle: (id: string) => void;
  secondaryTitleFontSize: number;
  onSecondaryTitleFontSizeChange: (value: number) => void;
  secondaryTitleTopMargin: number;
  onSecondaryTitleTopMarginChange: (value: number) => void;
  subtitleStyles: SubtitleStyleOption[];
  selectedSubtitleStyleId: string;
  onSelectSubtitleStyle: (id: string) => void;
  subtitleFontSize: number;
  onSubtitleFontSizeChange: (value: number) => void;
  titleTopMargin: number;
  onTitleTopMarginChange: (value: number) => void;
  subtitleBottomMargin: number;
  onSubtitleBottomMarginChange: (value: number) => void;
  titleDisplayMode: "short" | "persistent";
  onTitleDisplayModeChange: (mode: "short" | "persistent") => void;
  resolveAssetUrl: (path?: string | null) => string | null;
  getFontFormat: (fontFile?: string) => string;
  buildTextShadow: (color: string, size: number) => string;
  previewBaseWidth?: number;
  previewBaseHeight?: number;
}

export function TitleSubtitlePanel({
  showStylePreview,
  onTogglePreview,
  videoTitle,
  onTitleChange,
  onTitleCompositionStart,
  onTitleCompositionEnd,
  videoSecondaryTitle,
  onSecondaryTitleChange,
  onSecondaryTitleCompositionStart,
  onSecondaryTitleCompositionEnd,
  titleStyles,
  selectedTitleStyleId,
  onSelectTitleStyle,
  titleFontSize,
  onTitleFontSizeChange,
  selectedSecondaryTitleStyleId,
  onSelectSecondaryTitleStyle,
  secondaryTitleFontSize,
  onSecondaryTitleFontSizeChange,
  secondaryTitleTopMargin,
  onSecondaryTitleTopMarginChange,
  subtitleStyles,
  selectedSubtitleStyleId,
  onSelectSubtitleStyle,
  subtitleFontSize,
  onSubtitleFontSizeChange,
  titleTopMargin,
  onTitleTopMarginChange,
  subtitleBottomMargin,
  onSubtitleBottomMarginChange,
  titleDisplayMode,
  onTitleDisplayModeChange,
  resolveAssetUrl,
  getFontFormat,
  buildTextShadow,
  previewBaseWidth = 1080,
  previewBaseHeight = 1920,
}: TitleSubtitlePanelProps) {
  return (
    <div className="bg-white/5 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm">
      <div className="flex items-center justify-between mb-4 gap-2">
        <h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2">
          二、标题与字幕
        </h2>
        <div className="flex items-center gap-1.5">
          <div className="relative shrink-0">
            <select
              value={titleDisplayMode}
              onChange={(e) => onTitleDisplayModeChange(e.target.value as "short" | "persistent")}
              className="appearance-none rounded-lg border border-white/15 bg-black/35 px-2.5 py-1.5 pr-7 text-xs text-gray-200 outline-none transition-colors hover:border-white/25 focus:border-purple-500"
              aria-label="标题显示方式"
            >
              <option value="short">标题短暂显示</option>
              <option value="persistent">标题常驻显示</option>
            </select>
            <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" />
          </div>
          <button
            onClick={onTogglePreview}
            className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
          >
            <Eye className="h-3.5 w-3.5" />
            {showStylePreview ? "收起预览" : "预览样式"}
          </button>
        </div>
      </div>

      {showStylePreview && (
        <FloatingStylePreview
          onClose={onTogglePreview}
          videoTitle={videoTitle}
          videoSecondaryTitle={videoSecondaryTitle}
          titleStyles={titleStyles}
          selectedTitleStyleId={selectedTitleStyleId}
          titleFontSize={titleFontSize}
          selectedSecondaryTitleStyleId={selectedSecondaryTitleStyleId}
          secondaryTitleFontSize={secondaryTitleFontSize}
          secondaryTitleTopMargin={secondaryTitleTopMargin}
          subtitleStyles={subtitleStyles}
          selectedSubtitleStyleId={selectedSubtitleStyleId}
          subtitleFontSize={subtitleFontSize}
          titleTopMargin={titleTopMargin}
          subtitleBottomMargin={subtitleBottomMargin}
          enableSubtitles={true}
          resolveAssetUrl={resolveAssetUrl}
          getFontFormat={getFontFormat}
          buildTextShadow={buildTextShadow}
          previewBaseWidth={previewBaseWidth}
          previewBaseHeight={previewBaseHeight}
        />
      )}

      <div className="mb-4">
        <div className="flex items-center justify-between mb-2">
          <label className="text-sm text-gray-300">片头标题</label>
          <span className={`text-xs ${videoTitle.length > 15 ? "text-red-400" : "text-gray-500"}`}>{videoTitle.length}/15</span>
        </div>
        <input
          type="text"
          value={videoTitle}
          onChange={(e) => onTitleChange(e.target.value)}
          onCompositionStart={onTitleCompositionStart}
          onCompositionEnd={(e) => onTitleCompositionEnd?.(e.currentTarget.value)}
          placeholder="输入视频标题，将在片头显示"
          className="w-full px-3 sm:px-4 py-2 text-sm sm:text-base bg-black/30 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-colors"
        />
      </div>

      <div className="mb-4">
        <div className="flex items-center justify-between mb-2">
          <label className="text-sm text-gray-300">片头副标题</label>
          <span className={`text-xs ${videoSecondaryTitle.length > 20 ? "text-red-400" : "text-gray-500"}`}>{videoSecondaryTitle.length}/20</span>
        </div>
        <input
          type="text"
          value={videoSecondaryTitle}
          onChange={(e) => onSecondaryTitleChange(e.target.value)}
          onCompositionStart={onSecondaryTitleCompositionStart}
          onCompositionEnd={(e) => onSecondaryTitleCompositionEnd?.(e.currentTarget.value)}
          placeholder="输入副标题，显示在主标题下方"
          className="w-full px-3 sm:px-4 py-2 text-sm sm:text-base bg-black/30 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-colors"
        />
      </div>

      {titleStyles.length > 0 && (
        <div className="mb-4 space-y-3">
          <div className="flex items-center gap-3">
            <label className="text-sm text-gray-300 shrink-0 w-20">标题样式</label>
            <div className="relative w-1/3 min-w-[100px]">
              <select
                value={selectedTitleStyleId}
                onChange={(e) => onSelectTitleStyle(e.target.value)}
                className="w-full appearance-none rounded-lg border border-white/15 bg-black/35 px-3 py-2 pr-8 text-sm text-gray-200 outline-none transition-colors hover:border-white/25 focus:border-purple-500"
              >
                {titleStyles.map((style) => (
                  <option key={style.id} value={style.id}>{style.label}</option>
                ))}
              </select>
              <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" />
            </div>
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">字号 {titleFontSize}</label>
            <input type="range" min="60" max="150" step="1" value={titleFontSize} onChange={(e) => onTitleFontSizeChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">位置 {titleTopMargin}</label>
            <input type="range" min="0" max="300" step="1" value={titleTopMargin} onChange={(e) => onTitleTopMarginChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
        </div>
      )}

      {titleStyles.length > 0 && (
        <div className="mb-4 space-y-3">
          <div className="flex items-center gap-3">
            <label className="text-sm text-gray-300 shrink-0 w-20">副标题样式</label>
            <div className="relative w-1/3 min-w-[100px]">
              <select
                value={selectedSecondaryTitleStyleId}
                onChange={(e) => onSelectSecondaryTitleStyle(e.target.value)}
                className="w-full appearance-none rounded-lg border border-white/15 bg-black/35 px-3 py-2 pr-8 text-sm text-gray-200 outline-none transition-colors hover:border-white/25 focus:border-purple-500"
              >
                {titleStyles.map((style) => (
                  <option key={style.id} value={style.id}>{style.label}</option>
                ))}
              </select>
              <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" />
            </div>
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">字号 {secondaryTitleFontSize}</label>
            <input type="range" min="30" max="100" step="1" value={secondaryTitleFontSize} onChange={(e) => onSecondaryTitleFontSizeChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">间距 {secondaryTitleTopMargin}</label>
            <input type="range" min="0" max="100" step="1" value={secondaryTitleTopMargin} onChange={(e) => onSecondaryTitleTopMarginChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
        </div>
      )}

      {subtitleStyles.length > 0 && (
        <div className="mt-4 space-y-3">
          <div className="flex items-center gap-3">
            <label className="text-sm text-gray-300 shrink-0 w-20">字幕样式</label>
            <div className="relative w-1/3 min-w-[100px]">
              <select
                value={selectedSubtitleStyleId}
                onChange={(e) => onSelectSubtitleStyle(e.target.value)}
                className="w-full appearance-none rounded-lg border border-white/15 bg-black/35 px-3 py-2 pr-8 text-sm text-gray-200 outline-none transition-colors hover:border-white/25 focus:border-purple-500"
              >
                {subtitleStyles.map((style) => (
                  <option key={style.id} value={style.id}>{style.label}</option>
                ))}
              </select>
              <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" />
            </div>
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">字号 {subtitleFontSize}</label>
            <input type="range" min="40" max="90" step="1" value={subtitleFontSize} onChange={(e) => onSubtitleFontSizeChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
          <div className="flex items-center gap-3">
            <label className="text-xs text-gray-400 shrink-0 w-20">位置 {subtitleBottomMargin}</label>
            <input type="range" min="0" max="300" step="1" value={subtitleBottomMargin} onChange={(e) => onSubtitleBottomMarginChange(parseInt(e.target.value, 10))} className="flex-1 accent-purple-500" />
          </div>
        </div>
      )}
    </div>
  );
}
