"use client";

import { ChangeEvent, FormEvent, useRef, useState } from "react";
import ClothesShell from "@/components/clothes/ClothesShell";
import ImageCropper from "@/components/ui/ImageCropper";

type AddressItem = {
  id: string;
  label: string;
  province: string;
  city: string;
  fullAddress: string;
  landline: string;
};

const DEFAULT_AVATAR = "/images/ryanwar-hanif-98XENwtPMCc-unsplash.jpg";

const provinces = [
  "تهران",
  "اصفهان",
  "فارس",
  "خراسان رضوی",
  "آذربایجان شرقی",
  "آذربایجان غربی",
  "گیلان",
  "مازندران",
  "خوزستان",
  "کرمان",
  "یزد",
  "قم",
  "البرز",
  "همدان",
  "کردستان",
  "کرمانشاه",
  "هرمزگان",
  "بوشهر",
  "سیستان و بلوچستان",
  "گلستان",
  "قزوین",
  "زنجان",
  "اردبیل",
  "لرستان",
  "مرکزی",
  "سمنان",
  "چهارمحال و بختیاری",
  "کهگیلویه و بویراحمد",
  "ایلام",
  "خراسان شمالی",
  "خراسان جنوبی",
];

function emptyAddress(): AddressItem {
  return {
    id: `addr-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
    label: "",
    province: "",
    city: "",
    fullAddress: "",
    landline: "",
  };
}

export default function ProfilePage() {
  const fileRef = useRef<HTMLInputElement>(null);
  const [avatar, setAvatar] = useState(DEFAULT_AVATAR);
  const [nameFa, setNameFa] = useState("سارا محمدی");
  const [nameEn, setNameEn] = useState("Sara Mohammadi");
  const [phone] = useState("09121234567");
  const [email, setEmail] = useState("sara@manacollection.com");
  const [instagram, setInstagram] = useState("@manacollection");
  const [about, setAbout] = useState(
    "علاقه‌مند به طراحی مینیمال و استایل‌های آرام روزمره.",
  );
  const [addresses, setAddresses] = useState<AddressItem[]>([
    {
      id: "addr-1",
      label: "منزل",
      province: "تهران",
      city: "تهران",
      fullAddress: "خیابان ولیعصر، بالاتر از پارک وی، پلاک ۱۲",
      landline: "02122001122",
    },
  ]);

  function handleAvatarChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    setAvatar(URL.createObjectURL(file));
  }

  function updateAddress(
    id: string,
    field: keyof Omit<AddressItem, "id">,
    value: string,
  ) {
    setAddresses((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, [field]: value } : item,
      ),
    );
  }

  function addAddress() {
    setAddresses((prev) => [...prev, emptyAddress()]);
  }

  function removeAddress(id: string) {
    setAddresses((prev) =>
      prev.length <= 1 ? prev : prev.filter((item) => item.id !== id),
    );
  }

  function handleSubmit(event: FormEvent) {
    event.preventDefault();
  }

  return (
    <ClothesShell
      eyebrow="Profile"
      title="پروفایل"
      description="اطلاعات شخصی، تصویر آواتار و آدرس‌های خود را مدیریت کنید."
      breadcrumbs={[
        { label: "داشبورد", href: "/" },
        { label: "پروفایل" },
      ]}
    >
      <form
        onSubmit={handleSubmit}
        className="grid grid-cols-1 gap-3 lg:grid-cols-[260px_1fr]"
      >
        <aside className="dash-enter rounded-lg border border-line bg-surface p-4">
          <p className="mb-2 text-sm text-ink">آواتار</p>
          <p className="mb-3 text-xs leading-6 text-muted">نسبت ۱:۱</p>
          <ImageCropper
            src={avatar}
            aspect="1:1"
            alt="آواتار پروفایل"
            className="profile-avatar-cropper"
          />
          <input
            ref={fileRef}
            type="file"
            accept="image/*"
            className="sr-only"
            onChange={handleAvatarChange}
          />
          <button
            type="button"
            className="mt-3 w-full border border-line bg-white px-3 py-2 text-sm text-ink transition-colors hover:border-ink"
            onClick={() => fileRef.current?.click()}
          >
            انتخاب تصویر
          </button>
        </aside>

        <div className="space-y-3 dash-enter" style={{ animationDelay: "70ms" }}>
          <section className="grid grid-cols-1 gap-3 rounded-lg border border-line bg-surface p-4 sm:grid-cols-12">
            <div className="clothes-field sm:col-span-6">
              <label htmlFor="profile-name-fa">نام فارسی</label>
              <input
                id="profile-name-fa"
                value={nameFa}
                onChange={(e) => setNameFa(e.target.value)}
                placeholder="نام و نام خانوادگی"
                required
              />
            </div>
            <div className="clothes-field sm:col-span-6">
              <label htmlFor="profile-name-en">نام انگلیسی</label>
              <input
                id="profile-name-en"
                dir="ltr"
                className="!text-end font-montserrat"
                value={nameEn}
                onChange={(e) => setNameEn(e.target.value)}
                placeholder="Full name"
                required
              />
            </div>
            <div className="clothes-field sm:col-span-6">
              <label htmlFor="profile-phone">شماره موبایل</label>
              <input
                id="profile-phone"
                dir="ltr"
                className="!text-end font-montserrat profile-input-locked"
                value={phone}
                readOnly
                aria-readonly="true"
                title="شماره موبایل قابل تغییر نیست"
              />
              <span className="text-[0.65rem] text-muted">قابل تغییر نیست</span>
            </div>
            <div className="clothes-field sm:col-span-6">
              <label htmlFor="profile-email">ایمیل</label>
              <input
                id="profile-email"
                type="email"
                dir="ltr"
                className="!text-end font-montserrat"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="name@example.com"
                required
              />
            </div>
            <div className="clothes-field sm:col-span-12">
              <label htmlFor="profile-instagram">اینستاگرام</label>
              <input
                id="profile-instagram"
                dir="ltr"
                className="!text-end font-montserrat"
                value={instagram}
                onChange={(e) => setInstagram(e.target.value)}
                placeholder="@username"
              />
            </div>
            <div className="clothes-field sm:col-span-12">
              <label htmlFor="profile-about">درباره من</label>
              <textarea
                id="profile-about"
                value={about}
                onChange={(e) => setAbout(e.target.value)}
                placeholder="چند خط درباره خودتان..."
                className="!min-h-[6rem]"
              />
            </div>
          </section>

          <section className="rounded-lg border border-line bg-surface p-4">
            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
              <div>
                <p className="text-sm text-ink">آدرس‌ها</p>
                <p className="text-xs text-muted">
                  می‌توانید چند آدرس اضافه کنید.
                </p>
              </div>
              <button
                type="button"
                onClick={addAddress}
                className="border border-ink bg-ink px-3 py-1.5 text-xs text-white transition-colors hover:bg-white hover:text-ink"
              >
                + آدرس جدید
              </button>
            </div>

            <div className="space-y-3">
              {addresses.map((address, index) => (
                <div key={address.id} className="address-block">
                  <div className="mb-3 flex items-center justify-between gap-2">
                    <p className="text-sm text-ink">
                      آدرس {new Intl.NumberFormat("fa-IR").format(index + 1)}
                    </p>
                    <button
                      type="button"
                      className="text-xs text-muted transition-colors hover:text-ink disabled:opacity-30"
                      disabled={addresses.length <= 1}
                      onClick={() => removeAddress(address.id)}
                    >
                      حذف
                    </button>
                  </div>

                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-12">
                    <div className="clothes-field sm:col-span-4">
                      <label htmlFor={`addr-label-${address.id}`}>برچسب</label>
                      <input
                        id={`addr-label-${address.id}`}
                        value={address.label}
                        onChange={(e) =>
                          updateAddress(address.id, "label", e.target.value)
                        }
                        placeholder="منزل، محل کار..."
                      />
                    </div>
                    <div className="clothes-field sm:col-span-4">
                      <label htmlFor={`addr-province-${address.id}`}>
                        استان
                      </label>
                      <select
                        id={`addr-province-${address.id}`}
                        value={address.province}
                        onChange={(e) =>
                          updateAddress(address.id, "province", e.target.value)
                        }
                      >
                        <option value="" disabled>
                          انتخاب استان
                        </option>
                        {provinces.map((province) => (
                          <option key={province} value={province}>
                            {province}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div className="clothes-field sm:col-span-4">
                      <label htmlFor={`addr-city-${address.id}`}>شهر</label>
                      <input
                        id={`addr-city-${address.id}`}
                        value={address.city}
                        onChange={(e) =>
                          updateAddress(address.id, "city", e.target.value)
                        }
                        placeholder="نام شهر"
                      />
                    </div>
                    <div className="clothes-field sm:col-span-8">
                      <label htmlFor={`addr-full-${address.id}`}>
                        آدرس کامل
                      </label>
                      <textarea
                        id={`addr-full-${address.id}`}
                        value={address.fullAddress}
                        onChange={(e) =>
                          updateAddress(
                            address.id,
                            "fullAddress",
                            e.target.value,
                          )
                        }
                        placeholder="خیابان، کوچه، پلاک، واحد..."
                        className="!min-h-[4.5rem]"
                      />
                    </div>
                    <div className="clothes-field sm:col-span-4">
                      <label htmlFor={`addr-landline-${address.id}`}>
                        تلفن ثابت
                      </label>
                      <input
                        id={`addr-landline-${address.id}`}
                        dir="ltr"
                        className="!text-end font-montserrat"
                        inputMode="tel"
                        value={address.landline}
                        onChange={(e) =>
                          updateAddress(address.id, "landline", e.target.value)
                        }
                        placeholder="021..."
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <div className="flex justify-end gap-2">
            <button
              type="button"
              className="border border-line px-5 py-2.5 text-sm text-muted hover:text-ink"
            >
              انصراف
            </button>
            <button
              type="submit"
              className="auth-button !mt-0 !max-w-none !w-auto px-6"
            >
              <span>ذخیره پروفایل</span>
            </button>
          </div>
        </div>
      </form>
    </ClothesShell>
  );
}