"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

interface Country {
  id: number;
  name: string;
}

interface City {
  id: number;
  name: string;
}

const USER_TYPES = ["user", "escort", "admin", "strip_club"];

export default function AdminUserCreatePage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [userType, setUserType] = useState("user");
  const [countryId, setCountryId] = useState("");
  const [cityId, setCityId] = useState("");
  const [gender, setGender] = useState("");
  const [active, setActive] = useState(true);
  const [isVerified, setIsVerified] = useState(false);

  const [countries, setCountries] = useState<Country[]>([]);
  const [cities, setCities] = useState<City[]>([]);

  useEffect(() => {
    fetch("/api/v1/countries")
      .then((r) => r.json())
      .then((data) => setCountries(data.countries || data || []))
      .catch(() => {});
  }, []);

  useEffect(() => {
    if (!countryId) {
      setCities([]);
      setCityId("");
      return;
    }
    fetch(`/api/v1/countries/${countryId}/cities`)
      .then((r) => r.json())
      .then((data) => setCities(data.cities || data || []))
      .catch(() => setCities([]));
  }, [countryId]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      const res = await fetch("/api/admin/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          username,
          email,
          password,
          user_type: userType,
          country_id: countryId || null,
          city_id: cityId || null,
          gender: gender || null,
          active,
          is_verified: isVerified,
        }),
      });

      if (!res.ok) {
        const data = await res.json();
        setError(data.error || "Failed to create user");
        return;
      }

      router.push("/admin/users");
      router.refresh();
    } catch {
      setError("Network error");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <div className="flex items-center gap-4">
        <Link
          href="/admin/users"
          className="text-text-muted hover:text-white transition-colors"
        >
          &larr; Back
        </Link>
        <h1 className="text-2xl font-bold">Create User</h1>
      </div>

      {error && (
        <div className="bg-red-500/20 border border-red-500/50 text-red-400 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="bg-surface rounded-lg p-6 space-y-5">
          {/* Username */}
          <div>
            <label className="block text-sm font-medium mb-1.5">Username</label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          {/* Email */}
          <div>
            <label className="block text-sm font-medium mb-1.5">Email</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          {/* Password */}
          <div>
            <label className="block text-sm font-medium mb-1.5">Password</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              minLength={8}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          {/* User Type */}
          <div>
            <label className="block text-sm font-medium mb-1.5">
              User Type
            </label>
            <select
              value={userType}
              onChange={(e) => setUserType(e.target.value)}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            >
              {USER_TYPES.map((t) => (
                <option key={t} value={t}>
                  {t.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
                </option>
              ))}
            </select>
          </div>

          {/* Country */}
          <div>
            <label className="block text-sm font-medium mb-1.5">Country</label>
            <select
              value={countryId}
              onChange={(e) => setCountryId(e.target.value)}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">-- Select Country --</option>
              {countries.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>

          {/* City */}
          <div>
            <label className="block text-sm font-medium mb-1.5">City</label>
            <select
              value={cityId}
              onChange={(e) => setCityId(e.target.value)}
              disabled={!countryId || cities.length === 0}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
            >
              <option value="">-- Select City --</option>
              {cities.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>

          {/* Gender */}
          <div>
            <label className="block text-sm font-medium mb-1.5">Gender</label>
            <select
              value={gender}
              onChange={(e) => setGender(e.target.value)}
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">-- Select --</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
              <option value="trans">Trans</option>
              <option value="non-binary">Non-binary</option>
            </select>
          </div>

          {/* Checkboxes */}
          <div className="flex gap-6">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={active}
                onChange={(e) => setActive(e.target.checked)}
                className="w-4 h-4 rounded border-surface-light bg-surface-light text-primary focus:ring-primary"
              />
              <span className="text-sm">Active</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={isVerified}
                onChange={(e) => setIsVerified(e.target.checked)}
                className="w-4 h-4 rounded border-surface-light bg-surface-light text-primary focus:ring-primary"
              />
              <span className="text-sm">Verified</span>
            </label>
          </div>
        </div>

        <div className="flex gap-3">
          <button
            type="submit"
            disabled={loading}
            className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg transition-colors disabled:opacity-50"
          >
            {loading ? "Creating..." : "Create User"}
          </button>
          <Link
            href="/admin/users"
            className="bg-surface hover:bg-surface-light text-text-muted px-6 py-2.5 rounded-lg transition-colors"
          >
            Cancel
          </Link>
        </div>
      </form>
    </div>
  );
}