/* Media panel — tabbed browser with drag source cards */
const { useState } = React;

function MediaPanel({ media, onDragStart, usedIds }) {
  const [tab, setTab] = useState("media");

  const renderThumb = (item) => {
    if (item.type === "audio") {
      return (
        <div className="media-audio-thumb">
          <div className="media-audio-bars">
            {Array.from({ length: 24 }).map((_, i) => {
              const h = 24 + Math.abs(Math.sin(i * 0.65)) * 48;
              return <span key={i} style={{ height: `${h}%` }} />;
            })}
          </div>
          <div className="media-audio-label">AUDIO</div>
        </div>
      );
    }

    if (item.type === "video") {
      return <video src={item.url} muted playsInline preload="metadata" />;
    }

    return <img src={item.url} alt={item.name} />;
  };

  return (
    <section className="panel">
      <div className="panel-header">
        <div className="panel-tabs" role="tablist">
          {["Media", "Transitions", "Text", "Audio"].map((t) => (
            <button
              key={t}
              className={"tab " + (tab === t.toLowerCase() ? "active" : "")}
              onClick={() => setTab(t.toLowerCase())}
            >
              {t}
            </button>
          ))}
        </div>
        <div className="panel-meta">{media.length} items</div>
      </div>

      <div className="drop-zone">
        <div className="drop-hint">
          <span>Drop files or</span>
          <button type="button">Browse</button>
        </div>
        <div className="media-grid">
          {media.map((m) => (
            <div
              key={m.id}
              className={"media-card " + (usedIds.has(m.id) ? "used" : "")}
              draggable
              onDragStart={(e) => onDragStart(e, m.id)}
              title={m.name}
            >
              <div className="media-thumb">
                {renderThumb(m)}
                <div className="media-type-badge">{m.type}</div>
                <div className="media-dur">{m.duration.toFixed(1)}s</div>
              </div>
              <div className="media-name">{m.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MediaPanel = MediaPanel;