"use client";

import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle } from "react-icons/fa";
import TabBar from "../components/TabBar";

const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;

const ModeratorProfileSettingsPage = () => {
  const router = useRouter();

  const [avatarUrl, setAvatarUrl] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [saveMessage, setSaveMessage] = useState("");

  const getAccessToken = () => {
    if (typeof window === "undefined") return null;
    const saved = localStorage.getItem("authUser");
    const authUser = saved ? JSON.parse(saved) : null;
    return authUser?.accessToken || null;
  };

  // загрузить профиль
  useEffect(() => {
    const fetchProfile = async () => {
      if (!API_BASE) {
        setError("API_BASE_URL не задан");
        setLoading(false);
        return;
      }
      const token = getAccessToken();
      if (!token) {
        setError("Вы не авторизованы");
        setLoading(false);
        return;
      }

      try {
        const res = await fetch(`${API_BASE}/users/me`, {
          headers: {
            Accept: "application/json",
            Authorization: `Bearer ${token}`,
          },
        });

        if (!res.ok) {
          let msg = "Не удалось загрузить профиль";
          try {
            const data = await res.json();
            if (data.error) msg = data.error;
          } catch {
            const text = await res.text();
            if (text) msg = text;
          }
          setError(msg);
          setLoading(false);
          return;
        }

        const data = await res.json(); // UserProfile[web:598]
        setFirstName(data.first_name || "");
        setLastName(data.last_name || "");
        setEmail(data.email || "");
        setPhone(data.phone || "");
        setAvatarUrl(data.avatar_url || "");
        setLoading(false);
      } catch (e) {
        setError(e.message || "Ошибка сети");
        setLoading(false);
      }
    };

    fetchProfile();
  }, []);

  const handleSave = async (e) => {
    e.preventDefault();
    if (!API_BASE) return;
    const token = getAccessToken();
    if (!token) {
      setError("Вы не авторизованы");
      return;
    }

    try {
      setSaving(true);
      setError("");
      setSaveMessage("");

      const body = {
        first_name: firstName || null,
        last_name: lastName || null,
        phone: phone || null,
      }; // UpdateProfileInput[web:598]

      const res = await fetch(`${API_BASE}/users/me`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(body),
      });

      if (!res.ok) {
        let msg = "Не удалось сохранить профиль";
        try {
          const data = await res.json();
          if (data.error) msg = data.error;
        } catch {
          const text = await res.text();
          if (text) msg = text;
        }
        setError(msg);
        setSaving(false);
        return;
      }

      const updated = await res.json();
      setSaveMessage("Изменения сохранены");
      setSaving(false);

      setFirstName(updated.first_name || "");
      setLastName(updated.last_name || "");
      setPhone(updated.phone || "");
    } catch (e) {
      setError(e.message || "Ошибка сети");
      setSaving(false);
    }
  };

  const fullName = [firstName, lastName].filter(Boolean).join(" ");

  return (
    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
      <div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
        {/* Header */}
        <header className="flex items-center mb-4">
          <button
            type="button"
            onClick={() => router.back()}
            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
          >
            ←
          </button>
          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
            Настройки профиля
          </h1>
          <span className="w-8" />
        </header>

        {/* Карточка настроек */}
        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
          {loading && (
            <p className="font-montserrat text-[14px] text-black">
              Загрузка профиля...
            </p>
          )}

          {!loading && (
            <>
              {/* Аватар */}
              <div className="flex flex-col items-center gap-2">
                <div className="w-24 h-24 rounded-full bg-[#E5F3FB] flex items-center justify-center overflow-hidden">
                  {avatarUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={avatarUrl}
                      alt="Аватар"
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
                  )}
                </div>
                <label className="font-montserrat text-[12px] text-[#72B8E2] underline cursor-pointer">
                  Загрузить аватар
                  <input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={(e) => {
                      const file = e.target.files?.[0];
                      if (!file) return;
                      const url = URL.createObjectURL(file);
                      setAvatarUrl(url);
                      // загрузку файла на бэк можно добавить отдельно
                    }}
                  />
                </label>
              </div>

              {error && (
                <p className="font-montserrat text-[12px] text-red-500">
                  {error}
                </p>
              )}
              {saveMessage && (
                <p className="font-montserrat text-[12px] text-green-600">
                  {saveMessage}
                </p>
              )}

              <form
                onSubmit={handleSave}
                className="w-full flex flex-col gap-3"
              >
                {/* Имя */}
                <div className="flex flex-col gap-1">
                  <label className="font-montserrat text-[12px] text-black">
                    Имя
                  </label>
                  <input
                    type="text"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                    className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
                    placeholder="Введите имя"
                  />
                </div>

                {/* Фамилия */}
                <div className="flex flex-col gap-1">
                  <label className="font-montserrat text-[12px] text-black">
                    Фамилия
                  </label>
                  <input
                    type="text"
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                    className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
                    placeholder="Введите фамилию"
                  />
                </div>

                {/* Почта (только отображение) */}
                <div className="flex flex-col gap-1">
                  <label className="font-montserrat text-[12px] text-black">
                    Почта
                  </label>
                  <input
                    type="email"
                    value={email}
                    disabled
                    className="w-full rounded-full bg-[#72B8E2]/60 px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent cursor-not-allowed"
                  />
                </div>

                {/* Телефон */}
                <div className="flex flex-col gap-1">
                  <label className="font-montserrat text-[12px] text-black">
                    Телефон
                  </label>
                  <input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
                    placeholder="+7 900 000 00 00"
                  />
                </div>

                {/* Кнопка сохранить */}
                <button
                  type="submit"
                  disabled={saving}
                  className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center disabled:opacity-60"
                >
                  <span className="font-montserrat font-extrabold text-[14px] text-white">
                    {saving ? "Сохранение..." : "Сохранить изменения"}
                  </span>
                </button>
              </form>
            </>
          )}
        </main>

        <TabBar />
      </div>
    </div>
  );
};

export default ModeratorProfileSettingsPage;