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) {
  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}
            </div>
          )}
        </DialogPanel>
      </div>
    </Dialog>
  );
}