import styled from '@emotion/styled';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import { useState } from 'react';

const Table = styled.table`
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  thead {
    height: 50px;
    text-align: left;
  }
  tbody {
    tr:nth-of-type(odd) {
      background-color: #f9f9f9;
    }
    tr {
      cursor: pointer;
      transition: background-color 0.3s;
    }
    tr:hover {
      background-color: #f1f1f1;
    }
  }
  td,
  th {
    height: 40px;
    width: 100px;
    border: 0.5px solid #ddd;
    padding: 5px 10px;
  }
`;

const QueryToggleButton = styled.button`
  width: 100%;
  padding: 12px 20px;
  border: none;
  background-color: #eee;
  cursor: pointer;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: #ddd;
  }
  margin-bottom: 20px;
`;

interface UserEngagementScore {
  id: number;
  rank: number;
  email: string;
  name: string;
  engagement_score: number;
  saved_project_count: number;
  named_project_count: number;
  conductor_request_count: number;
  library_open_count: number;
  toggled_playback_count: number;
  share_count: number;
  composer_request_count: number;
}

const DashboardEngagedUsers = ({ serverUri }: { serverUri: string }) => {
  const [showAllTime, setShowAllTime] = useState(true);
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(50);

  const [maxPageNumber, setMaxPageNumber] = useState(0);
  const [totalCount, setTotalCount] = useState(0);

  const router = useRouter();
  const { data: mostEngagedUsers } = useQuery({
    queryKey: ['engagement-scores-all-time', pageNumber],
    queryFn: async () => {
      const response = await fetch(
        `${serverUri}/api/admin/user/scoresAllTime?pageNumber=${pageNumber}&pageSize=${pageSize}`,
        { credentials: 'include' }
      );
      const { users, totalCount } = await response.json();

      setTotalCount(totalCount);
      setMaxPageNumber(Math.ceil(totalCount / pageSize));

      return users;
    },
    keepPreviousData: true,
  });
  const { data: recentEngagedUsers } = useQuery({
    queryKey: ['engagement-scores-recent', pageNumber],
    queryFn: async () => {
      const response = await fetch(
        `${serverUri}/api/admin/user/scoresRecent?pageNumber=${pageNumber}&pageSize=${pageSize}`,
        { credentials: 'include' }
      );
      const { users } = await response.json();
      return users;
    },
    keepPreviousData: true,
  });

  return (
    <>
      <h1 style={{ marginBottom: '20px' }}>Engaged Users List</h1>
      <p>
        Note: For information about syncing the engagement score to Zoho, please go to the{' '}
        <a href="/admin/zohoSync">Zoho Sync page</a>
      </p>
      <QueryToggleButton
        onClick={() => {
          setShowAllTime((showAllTime) => !showAllTime);
        }}
      >
        {showAllTime
          ? 'Click to show top engaged users in the past 28 days'
          : 'Click to show top engaged users of all time'}
      </QueryToggleButton>

      <hr />
      <h3>
        {showAllTime
          ? `Top engaged users of all time (${totalCount} users)`
          : `Top engaged users in the past 28 days (${totalCount} users)`}
      </h3>
      <Table>
        <thead>
          <tr>
            <th style={{ width: '40px' }}>Rank</th>
            <th style={{ width: '120px' }}>Name</th>
            <th style={{ width: '160px' }}>Email</th>
            <th>Engagement Score</th>
            <th>Saved Projects</th>
            <th>Named Projects</th>
            <th>Conductor Requests</th>
            <th>Library Opens</th>
            <th>Playback Count</th>
            <th>Shared Tracks</th>
            <th>Composer Requests</th>
          </tr>
        </thead>
        <tbody>
          {(showAllTime ? mostEngagedUsers || [] : recentEngagedUsers || []).map((user: UserEngagementScore, i) => (
            <tr key={user.email} onClick={() => router.push(`user/${user.id}`)}>
              <td style={{ width: '40px' }}>{user.rank}</td>
              <td style={{ width: '120px' }}>{user.name}</td>
              <td style={{ maxWidth: '160px', whiteSpace: 'nowrap', overflow: 'scroll', textOverflow: 'clip' }}>
                {user.email}
              </td>
              <td>{user.engagement_score}</td>
              <td>{user.saved_project_count}</td>
              <td>{user.named_project_count}</td>
              <td>{user.conductor_request_count}</td>
              <td>{user.library_open_count}</td>
              <td>{user.toggled_playback_count}</td>
              <td>{user.share_count}</td>
              <td>{user.composer_request_count}</td>
            </tr>
          ))}
        </tbody>
      </Table>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
        <button disabled={pageNumber === 1} onClick={() => setPageNumber(pageNumber - 1)}>
          Previous Page
        </button>
        <span>
          Showing page {pageNumber} of {maxPageNumber}
        </span>
        <button
          disabled={!mostEngagedUsers || maxPageNumber <= pageNumber}
          onClick={() => setPageNumber(pageNumber + 1)}
        >
          Next Page
        </button>
      </div>
    </>
  );
};

export default DashboardEngagedUsers;