import { useCallback, useEffect, useState } from "react";
import api from "@/lib/axios";

export 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;
}

export 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 UseTitleSubtitleStylesOptions {
  isAuthLoading: boolean;
  storageKey: string;
  setSelectedSubtitleStyleId: React.Dispatch<React.SetStateAction<string>>;
  setSelectedTitleStyleId: React.Dispatch<React.SetStateAction<string>>;
}

export const useTitleSubtitleStyles = ({
  isAuthLoading,
  storageKey,
  setSelectedSubtitleStyleId,
  setSelectedTitleStyleId,
}: UseTitleSubtitleStylesOptions) => {
  const [subtitleStyles, setSubtitleStyles] = useState<SubtitleStyleOption[]>([]);
  const [titleStyles, setTitleStyles] = useState<TitleStyleOption[]>([]);

  const refreshSubtitleStyles = useCallback(async () => {
    try {
      const { data } = await api.get('/api/assets/subtitle-styles');
      const styles: SubtitleStyleOption[] = data.styles || [];
      setSubtitleStyles(styles);

      const savedStyleId = localStorage.getItem(`vigent_${storageKey}_subtitleStyle`);
      setSelectedSubtitleStyleId((prev) => {
        if (prev && styles.some((s) => s.id === prev)) return prev;
        if (savedStyleId && styles.some((s) => s.id === savedStyleId)) return savedStyleId;
        const defaultStyle = styles.find((s) => s.is_default) || styles[0];
        return defaultStyle?.id || "";
      });
    } catch (error) {
      console.error("获取字幕样式失败:", error);
    }
  }, [setSelectedSubtitleStyleId, storageKey]);

  const refreshTitleStyles = useCallback(async () => {
    try {
      const { data } = await api.get('/api/assets/title-styles');
      const styles: TitleStyleOption[] = data.styles || [];
      setTitleStyles(styles);

      const savedStyleId = localStorage.getItem(`vigent_${storageKey}_titleStyle`);
      setSelectedTitleStyleId((prev) => {
        if (prev && styles.some((s) => s.id === prev)) return prev;
        if (savedStyleId && styles.some((s) => s.id === savedStyleId)) return savedStyleId;
        const defaultStyle = styles.find((s) => s.is_default) || styles[0];
        return defaultStyle?.id || "";
      });
    } catch (error) {
      console.error("获取标题样式失败:", error);
    }
  }, [setSelectedTitleStyleId, storageKey]);

  useEffect(() => {
    if (isAuthLoading) return;
    refreshSubtitleStyles();
    refreshTitleStyles();
  }, [isAuthLoading, refreshSubtitleStyles, refreshTitleStyles]);

  return {
    subtitleStyles,
    titleStyles,
    refreshSubtitleStyles,
    refreshTitleStyles,
  };
};
