import { Link } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { PageHeader } from '@/Components/UI/PageHeader';
import { EmptyState } from '@/Components/UI/EmptyState';
import { formatCount } from '@/lib/formatters';
import { roleLabel } from '@/lib/roles';

type AccessUser = {
  id: number;
  name: string;
  username: string;
  roleKey: string;
  status: string;
  grantCount: number;
};

export default function Access({ users }: { users: AccessUser[] }) {
  return (
    <AppLayout title="مدیریت دسترسی‌ها">
      <div className="page-stack">
        <PageHeader
          title="مدیریت دسترسی‌ها"
          icon="bi-person-lock"
          description="برای هر یک از کارکنان مدرسه (معاون، معلم، پشتیبانی، مالی) مشخص کنید به چه بخش‌هایی دسترسی داشته باشد. روی «تنظیم دسترسی» کلیک کنید، تیک‌ها را بزنید و ذخیره کنید. مدیر و مدیر ارشد همیشه دسترسی کامل دارند."
        />

        {users.length === 0 ? (
          <div className="panel-card">
            <EmptyState
              icon="bi-people"
              title="کارمندی ثبت نشده"
              description="ابتدا از بخش «کاربران مدرسه» معاون، معلم یا کارمند اضافه کنید؛ سپس اینجا دسترسی هرکدام را تنظیم کنید."
            >
              <Link href="/school/users" className="btn btn-primary"><i className="bi bi-plus-lg" /> کاربران مدرسه</Link>
            </EmptyState>
          </div>
        ) : (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <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: 700 }}>{user.name}</td>
                    <td style={{ color: 'var(--color-text-muted)' }}>{user.username}</td>
                    <td><span className="badge badge-muted">{roleLabel(user.roleKey)}</span></td>
                    <td>
                      <span className={`badge ${user.status === 'active' ? 'badge-success' : 'badge-danger'}`}>
                        {user.status === 'active' ? 'فعال' : 'غیرفعال'}
                      </span>
                    </td>
                    <td>
                      <span className={`badge ${user.grantCount > 0 ? 'badge-success' : 'badge-muted'}`}>
                        {formatCount(user.grantCount)} مورد
                      </span>
                    </td>
                    <td>
                      <Link href={`/school/users/${user.id}/permissions`} className="btn btn-soft btn-sm">
                        <i className="bi bi-check2-square" /> تنظیم دسترسی
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}