"use client";

import { useState, useEffect } from "react";
import { User, TrainerClientAssignment } from "@fitai/shared";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Plus, UserCheck, UserX } from "lucide-react";

export default function TrainerClientsPage() {
  const [trainers, setTrainers] = useState<User[]>([]);
  const [clients, setClients] = useState<User[]>([]);
  const [assignments, setAssignments] = useState<
    (TrainerClientAssignment & { trainer?: User; client?: User })[]
  >([]);
  const [loading, setLoading] = useState(true);
  const [selectedTrainer, setSelectedTrainer] = useState<string>("");
  const [selectedClient, setSelectedClient] = useState<string>("");

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setLoading(true);

      const [trainersRes, clientsRes, assignmentsRes] = await Promise.all([
        fetch("/api/users?role=trainer"),
        fetch("/api/users?role=client"),
        fetch("/api/trainer-client"),
      ]);

      const fetchedTrainers: User[] = trainersRes.ok
        ? (await trainersRes.json()).data?.users || []
        : [];
      const fetchedClients: User[] = clientsRes.ok
        ? (await clientsRes.json()).data?.users || []
        : [];

      setTrainers(fetchedTrainers);
      setClients(fetchedClients);

      if (assignmentsRes.ok) {
        const assignmentsData = await assignmentsRes.json();
        const enrichedAssignments = (assignmentsData.assignments || []).map(
          (assignment: TrainerClientAssignment) => {
            return {
              ...assignment,
              trainer: fetchedTrainers.find(
                (t) => t.id === assignment.trainerId,
              ),
              client: fetchedClients.find((c) => c.id === assignment.clientId),
            };
          },
        );
        setAssignments(enrichedAssignments);
      }
    } catch (error) {
      console.error("Failed to fetch data:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleAssign = async () => {
    if (!selectedTrainer || !selectedClient) {
      alert("Please select both a trainer and a client");
      return;
    }

    try {
      const response = await fetch("/api/trainer-client", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          trainerId: selectedTrainer,
          clientId: selectedClient,
        }),
      });

      if (response.ok) {
        alert("Assignment created successfully!");
        setSelectedTrainer("");
        setSelectedClient("");
        fetchData();
      } else {
        const error = await response.json();
        alert(error.error || "Failed to create assignment");
      }
    } catch (error) {
      console.error("Failed to create assignment:", error);
      alert("Failed to create assignment");
    }
  };

  const handleRemoveAssignment = async (id: string) => {
    if (!confirm("Are you sure you want to remove this assignment?")) {
      return;
    }

    try {
      const response = await fetch(`/api/trainer-client/${id}`, {
        method: "DELETE",
      });

      if (response.ok) {
        alert("Assignment removed successfully!");
        fetchData();
      } else {
        const error = await response.json();
        alert(error.error || "Failed to remove assignment");
      }
    } catch (error) {
      console.error("Failed to remove assignment:", error);
      alert("Failed to remove assignment");
    }
  };

  const getActiveAssignments = () => assignments.filter((a) => a.isActive);
  const getInactiveAssignments = () => assignments.filter((a) => !a.isActive);

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-center h-64">
            <div className="text-lg">Loading...</div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-3xl font-bold text-gray-900">
            Trainer-Client Assignments
          </h1>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Assign Trainer to Client</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Select Trainer</label>
                <Select
                  value={selectedTrainer}
                  onValueChange={setSelectedTrainer}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Choose a trainer..." />
                  </SelectTrigger>
                  <SelectContent>
                    {trainers.map((trainer) => (
                      <SelectItem key={trainer.id} value={trainer.id}>
                        {trainer.firstName} {trainer.lastName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">Select Client</label>
                <Select
                  value={selectedClient}
                  onValueChange={setSelectedClient}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Choose a client..." />
                  </SelectTrigger>
                  <SelectContent>
                    {clients.map((client) => (
                      <SelectItem key={client.id} value={client.id}>
                        {client.firstName} {client.lastName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="flex items-end">
                <Button onClick={handleAssign} className="w-full">
                  <Plus className="w-4 h-4 mr-2" />
                  Assign
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className="flex justify-between items-center">
              <CardTitle>Active Assignments</CardTitle>
              <Badge variant="default">{getActiveAssignments().length}</Badge>
            </div>
          </CardHeader>
          <CardContent>
            {getActiveAssignments().length === 0 ? (
              <p className="text-gray-500 text-center py-8">
                No active assignments
              </p>
            ) : (
              <div className="space-y-2">
                {getActiveAssignments().map((assignment) => (
                  <div
                    key={assignment.id}
                    className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
                  >
                    <div className="flex items-center space-x-4">
                      <div className="flex items-center space-x-2">
                        <UserCheck className="w-4 h-4 text-green-600" />
                        <span className="font-medium">
                          {assignment.trainer?.firstName}{" "}
                          {assignment.trainer?.lastName}
                        </span>
                      </div>
                      <span className="text-gray-400">→</span>
                      <span>
                        {assignment.client?.firstName}{" "}
                        {assignment.client?.lastName}
                      </span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="text-xs text-gray-500">
                        Assigned{" "}
                        {new Date(assignment.assignedAt).toLocaleDateString()}
                      </span>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleRemoveAssignment(assignment.id)}
                      >
                        <UserX className="w-4 h-4 text-red-600" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {getInactiveAssignments().length > 0 && (
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle className="text-gray-500">
                  Inactive Assignments
                </CardTitle>
                <Badge variant="secondary">
                  {getInactiveAssignments().length}
                </Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {getInactiveAssignments().map((assignment) => (
                  <div
                    key={assignment.id}
                    className="flex items-center justify-between p-4 border rounded-lg bg-gray-50 opacity-60"
                  >
                    <div className="flex items-center space-x-4">
                      <span className="font-medium text-gray-600">
                        {assignment.trainer?.firstName}{" "}
                        {assignment.trainer?.lastName}
                      </span>
                      <span className="text-gray-400">→</span>
                      <span className="text-gray-600">
                        {assignment.client?.firstName}{" "}
                        {assignment.client?.lastName}
                      </span>
                    </div>
                    <Badge variant="secondary">Inactive</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}