import type { ScriptShot } from '../../../types/project';

interface AvatarMaterial {
  id: string;
  name: string;
  duration: number;
  path: string;
}

interface ShotTimelineProps {
  shots: ScriptShot[];
  activeScene: number;
  materialMatchMap: Record<string, { url: string; duration: number } | null>;
  userUploadedMaterials: Record<string, { path: string; duration: number }>;
  selectedAvatarMaterial: AvatarMaterial | null;
  isComposedPreview: boolean;
  matchingShotIds?: Set<string>;
  onSceneClick: (id: number, shot: ScriptShot) => void;
  onSwitchMaterial: (shotId: string) => void;
  onUploadMaterial: (shotId: string) => void;
  onMatchMaterial: (shotId: string) => void;
}

/**
 * 分镜时间轴列表
 * - 展示所有分镜/空镜卡片
 * - 空镜展示素材匹配状态 + 切换/上传按钮
 * - 分镜展示形象素材状态
 */
const ShotTimeline: React.FC<ShotTimelineProps> = ({
  shots,
  activeScene,
  materialMatchMap,
  userUploadedMaterials,
  selectedAvatarMaterial,
  isComposedPreview,
  matchingShotIds,
  onSceneClick,
  onSwitchMaterial,
  onUploadMaterial,
  onMatchMaterial,
}) => {
  return (
    <div
      className="panel-section"
      style={{
        flex: 1,
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <label className="panel-label">脚本内容</label>
      <div className="script-editor" style={{ flex: 1, overflowY: 'auto', paddingRight: '4px' }}>
        {shots.length === 0 ? (
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
              color: 'var(--text-secondary)',
              gap: 'var(--spacing-md)',
              opacity: 0.6,
            }}
          >
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
            </svg>
            <span>暂无分镜数据，请先生成脚本</span>
          </div>
        ) : (
          shots.map((shot) => {
            return (
              <div
                key={shot.id}
                className={`scene-card-compact ${!isComposedPreview && activeScene === Number(shot.id) ? 'active' : ''}`}
                onClick={() => onSceneClick(Number(shot.id), shot)}
              >
                <div className="scene-card-header">
                  <span className="scene-id-text">镜头 {shot.id}</span>
                  <span
                    className={`scene-type-badge ${shot.type === 'empty_shot' ? 'empty' : 'regular'}`}
                  >
                    {shot.type === 'empty_shot' ? '空镜' : '分镜'}
                  </span>
                  <span className="scene-duration-badge">{shot.duration}</span>
                  <div className="scene-status-dot" title="等待生成" />
                </div>
                <div className="scene-card-body">
                  <p className="scene-card-desc">
                    <span className="scene-field-label-pill">画面</span>
                    {shot.scene || '未设置画面描述'}
                  </p>
                  <p className="scene-card-voiceover">
                    <span className="scene-field-label-pill">配音</span>
                    {shot.voiceover || '未设置配音文本'}
                  </p>
                  {/* 素材匹配状态 - 仅空镜 */}
                  {shot.type === 'empty_shot' && (
                    <div
                      className="scene-card-material"
                      style={{
                        fontSize: 'var(--font-xs)',
                        marginTop: '4px',
                        color: materialMatchMap[String(shot.id)] ? 'var(--success)' : 'var(--danger)',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '6px',
                      }}
                    >
                      <span className="scene-field-label-pill" style={{ fontSize: '10px' }}>
                        素材
                      </span>
                      {materialMatchMap[String(shot.id)] ? (
                        <span style={{ display: 'flex', alignItems: 'center', gap: '4px', flex: 1 }}>
                          ✓ {userUploadedMaterials[String(shot.id)] ? '已上传' : '已匹配'}（
                          {materialMatchMap[String(shot.id)]!.duration.toFixed(1)}s）
                        </span>
                      ) : (
                        <span style={{ flex: 1 }}>✗ 未匹配</span>
                      )}
                      <button
                        className="btn btn-ghost btn-sm"
                        style={{ fontSize: '11px', padding: '2px 6px', color: 'var(--primary)' }}
                        disabled={matchingShotIds?.has(String(shot.id))}
                        onClick={(e) => {
                          e.stopPropagation();
                          const sid = String(shot.id);
                          if (materialMatchMap[sid]) {
                            onSwitchMaterial(sid);
                          } else {
                            onMatchMaterial(sid);
                          }
                        }}
                      >
                        {matchingShotIds?.has(String(shot.id))
                          ? '匹配中...'
                          : materialMatchMap[String(shot.id)]
                            ? '换一个'
                            : '匹配素材'}
                      </button>
                      <button
                        className="btn btn-ghost btn-sm"
                        style={{
                          fontSize: '11px',
                          padding: '2px 6px',
                          color: 'var(--primary)',
                        }}
                        onClick={(e) => {
                          e.stopPropagation();
                          onUploadMaterial(String(shot.id));
                        }}
                      >
                        上传素材
                      </button>
                    </div>
                  )}
                  {/* 形象素材状态 - 仅人物出镜 */}
                  {shot.type !== 'empty_shot' && selectedAvatarMaterial && (
                    <div
                      className="scene-card-material"
                      style={{
                        fontSize: 'var(--font-xs)',
                        marginTop: '4px',
                        color: 'var(--text-secondary)',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '4px',
                      }}
                    >
                      <span className="scene-field-label-pill" style={{ fontSize: '10px' }}>
                        形象
                      </span>
                      <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                        {selectedAvatarMaterial.name}（{selectedAvatarMaterial.duration.toFixed(1)}s）
                      </span>
                    </div>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

export default ShotTimeline;
