/* Inspector — clip properties + effect stack + chat teaser */

function Inspector({ clip, media, onOpenChat, onUpdateClip, onRemoveEffect }) {
  if (!clip) {
    return (
      <section className="panel">
        <div className="panel-header">
          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-2)", fontWeight: 600 }}>Properties</span>
          <div className="panel-meta">No selection</div>
        </div>
        <div className="inspector">
          <div className="prop-group">
            <div className="prop-group-header">
              <span>Project</span>
              <span className="chev">◦</span>
            </div>
            <div className="prop-group-body">
              <div className="prop-row"><label>Format</label><span className="val">1080×1350</span></div>
              <div className="prop-row"><label>Framerate</label><span className="val">24 fps</span></div>
              <div className="prop-row"><label>Space</label><span className="val">Rec.709</span></div>
            </div>
          </div>
          <div className="empty-state">Select a clip on the timeline<br/>to edit its properties and<br/>open its AI chat.</div>
          <div className="chat-teaser disabled">
            <div className="chat-teaser-title"><Icon.Sparkle/>Clip AI</div>
            <div className="chat-teaser-sub">Every clip has its own AI chat. Select a clip to animate or manipulate just that clip.</div>
          </div>
        </div>
      </section>
    );
  }

  const asset = media.find((m) => m.id === clip.mediaId);

  return (
    <section className="panel">
      <div className="panel-header">
        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-2)", fontWeight: 600 }}>Clip Properties</span>
        <div className="panel-meta">{clip.id}</div>
      </div>

      <div className="inspector">
        <div className="prop-group">
          <div className="prop-group-header">
            <span>General</span>
            <Icon.Chevron/>
          </div>
          <div className="prop-group-body">
            <div className="prop-row"><label>Name</label><span className="val" style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{clip.name}</span></div>
            <div className="prop-row"><label>Type</label><span className="val">{clip.type.toUpperCase()}</span></div>
            <div className="prop-row"><label>Start</label><span className="val">{formatTC(clip.start)}</span></div>
            <div className="prop-row"><label>Duration</label><span className="val">{clip.duration.toFixed(2)}s</span></div>
          </div>
        </div>

        <div className="prop-group">
          <div className="prop-group-header">
            <span>Transform</span>
            <Icon.Chevron/>
          </div>
          <div className="prop-group-body">
            <div className="slider-row">
              <label>Opacity</label>
              <input type="range" min="0" max="100" defaultValue="100"/>
              <span className="sval">100%</span>
            </div>
            <div className="slider-row">
              <label>Scale</label>
              <input type="range" min="50" max="200" defaultValue="100"/>
              <span className="sval">1.00×</span>
            </div>
            <div className="prop-row">
              <label>Position</label>
              <div className="num-pair">
                <input className="num-field" defaultValue="0"/>
                <input className="num-field" defaultValue="0"/>
              </div>
            </div>
          </div>
        </div>

        <div className="prop-group">
          <div className="prop-group-header">
            <span>Effects Stack</span>
            <span className="chev" style={{fontFamily:"var(--mono)"}}>{clip.effects.length}</span>
          </div>
          <div className="prop-group-body">
            {clip.effects.length === 0 ? (
              <div style={{fontSize:11, color:"var(--text-3)", textAlign:"center", padding:"8px 0"}}>
                No effects. Use Clip AI below to add some.
              </div>
            ) : clip.effects.map((e) => (
              <div key={e.id} className={"effect-chip " + (e.kind === "ai" ? "ai" : "")}>
                <span className="dot"/>
                <span className="name">{e.name}</span>
                <span className="val">{e.value}</span>
                <span className="x" onClick={() => onRemoveEffect(clip.id, e.id)}>×</span>
              </div>
            ))}
          </div>
        </div>

        <div className="chat-teaser" onClick={onOpenChat}>
          <div className="chat-teaser-title"><Icon.Sparkle/>Clip AI Chat</div>
          <div className="chat-teaser-sub">
            {clip.chat.length === 0
              ? `This clip has no prompts yet. Try "make it feel dreamy".`
              : `${clip.chat.filter(m => m.role === "user").length} prompt${clip.chat.filter(m => m.role === "user").length === 1 ? "" : "s"} so far — click to reopen.`}
          </div>
          <div className="chat-teaser-open">Open chat →</div>
        </div>
      </div>
    </section>
  );
}

window.Inspector = Inspector;