/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {css, html, LitElement, nothing} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import {createRef, ref, Ref} from 'lit/directives/ref.js';
import {SHARED_STYLES} from '../css/shared-css.js';
import {User} from '../js-src/cs-client.js';
import './chromedash-activity-log.js';
import {showToastMessage} from './utils.js';

@customElement('chromedash-activity-page')
export class ChromedashActivityPage extends LitElement {
  commentAreaRef: Ref<HTMLTextAreaElement> = createRef();

  static get styles() {
    return [
      ...SHARED_STYLES,
      css`
        .instructions {
          padding: var(--content-padding-half);
          margin-bottom: var(--content-padding-large);
          margin-left: 10px;
        }

        #comment_area {
          margin: 0 var(--content-padding);
        }
        #header {
          margin-bottom: 10px;
          margin-left: 15px;
        }
        #controls {
          padding: var(--content-padding);
          text-align: right;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        #controls * + * {
          padding-left: var(--content-padding);
        }
      `,
    ];
  }

  @property({type: Object})
  user!: User;
  @property({type: Number})
  featureId = 0;
  @property({type: Array})
  comments = [];
  @state()
  loading = true;
  @property({type: Boolean})
  needsPost = false;
  @property({type: String})
  contextLink = '';

  connectedCallback() {
    super.connectedCallback();
    this.fetchComments();
  }

  fetchComments() {
    this.loading = true;
    Promise.all([window.csClient.getComments(this.featureId, null)])
      .then(([commentRes]) => {
        this.comments = commentRes.comments;
        this.needsPost = false;
        this.loading = false;
      })
      .catch(() => {
        showToastMessage(
          'Some errors occurred. Please refresh the page or try again later.'
        );
      });
  }

  reloadComments() {
    const commentArea = this.commentAreaRef.value;
    commentArea!.value = '';
    this.needsPost = false;
    Promise.all([window.csClient.getComments(this.featureId, null)])
      .then(([commentRes]) => {
        this.comments = commentRes.comments;
      })
      .catch(() => {
        showToastMessage(
          'Some errors occurred. Please refresh the page or try again later.'
        );
      });
  }

  checkNeedsPost() {
    let newNeedsPost = false;
    const commentArea = this.commentAreaRef.value;
    const newVal = (commentArea && commentArea.value.trim()) || '';
    if (newVal != '') newNeedsPost = true;
    this.needsPost = newNeedsPost;
  }

  handlePost() {
    const commentArea = this.commentAreaRef.value;
    const commentText = commentArea!.value.trim();
    if (commentText != '') {
      window.csClient
        .postComment(this.featureId, null, commentText, 0)
        .then(() => {
          this.reloadComments();
        })
        .catch(() => {
          showToastMessage(
            'Some errors occurred. Please refresh the page or try again later.'
          );
        });
    }
  }

  renderCommentsSkeleton() {
    // TODO(jrobbins): Include activities too.
    return html`
      <h2>Comments</h2>
      <sl-skeleton effect="sheen"></sl-skeleton>
    `;
  }

  renderControls() {
    if (!this.user || !this.user.can_comment) return nothing;

    const postButton = html`
      <sl-button
        variant="primary"
        @click=${this.handlePost}
        ?disabled=${!this.needsPost}
        size="small"
        >Post</sl-button
      >
    `;

    return html`
      <sl-textarea
        id="comment_area"
        rows="2"
        cols="40"
        resize="auto"
        ${ref(this.commentAreaRef)}
        @sl-change=${this.checkNeedsPost}
        @keypress=${this.checkNeedsPost}
        placeholder="Add a comment"
      ></sl-textarea>
      <div class="instructions">
        Comments will be visible publicly. Only reviewers will be notified when
        a comment is posted.
      </div>
      <div id="controls">${postButton}</div>
    `;
  }

  renderComments() {
    // TODO(jrobbins): Include relevant activities too.
    return html`
      <div id="header">
        <h2 id="breadcrumbs">
          <a href="/feature/${this.featureId}">
            <sl-icon name="arrow-left"></sl-icon>
            Comments &amp; Activity
          </a>
        </h2>
      </div>
      ${this.renderControls()}
      <chromedash-activity-log
        .user=${this.user}
        .featureId=${this.featureId}
        .narrow=${true}
        .reverse=${true}
        .comments=${this.comments}
      >
      </chromedash-activity-log>
    `;
  }

  render() {
    return html`
      ${this.loading ? this.renderCommentsSkeleton() : this.renderComments()}
    `;
  }
}
