/**
 * ShotStats 组件
 * ==============
 *
 * 显示分镜统计信息（字数、时长、分镜数、空镜数）
 * 用于 ScriptCreation 等页面
 */

import './ShotStats.css';

export interface ShotStatsData {
  totalWords: number;
  totalDuration: number;
  segmentCount: number;
  emptyShotCount: number;
}

interface ShotStatsProps {
  stats: ShotStatsData;
  className?: string;
}

/**
 * 分镜统计组件
 */
export const ShotStats: React.FC<ShotStatsProps> = ({ stats, className = '' }) => {
  const { totalWords, totalDuration, segmentCount, emptyShotCount } = stats;

  return (
    <div className={`shot-stats ${className}`}>
      <StatItem icon={<WordIcon />} value={totalWords} label="总字数" />
      <StatItem icon={<DurationIcon />} value={`${totalDuration}s`} label="预计时长" />
      <StatItem icon={<SegmentIcon />} value={segmentCount} label="分镜数" />
      <StatItem icon={<EmptyShotIcon />} value={emptyShotCount} label="空镜数" />
    </div>
  );
};

// 子组件：单个统计项
interface StatItemProps {
  icon: React.ReactNode;
  value: string | number;
  label: string;
}

const StatItem: React.FC<StatItemProps> = ({ icon, value, label }) => (
  <div className="shot-stats-item">
    <div className="shot-stats-icon">{icon}</div>
    <span className="shot-stats-value">{value}</span>
    <span className="shot-stats-label">{label}</span>
  </div>
);

// 图标组件
const WordIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
    <polyline points="14 2 14 8 20 8" />
    <line x1="16" y1="13" x2="8" y2="13" />
    <line x1="16" y1="17" x2="8" y2="17" />
    <polyline points="10 9 9 9 8 9" />
  </svg>
);

const DurationIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="12" cy="12" r="10" />
    <polyline points="12 6 12 12 16 14" />
  </svg>
);

const SegmentIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
    <line x1="3" y1="9" x2="21" y2="9" />
    <line x1="9" y1="21" x2="9" y2="9" />
  </svg>
);

const EmptyShotIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
    <circle cx="8.5" cy="8.5" r="1.5" />
    <polyline points="21 15 16 10 5 21" />
  </svg>
);

export default ShotStats;
