"use client";

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

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

  const [avatarUrl, setAvatarUrl] = useState("");
  const [fullName, setFullName] = useState("Иванов Александр Сергеевич");
  const [birthDate, setBirthDate] = useState("1990-03-12");
  const [email, setEmail] = useState("example@mail.com");
  const [phone, setPhone] = useState("+7 (900) 000-00-00");

  const handleSave = (e) => {
    e.preventDefault();
    console.log("Сохранить профиль:", {
      avatarUrl,
      fullName,
      birthDate,
      email,
      phone,
    });
    // здесь будет запрос на бэк
  };

  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">
          {/* Аватар */}
          <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>

          <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={fullName}
                onChange={(e) => setFullName(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="date"
                value={birthDate}
                onChange={(e) => setBirthDate(e.target.value)}
                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white outline-none border border-transparent focus:border-white/70"
              />
            </div>

            {/* Почта */}
            <div className="flex flex-col gap-1">
              <label className="font-montserrat text-[12px] text-black">
                Почта
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(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="example@mail.com"
              />
            </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"
              className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
            >
              <span className="font-montserrat font-extrabold text-[14px] text-white">
                Сохранить изменения
              </span>
            </button>
          </form>
        </main>

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

export default ProfileSettingsPage;