import { useParams } from 'react-router-dom';
import { useTeams } from '../../hooks/useClients';

export function OrgTeamsPage() {
  const { orgSlug } = useParams<{ orgSlug: string }>();
  const orgId = orgSlug ?? '';
  const { data: teams = [], isLoading } = useTeams(orgId);

  if (isLoading) return <div className="text-gray-400 py-8 text-center">Loading…</div>;

  return (
    <div>
      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Team</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Members</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {teams.length === 0 && (
              <tr>
                <td colSpan={2} className="px-4 py-8 text-center text-gray-400">No teams yet.</td>
              </tr>
            )}
            {teams.map((team) => (
              <tr key={team.id} className="hover:bg-gray-50">
                <td className="px-4 py-3 font-medium text-gray-900">{team.name}</td>
                <td className="px-4 py-3 text-gray-500">{team.member_user_ids.length} member{team.member_user_ids.length !== 1 ? 's' : ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-gray-400 mt-3">Team management is available in the admin panel for now.</p>
    </div>
  );
}
