import { AppLayout } from '@/Components/Layout/AppLayout';
import { formatCount } from '@/lib/formatters';

type UserStat = {
  id: number;
  name: string;
  username: string;
  roleKey: string;
  status: string;
  totalLogins: number;
  loginsThisMonth: number;
  lastLoginAt: string;
  lastSeenAt: string;
  isOnline: boolean;
};

type Props = {
  users: UserStat[];
};

const ROLE_LABELS: Record<string, string> = {
  owner: 'مدیر',
  principal: 'ناظم',
  moaven: 'معاون',
  teacher: 'معلم',
  student: 'دانش‌آموز',
  support: 'پشتیبانی',
  finance: 'مالی',
};

export default function UserActivity({ users }: Props) {
  return (
    <AppLayout title="فعالیت کاربران">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>آمار فعالیت کاربران</h2>
            <p>تعداد ورود، آخرین ورود و وضعیت آنلاین کاربران مدرسه.</p>
          </div>
          <span style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
            {users.filter((u) => u.isOnline).length} نفر آنلاین
          </span>
        </section>

        {users.length === 0 ? (
          <section className="panel-card">
            <p style={{ color: 'var(--color-text-muted)' }}>هنوز کاربری ثبت نشده است.</p>
          </section>
        ) : (
          <div className="table-wrap panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>نام</th>
                  <th>نام کاربری</th>
                  <th>نقش</th>
                  <th>وضعیت</th>
                  <th>ورود ماه</th>
                  <th>کل ورودها</th>
                  <th>آخرین ورود</th>
                  <th>آخرین فعالیت</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr key={user.id}>
                    <td style={{ fontWeight: 600 }}>
                      {user.isOnline && (
                        <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--color-success)', marginLeft: '0.4rem' }} />
                      )}
                      {user.name}
                    </td>
                    <td><code style={{ fontSize: '0.8rem' }}>{user.username}</code></td>
                    <td>
                      <span className="badge badge-muted" style={{ fontSize: '0.75rem' }}>
                        {ROLE_LABELS[user.roleKey] ?? user.roleKey}
                      </span>
                    </td>
                    <td>
                      {user.status === 'active'
                        ? <span className="badge badge-success">فعال</span>
                        : <span className="badge badge-danger">غیرفعال</span>
                      }
                    </td>
                    <td style={{ textAlign: 'center' }}>{formatCount(user.loginsThisMonth)}</td>
                    <td style={{ textAlign: 'center' }}>{formatCount(user.totalLogins)}</td>
                    <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>{user.lastLoginAt}</td>
                    <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>
                      {user.isOnline
                        ? <span style={{ color: 'var(--color-success)', fontWeight: 600 }}>آنلاین</span>
                        : user.lastSeenAt
                      }
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}