"use client";

import { useEffect, useState } from "react";
import { supabaseBrowser } from "@/utils/supabase/client";

interface UserProfile {
  id: string;
  full_name: string;
  role: string;
}

interface Contract {
  id: string;
  title: string;
  price: number;
  status: string;
  freelancer_name: string;
  client_name: string;
}

export default function AdminDashboard() {
  const [profiles, setProfiles] = useState<UserProfile[]>([]);
  const [contracts, setContracts] = useState<Contract[]>([]);
  const [loading, setLoading] = useState(true);
  const supabase = supabaseBrowser();

  useEffect(() => {
    const fetchAdminData = async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser();

      if (!user) {
        setLoading(false);
        return;
      }

      // check if admin
      const { data: profile } = await supabase
        .from("profiles")
        .select("role")
        .eq("id", user.id)
        .single();

      if (!profile || profile.role !== "admin") {
        alert("Access denied. Admins only.");
        return;
      }

      await loadUsers();
      await loadContracts();
      setLoading(false);
    };

    fetchAdminData();
  }, []);

  const loadUsers = async () => {
    const { data: users, error } = await supabase
      .from("profiles")
      .select("id, full_name, role");
    if (error) console.error(error);
    setProfiles(users || []);
  };

  const loadContracts = async () => {
    const { data: contractsData, error } = await supabase
      .from("contracts")
      .select("id, title, price, status, freelancer_name, client_name");
    if (error) console.error(error);
    setContracts(contractsData || []);
  };

  // 🔹 Delete User
  const deleteUser = async (userId: string) => {
    if (!confirm("Are you sure you want to delete this user?")) return;

    const { error } = await supabase.from("profiles").delete().eq("id", userId);
    if (error) {
      console.error("Error deleting user:", error);
      alert("Failed to delete user");
    } else {
      alert("User deleted successfully");
      loadUsers();
    }
  };

  // 🔹 Update Role
  const updateUserRole = async (userId: string, newRole: string) => {
    const { error } = await supabase
      .from("profiles")
      .update({ role: newRole })
      .eq("id", userId);

    if (error) {
      console.error("Error updating role:", error);
      alert("Failed to update role");
    } else {
      alert("Role updated successfully");
      loadUsers();
    }
  };

  // 🔹 Force Close Contract
  const closeContract = async (contractId: string) => {
    const { error } = await supabase
      .from("contracts")
      .update({ status: "closed" })
      .eq("id", contractId);

    if (error) {
      console.error("Error closing contract:", error);
      alert("Failed to close contract");
    } else {
      alert("Contract closed successfully");
      loadContracts();
    }
  };

  if (loading) return <p className="p-6">Loading admin data...</p>;

  return (
    <div className="max-w-6xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>

      {/* Users Section */}
      <section className="mb-10">
        <h2 className="text-2xl font-semibold mb-4">All Users</h2>
        <table className="w-full border">
          <thead>
            <tr className="bg-gray-100">
              <th className="border p-2">ID</th>
              <th className="border p-2">Full Name</th>
              <th className="border p-2">Role</th>
              <th className="border p-2">Actions</th>
            </tr>
          </thead>
          <tbody>
            {profiles.map((profile) => (
              <tr key={profile.id}>
                <td className="border p-2">{profile.id}</td>
                <td className="border p-2">{profile.full_name}</td>
                <td className="border p-2 capitalize">{profile.role}</td>
                <td className="border p-2 space-x-2">
                  {/* Delete Button */}
                  <button
                    onClick={() => deleteUser(profile.id)}
                    className="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700"
                  >
                    Delete
                  </button>

                  {/* Role Update Dropdown */}
                  <select
                    value={profile.role}
                    onChange={(e) =>
                      updateUserRole(profile.id, e.target.value)
                    }
                    className="px-2 py-1 border rounded"
                  >
                    <option value="client">Client</option>
                    <option value="freelancer">Freelancer</option>
                    <option value="admin">Admin</option>
                  </select>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Contracts Section */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">All Contracts</h2>
        <table className="w-full border">
          <thead>
            <tr className="bg-gray-100">
              <th className="border p-2">Title</th>
              <th className="border p-2">Price</th>
              <th className="border p-2">Freelancer</th>
              <th className="border p-2">Client</th>
              <th className="border p-2">Status</th>
              <th className="border p-2">Actions</th>
            </tr>
          </thead>
          <tbody>
            {contracts.map((c) => (
              <tr key={c.id}>
                <td className="border p-2">{c.title}</td>
                <td className="border p-2">₹{c.price}</td>
                <td className="border p-2">{c.freelancer_name}</td>
                <td className="border p-2">{c.client_name}</td>
                <td className="border p-2 capitalize">{c.status}</td>
                <td className="border p-2">
                  {c.status !== "closed" && (
                    <button
                      onClick={() => closeContract(c.id)}
                      className="px-2 py-1 bg-yellow-600 text-white rounded hover:bg-yellow-700"
                    >
                      Force Close
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}