import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
import type { User } from "../types/ApiTypes";
import StatsStyling from "../styles/stats_styling";

const styles = StatsStyling;

type Props = {
  open: boolean;
  onClose: () => void;
  userData: User | null;
  username: string;
};

export default function UserModal({
  open,
  onClose,
  userData,
  username,
}: Props) {
  const dominantEmotionEntry = Object.entries(
    userData?.avg_emotions ?? {},
  ).sort((a, b) => b[1] - a[1])[0];

  return (
    <Dialog open={open} onClose={onClose} style={styles.modalRoot}>
      <div style={styles.modalBackdrop} />

      <div style={styles.modalContainer}>
        <DialogPanel style={{ ...styles.card, ...styles.modalPanel }}>
          <div style={styles.headerBar}>
            <div>
              <DialogTitle style={styles.sectionTitle}>{username}</DialogTitle>
              <p style={styles.sectionSubtitle}>User activity breakdown</p>
            </div>

            <button onClick={onClose} style={styles.buttonSecondary}>
              Close
            </button>
          </div>

          {!userData ? (
            <p style={styles.sectionSubtitle}>No data for this user.</p>
          ) : (
            <div style={styles.topUsersList}>
              <div style={{ ...styles.topUserName, fontSize: 20 }}>
                {userData.author}
              </div>
              <div style={styles.topUserItem}>
                <div style={styles.topUserName}>Posts</div>
                <div style={styles.topUserMeta}>{userData.post}</div>
              </div>

              <div style={styles.topUserItem}>
                <div style={styles.topUserName}>Comments</div>
                <div style={styles.topUserMeta}>{userData.comment}</div>
              </div>

              <div style={styles.topUserItem}>
                <div style={styles.topUserName}>Comment/Post Ratio</div>
                <div style={styles.topUserMeta}>
                  {userData.comment_post_ratio.toFixed(2)}
                </div>
              </div>

              <div style={styles.topUserItem}>
                <div style={styles.topUserName}>Comment Share</div>
                <div style={styles.topUserMeta}>
                  {(userData.comment_share * 100).toFixed(1)}%
                </div>
              </div>

              {userData.vocab ? (
                <div style={styles.topUserItem}>
                  <div style={styles.topUserName}>Vocab Richness</div>
                  <div style={styles.topUserMeta}>
                    {userData.vocab.vocab_richness} (avg{" "}
                    {userData.vocab.avg_words_per_event} words/event)
                  </div>
                </div>
              ) : null}

              {dominantEmotionEntry ? (
                <div style={styles.topUserItem}>
                  <div style={styles.topUserName}>Dominant Avg Emotion</div>
                  <div style={styles.topUserMeta}>
                    {dominantEmotionEntry[0].replace("emotion_", "")} (
                    {dominantEmotionEntry[1].toFixed(3)})
                  </div>
                </div>
              ) : null}

              {userData.dominant_topic ? (
                <div style={styles.topUserItem}>
                  <div style={styles.topUserName}>Most Common Topic</div>
                  <div style={styles.topUserMeta}>
                    {userData.dominant_topic.topic} ({userData.dominant_topic.count} events)
                  </div>
                </div>
              ) : null}
            </div>
          )}
        </DialogPanel>
      </div>
    </Dialog>
  );
}
