gridpilot.gg/apps/website/components/teams/TeamAdmin.tsx

'use client';

import { useState, useEffect } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { useServices } from '@/lib/services/ServiceProvider';
import type { DriverDTO } from '@/lib/types/generated/DriverDTO';
import type { TeamJoinRequestViewModel } from '@/lib/view-models/TeamJoinRequestViewModel';
import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
import type { UpdateTeamViewModel } from '@/lib/view-models/UpdateTeamViewModel';

interface TeamAdminProps {
  team: Pick<TeamDetailsViewModel, 'id' | 'name' | 'tag' | 'description' | 'ownerId'>;
  onUpdate: () => void;
}

export default function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
  const { teamJoinService, teamService } = useServices();
  const [joinRequests, setJoinRequests] = useState<TeamJoinRequestViewModel[]>([]);
  const [requestDrivers, setRequestDrivers] = useState<Record<string, DriverDTO>>({});
  const [loading, setLoading] = useState(true);
  const [editMode, setEditMode] = useState(false);
  const [editedTeam, setEditedTeam] = useState({
    name: team.name,
    tag: team.tag,
    description: team.description,
  });

  useEffect(() => {
    const load = async () => {
      setLoading(true);
      try {
        // Current build only supports read-only join requests. Driver hydration is
        // not provided by the API response, so we only display driverId.
        const currentUserId = team.ownerId;
        const isOwner = true;
        const requests = await teamJoinService.getJoinRequests(team.id, currentUserId, isOwner);
        setJoinRequests(requests);
        setRequestDrivers({});
      } finally {
        setLoading(false);
      }
    };

    void load();
  }, [team.id, team.name, team.tag, team.description, team.ownerId]);

  const handleApprove = async (requestId: string) => {
    try {
      void requestId;
      await teamJoinService.approveJoinRequest();
    } catch (error) {
      alert(error instanceof Error ? error.message : 'Failed to approve request');
    }
  };

  const handleReject = async (requestId: string) => {
    try {
      void requestId;
      await teamJoinService.rejectJoinRequest();
    } catch (error) {
      alert(error instanceof Error ? error.message : 'Failed to reject request');
    }
  };

  const handleSaveChanges = async () => {
    try {
      const result: UpdateTeamViewModel = await teamService.updateTeam(team.id, {
        name: editedTeam.name,
        tag: editedTeam.tag,
        description: editedTeam.description,
      });

      if (!result.success) {
        throw new Error(result.successMessage);
      }

      setEditMode(false);
      onUpdate();
    } catch (error) {
      alert(error instanceof Error ? error.message : 'Failed to update team');
    }
  };

  return (
    <div className="space-y-6">
      <Card>
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold text-white">Team Settings</h3>
          {!editMode && (
            <Button variant="secondary" onClick={() => setEditMode(true)}>
              Edit Details
            </Button>
          )}
        </div>

        {editMode ? (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Team Name
              </label>
              <Input
                type="text"
                value={editedTeam.name}
                onChange={(e) => setEditedTeam({ ...editedTeam, name: e.target.value })}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Team Tag
              </label>
              <Input
                type="text"
                value={editedTeam.tag}
                onChange={(e) => setEditedTeam({ ...editedTeam, tag: e.target.value })}
                maxLength={4}
              />
              <p className="text-xs text-gray-500 mt-1">Max 4 characters</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Description
              </label>
              <textarea
                className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm resize-none"
                rows={4}
                value={editedTeam.description}
                onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
              />
            </div>

            <div className="flex gap-2">
              <Button variant="primary" onClick={handleSaveChanges}>
                Save Changes
              </Button>
              <Button
                variant="secondary"
                onClick={() => {
                  setEditMode(false);
                  setEditedTeam({
                    name: team.name,
                    tag: team.tag,
                    description: team.description,
                  });
                }}
              >
                Cancel
              </Button>
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <div className="text-sm text-gray-400">Team Name</div>
              <div className="text-white font-medium">{team.name}</div>
            </div>
            <div>
              <div className="text-sm text-gray-400">Team Tag</div>
              <div className="text-white font-medium">{team.tag}</div>
            </div>
            <div>
              <div className="text-sm text-gray-400">Description</div>
              <div className="text-white">{team.description}</div>
            </div>
          </div>
        )}
      </Card>

      <Card>
        <h3 className="text-xl font-semibold text-white mb-6">Join Requests</h3>

        {loading ? (
          <div className="text-center py-8 text-gray-400">Loading requests...</div>
        ) : joinRequests.length > 0 ? (
          <div className="space-y-3">
            {joinRequests.map((request) => {
              const driver = requestDrivers[request.driverId] ?? null;

              return (
                <div
                  key={request.requestId}
                  className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
                >
                  <div className="flex items-center gap-4 flex-1">
                    <div className="w-12 h-12 rounded-full bg-primary-blue/20 flex items-center justify-center text-lg font-bold text-white">
                      {(driver?.name ?? request.driverId).charAt(0)}
                    </div>
                    <div className="flex-1">
                      <h4 className="text-white font-medium">{driver?.name ?? request.driverId}</h4>
                      <p className="text-sm text-gray-400">
                        {driver?.country ?? 'Unknown'} • Requested {new Date(request.requestedAt).toLocaleDateString()}
                      </p>
                      {/* Request message is not part of current API contract */}
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="primary"
                      onClick={() => handleApprove(request.requestId)}
                      disabled
                    >
                      Approve
                    </Button>
                    <Button
                      variant="danger"
                      onClick={() => handleReject(request.requestId)}
                      disabled
                    >
                      Reject
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-8 text-gray-400">
            No pending join requests
          </div>
        )}
      </Card>

      <Card>
        <h3 className="text-xl font-semibold text-white mb-4">Danger Zone</h3>
        <div className="space-y-4">
          <div className="p-4 rounded-lg bg-danger-red/10 border border-danger-red/30">
            <h4 className="text-white font-medium mb-2">Disband Team</h4>
            <p className="text-sm text-gray-400 mb-4">
              Permanently delete this team. This action cannot be undone.
            </p>
            <Button variant="danger" disabled>
              Disband Team (Coming Soon)
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
}