import { useRef } from 'react';
import { useInputBarStore } from '../store/inputBar';
import { showToast } from './Toast';
import styles from './KeyframeUpload.module.css';

const IMAGE_MAX = 20 * 1024 * 1024;

export function KeyframeUpload() {
  const firstFrame = useInputBarStore((s) => s.firstFrame);
  const lastFrame = useInputBarStore((s) => s.lastFrame);
  const setFirstFrame = useInputBarStore((s) => s.setFirstFrame);
  const setLastFrame = useInputBarStore((s) => s.setLastFrame);
  const firstInputRef = useRef<HTMLInputElement>(null);
  const lastInputRef = useRef<HTMLInputElement>(null);

  const handleFirstChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > IMAGE_MAX) { showToast('图片文件不能超过20MB'); }
      else { setFirstFrame(file); }
    }
    e.target.value = '';
  };

  const handleLastChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > IMAGE_MAX) { showToast('图片文件不能超过20MB'); }
      else { setLastFrame(file); }
    }
    e.target.value = '';
  };

  return (
    <div className={styles.wrapper}>
      <input
        ref={firstInputRef}
        type="file"
        accept="image/*"
        className={styles.hiddenInput}
        onChange={handleFirstChange}
      />
      <input
        ref={lastInputRef}
        type="file"
        accept="image/*"
        className={styles.hiddenInput}
        onChange={handleLastChange}
      />

      {/* First frame */}
      {firstFrame ? (
        <div className={styles.thumbItem}>
          <img src={firstFrame.previewUrl} alt="首帧" className={styles.thumbMedia} />
          <div className={styles.thumbClose} onClick={() => setFirstFrame(null)}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </div>
          <div className={styles.thumbLabel}>首帧</div>
        </div>
      ) : (
        <div className={styles.trigger} onClick={() => firstInputRef.current?.click()}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5a5a6a" strokeWidth="1.5">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="12" cy="12" r="3" />
          </svg>
          <span className={styles.triggerText}>首帧</span>
        </div>
      )}

      {/* Arrow */}
      <div className={styles.arrow}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
          <path d="M7 12h10M17 12l-3-3M17 12l-3 3M7 12l3-3M7 12l3 3" />
        </svg>
      </div>

      {/* Last frame */}
      {lastFrame ? (
        <div className={styles.thumbItem}>
          <img src={lastFrame.previewUrl} alt="尾帧" className={styles.thumbMedia} />
          <div className={styles.thumbClose} onClick={() => setLastFrame(null)}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </div>
          <div className={styles.thumbLabel}>尾帧</div>
        </div>
      ) : (
        <div className={styles.trigger} onClick={() => lastInputRef.current?.click()}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5a5a6a" strokeWidth="1.5" strokeLinecap="round">
            <line x1="12" y1="5" x2="12" y2="19" />
            <line x1="5" y1="12" x2="19" y2="12" />
          </svg>
          <span className={styles.triggerText}>尾帧</span>
        </div>
      )}
    </div>
  );
}
