import{i as y,a as x,b as n,n as a}from"./property-ChPqBGW_.js";import{r as f}from"./state-BnFRu-9h.js";var w=Object.defineProperty,u=(d,t,i,o)=>{for(var e=void 0,l=d.length-1,c;l>=0;l--)(c=d[l])&&(e=c(t,i,e)||e);return e&&w(t,i,e),e};const b=class b extends y{constructor(){super(...arguments),this.gifts=[],this.disabled=!1,this.animationEnabled=!0,this.selectedCategory="all"}get filteredGifts(){return this.selectedCategory==="all"?this.gifts:this.gifts.filter(t=>t.category===this.selectedCategory)}sendGiftDirect(t,i=!1){if(console.log("[m7s-gift-panel] sendGiftDirect:",t.giftId,t.giftName,"disabled=",this.disabled,"gifts.length=",this.gifts.length),this.disabled)return;const o=i&&t.comboSupport?10:1;this.dispatchEvent(new CustomEvent("gift-send",{detail:{gift:t,count:o},bubbles:!0,composed:!0})),console.log("[m7s-gift-panel] gift-send event dispatched")}selectCategory(t){this.selectedCategory=t}render(){return console.log("[m7s-gift-panel] render: gifts.length=",this.gifts.length,"filteredGifts.length=",this.filteredGifts.length,"disabled=",this.disabled),n`
      <div class="panel-header">
        <span class="panel-title">Send gift</span>
        ${this.userBalance!==void 0?n`
          <span class="user-balance">💰 ${this.userBalance}</span>
        `:""}
      </div>

      <div class="gift-categories">
        <button
          class="category-btn ${this.selectedCategory==="all"?"active":""}"
          @click="${()=>this.selectCategory("all")}"
        >All</button>
        <button
          class="category-btn ${this.selectedCategory==="common"?"active":""}"
          @click="${()=>this.selectCategory("common")}"
        >Normal</button>
        <button
          class="category-btn ${this.selectedCategory==="luxury"?"active":""}"
          @click="${()=>this.selectCategory("luxury")}"
        >Premium</button>
        <button
          class="category-btn ${this.selectedCategory==="special"?"active":""}"
          @click="${()=>this.selectCategory("special")}"
        >Special</button>
      </div>

      ${this.filteredGifts.length>0?n`
        <div class="gift-grid">
          ${this.filteredGifts.map(t=>n`
            <div
              class="gift-item ${this.disabled?"disabled":""}"
              @click="${()=>this.sendGiftDirect(t,!1)}"
            >
              <span class="gift-icon">${t.giftIcon}</span>
              <span class="gift-name">${t.giftName}</span>
              ${t.price?n`<span class="gift-price">${t.price}币</span>`:""}
              <div class="gift-send-overlay">
                <button
                  class="gift-send-btn"
                  ?disabled="${this.disabled}"
                  @click="${i=>{i.stopPropagation(),this.sendGiftDirect(t,!1)}}"
                >
                  Send
                </button>
              </div>
            </div>
          `)}
        </div>
      `:n`
        <div class="empty-state">No gifts</div>
      `}
    `}};b.styles=x`
    :host {
      display: block;
      background: rgba(0, 0, 0, 0.9);
      border-radius: 12px;
      padding: 12px;
      min-width: 300px;
      color: #fff;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .panel-title {
      font-size: 16px;
      font-weight: 500;
    }

    .user-balance {
      font-size: 13px;
      color: #ffd700;
    }

    .gift-categories {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .category-btn {
      padding: 4px 12px;
      border: none;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .category-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .category-btn.active {
      background: #ff4757;
      color: #fff;
    }

    .gift-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 6px;
      margin-bottom: 8px;
      max-height: 240px;
      overflow-y: auto;
    }

    .gift-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 4px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: rgba(255, 255, 255, 0.05);
    }

    .gift-item:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.05);
    }

    .gift-item.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .gift-send-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.45);
      border-radius: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .gift-item:hover .gift-send-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    .gift-send-btn {
      border: none;
      border-radius: 14px;
      padding: 4px 12px;
      font-size: 12px;
      color: #fff;
      background: #ff4757;
      cursor: pointer;
    }

    .gift-icon {
      font-size: 28px;
      line-height: 1;
    }

    .gift-name {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .gift-price {
      font-size: 10px;
      color: #ffd700;
    }

    .gift-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .count-selector {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 4px;
    }

    .count-btn {
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .count-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .count-input {
      width: 40px;
      text-align: center;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 14px;
      outline: none;
    }

    .send-btn {
      flex: 1;
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #ff4757;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .send-btn:hover {
      background: #ff6b7a;
    }

    .send-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .combo-btn {
      padding: 8px 12px;
      border: none;
      border-radius: 20px;
      background: #ffa502;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .combo-btn:hover {
      background: #ffb527;
    }

    .combo-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .empty-state {
      text-align: center;
      padding: 24px;
      color: rgba(255, 255, 255, 0.5);
      font-size: 13px;
    }
  `;let p=b;u([a({type:Array})],p.prototype,"gifts");u([a({type:Number,attribute:"user-balance"})],p.prototype,"userBalance");u([a({type:Boolean})],p.prototype,"disabled");u([a({type:Boolean,attribute:"animation-enabled"})],p.prototype,"animationEnabled");u([f()],p.prototype,"selectedCategory");customElements.get("m7s-gift-panel")||customElements.define("m7s-gift-panel",p);var C=Object.defineProperty,r=(d,t,i,o)=>{for(var e=void 0,l=d.length-1,c;l>=0;l--)(c=d[l])&&(e=c(t,i,e)||e);return e&&C(t,i,e),e};const g=class g extends y{constructor(){super(...arguments),this.count=0,this.animated=!0,this.disabled=!1,this.icon="❤️",this.color="#ff4757",this.burstEffect=!0,this.burstThreshold=5,this.burstWindow=1e3,this.particles=[],this.isAnimating=!1,this.showBurst=!1,this.burstCount=0,this.clickTimestamps=[],this.particleIdCounter=0}handleClick(){if(this.disabled)return;const t=Date.now();this.clickTimestamps.push(t),this.clickTimestamps=this.clickTimestamps.filter(i=>t-i<this.burstWindow),this.animated&&(this.isAnimating=!0,setTimeout(()=>this.isAnimating=!1,300)),this.burstEffect&&this.addParticles(),this.clickTimestamps.length>=this.burstThreshold&&(this.burstCount=this.clickTimestamps.length,this.showBurst=!0,setTimeout(()=>this.showBurst=!1,500),this.dispatchEvent(new CustomEvent("burst",{detail:{count:this.burstCount},bubbles:!0,composed:!0})),this.clickTimestamps=[]),this.dispatchEvent(new CustomEvent("like",{detail:{count:1},bubbles:!0,composed:!0}))}addParticles(){const t=3+Math.floor(Math.random()*3),i=[];for(let o=0;o<t;o++){const e={id:this.particleIdCounter++,x:24+(Math.random()-.5)*20,y:24,scale:.5+Math.random()*.5,opacity:1,rotation:(Math.random()-.5)*60};i.push(e)}this.particles=[...this.particles,...i],i.forEach((o,e)=>{const l=-Math.PI/2+(Math.random()-.5)*Math.PI,c=2+Math.random()*3,v=Math.cos(l)*c,k=Math.sin(l)*c;let h=0;const m=()=>{h++,o.x+=v,o.y+=k-h*.1,o.opacity-=.02,o.rotation+=(Math.random()-.5)*10,o.opacity>0?(requestAnimationFrame(m),this.requestUpdate()):this.particles=this.particles.filter($=>$.id!==o.id)};setTimeout(()=>requestAnimationFrame(m),e*50)})}getParticleStyle(t){return`
      left: ${t.x}px;
      top: ${t.y}px;
      transform: scale(${t.scale}) rotate(${t.rotation}deg);
      opacity: ${t.opacity};
      color: ${this.color};
    `}render(){return n`
      <div class="like-wrapper">
        <button
          class="like-button ${this.isAnimating?"animated":""}"
          ?disabled="${this.disabled}"
          style="background: ${this.color}33"
          @click="${this.handleClick}"
        >
          <span class="like-icon" style="color: ${this.color}">${this.icon}</span>
          ${this.burstEffect?n`
            <div class="particles-container">
              ${this.particles.map(t=>n`
                <span
                  class="particle"
                  style="${this.getParticleStyle(t)}"
                >
                  ${this.icon}
                </span>
              `)}
            </div>
          `:""}
        </button>
        ${this.count>0?n`
          <span class="like-count">${this.formatCount(this.count)}</span>
        `:""}
        ${this.showBurst?n`
          <div class="burst-indicator">x${this.burstCount}</div>
        `:""}
      </div>
    `}formatCount(t){return t>=1e4?(t/1e4).toFixed(1)+"w":t>=1e3?(t/1e3).toFixed(1)+"k":t.toString()}};g.styles=x`
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
    }

    .like-button {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 71, 87, 0.2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      user-select: none;
    }

    .like-button:hover {
      background: rgba(255, 71, 87, 0.3);
      transform: scale(1.1);
    }

    .like-button:active {
      transform: scale(0.95);
    }

    .like-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .like-icon {
      font-size: 24px;
      transition: all 0.2s ease;
    }

    .like-button.animated .like-icon {
      animation: heartbeat 0.3s ease;
    }

    @keyframes heartbeat {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.3); }
    }

    .like-count {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }

    .particles-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .particle {
      position: absolute;
      font-size: 16px;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .burst-indicator {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      background: #ff4757;
      color: #fff;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: bold;
      animation: burst-popup 0.5s ease forwards;
      pointer-events: none;
    }

    @keyframes burst-popup {
      0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
      20% { opacity: 1; transform: translateX(-50%) translateY(0); }
      80% { opacity: 1; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    }
  `;let s=g;r([a({type:Number})],s.prototype,"count");r([a({type:Boolean})],s.prototype,"animated");r([a({type:Boolean})],s.prototype,"disabled");r([a({type:String})],s.prototype,"icon");r([a({type:String})],s.prototype,"color");r([a({type:Boolean,attribute:"burst-effect"})],s.prototype,"burstEffect");r([a({type:Number,attribute:"burst-threshold"})],s.prototype,"burstThreshold");r([a({type:Number,attribute:"burst-window"})],s.prototype,"burstWindow");r([f()],s.prototype,"particles");r([f()],s.prototype,"isAnimating");r([f()],s.prototype,"showBurst");r([f()],s.prototype,"burstCount");customElements.get("m7s-like-button")||customElements.define("m7s-like-button",s);export{p as GiftPanel,s as LikeButton};
