'use client';

import { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { useTeamJoinRequests, useUpdateTeam, useApproveJoinRequest, useRejectJoinRequest } from '@/hooks/team';
import type { TeamJoinRequestViewModel } from '@/lib/view-models/TeamJoinRequestViewModel';
import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';

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

export default function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
  const [editMode, setEditMode] = useState(false);
  const [editedTeam, setEditedTeam] = useState({
    name: team.name,
    tag: team.tag,
    description: team.description,
  });

  // Use hooks for data fetching
  const { data: joinRequests = [], isLoading: loading } = useTeamJoinRequests(
    team.id,
    team.ownerId,
    true
  );

  // Use hooks for mutations
  const updateTeamMutation = useUpdateTeam({
    onSuccess: () => {
      setEditMode(false);
      onUpdate();
    },
    onError: (error) => {
      alert(error instanceof Error ? error.message : 'Failed to update team');
    },
  });

  const approveJoinRequestMutation = useApproveJoinRequest({
    onSuccess: () => {
      onUpdate();
    },
    onError: (error) => {
      alert(error instanceof Error ? error.message : 'Failed to approve request');
    },
  });

  const rejectJoinRequestMutation = useRejectJoinRequest({
    onSuccess: () => {
      onUpdate();
    },
    onError: (error) => {
      alert(error instanceof Error ? error.message : 'Failed to reject request');
    },
  });

  const handleApprove = (requestId: string) => {
    // Note: The current API doesn't support approving specific requests
    // This would need the requestId to be passed to the service
    approveJoinRequestMutation.mutate();
  };

  const handleReject = (requestId: string) => {
    // Note: The current API doesn't support rejecting specific requests
    // This would need the requestId to be passed to the service
    rejectJoinRequestMutation.mutate();
  };

  const handleSaveChanges = () => {
    updateTeamMutation.mutate({
      teamId: team.id,
      input: {
        name: editedTeam.name,
        tag: editedTeam.tag,
        description: editedTeam.description,
      },
    });
  };

  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} disabled={updateTeamMutation.isPending}>
                {updateTeamMutation.isPending ? 'Saving...' : '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: TeamJoinRequestViewModel) => {
              // Note: Driver hydration is not provided by the API response
              // so we only display driverId
              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">
                      {request.driverId.charAt(0)}
                    </div>
                    <div className="flex-1">
                      <h4 className="text-white font-medium">{request.driverId}</h4>
                      <p className="text-sm text-gray-400">
                        Requested {new Date(request.requestedAt).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="primary"
                      onClick={() => handleApprove(request.requestId)}
                      disabled={approveJoinRequestMutation.isPending}
                    >
                      {approveJoinRequestMutation.isPending ? 'Approving...' : 'Approve'}
                    </Button>
                    <Button
                      variant="danger"
                      onClick={() => handleReject(request.requestId)}
                      disabled={rejectJoinRequestMutation.isPending}
                    >
                      {rejectJoinRequestMutation.isPending ? 'Rejecting...' : '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>
  );
}