"use client";

import { useEffect, useState } from "react";
import { avatarUrl } from "@/lib/media";

interface BlockedUser {
  id: number;
  blocked_user_id: number;
  username: string;
  profile_photo: string | null;
  created_at: string;
}

export default function BlockedUsersPage() {
  const [blocked, setBlocked] = useState<BlockedUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [unblocking, setUnblocking] = useState<number | null>(null);

  useEffect(() => {
    fetch("/api/blocks")
      .then((res) => res.json())
      .then((data) => setBlocked(data.data || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function handleUnblock(blockedUserId: number) {
    setUnblocking(blockedUserId);
    try {
      const res = await fetch(`/api/blocks?blocked_user_id=${blockedUserId}`, {
        method: "DELETE",
      });
      if (res.ok) {
        setBlocked((prev) => prev.filter((b) => b.blocked_user_id !== blockedUserId));
      }
    } catch {
      // ignore
    } finally {
      setUnblocking(null);
    }
  }

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">Blocked Users</h1>

      {loading ? (
        <div className="bg-surface rounded-lg p-12 text-center text-text-muted">
          Loading...
        </div>
      ) : blocked.length === 0 ? (
        <div className="bg-surface rounded-lg p-12 text-center text-text-muted">
          <p className="text-lg">No blocked users</p>
          <p className="text-sm mt-1">Users you block will appear here.</p>
        </div>
      ) : (
        <div className="bg-surface rounded-lg divide-y divide-surface-light">
          {blocked.map((user) => (
            <div
              key={user.id}
              className="flex items-center justify-between p-4"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-surface-light">
                  {user.profile_photo ? (
                    <img
                      src={avatarUrl(user.profile_photo)}
                      alt={user.username}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-text-muted">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                    </div>
                  )}
                </div>
                <div>
                  <p className="font-medium">{user.username}</p>
                  <p className="text-text-muted text-xs">
                    Blocked {new Date(user.created_at).toLocaleDateString()}
                  </p>
                </div>
              </div>
              <button
                onClick={() => handleUnblock(user.blocked_user_id)}
                disabled={unblocking === user.blocked_user_id}
                className="bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30 px-4 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
              >
                {unblocking === user.blocked_user_id ? "Unblocking..." : "Unblock"}
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}