import { useRef, useState } from "react";
import { Camera, Info, UploadCloud } from "lucide-react";
import { useSession } from "../../app/store/session";
import { Button } from "../../shared/ui/Button";
import { Input, Textarea } from "../../shared/ui/Field";
import { cn } from "../../shared/lib/cn";

function initials(name = "") {
  return name
    .split(" ")
    .filter(Boolean)
    .map((part) => part[0])
    .join("")
    .slice(0, 2);
}

function readImage(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

export function ProfilePage() {
  const user = useSession((state) => state.user) ?? {};
  const [dragActive, setDragActive] = useState(false);
  const [avatarPreview, setAvatarPreview] = useState(user.avatarUrl ?? user.avatar ?? "");
  const [avatarError, setAvatarError] = useState("");
  const fileInputRef = useRef(null);

  const handleAvatar = async (file) => {
    setAvatarError("");
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      setAvatarError("Выберите изображение JPG, PNG или WEBP");
      return;
    }
    if (file.size > 3 * 1024 * 1024) {
      setAvatarError("Файл должен быть до 3 МБ");
      return;
    }

    const preview = await readImage(file);
    setAvatarPreview(preview);
  };

  return (
    <div className="max-w-3xl">
      <p className="text-xs font-bold uppercase tracking-widest text-accent">Настройки</p>
      <h1 className="mt-2 font-serif text-4xl">Профиль</h1>
      <div className="mt-8 rounded-lg border border-line bg-surface p-5 sm:p-7">
        <div className="mb-7 flex gap-3 rounded-lg border border-warning/25 bg-warning-soft p-4 text-sm leading-6 text-warning">
          <Info className="mt-0.5 size-5 shrink-0" />
          <p>
            Данные профиля загружаются из `/api/auth/me`. Endpoint для сохранения профиля в предоставленном API не указан,
            поэтому форма не отправляет изменения в БД.
          </p>
        </div>

        <div className="flex flex-col gap-5 border-b border-line pb-7 sm:flex-row sm:items-center">
          <label
            className={cn(
              "group relative grid size-24 shrink-0 cursor-pointer place-items-center overflow-hidden rounded-full bg-primary font-serif text-3xl text-white ring-2 ring-transparent transition",
              dragActive && "bg-dstu-menu-accent text-dstu-menu ring-dstu-menu-accent",
            )}
            onDragEnter={(event) => {
              event.preventDefault();
              setDragActive(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={(event) => {
              if (!event.currentTarget.contains(event.relatedTarget)) setDragActive(false);
            }}
            onDrop={(event) => {
              event.preventDefault();
              setDragActive(false);
              handleAvatar(event.dataTransfer.files?.[0]);
            }}
            title="Предпросмотр фотографии"
          >
            <input
              ref={fileInputRef}
              className="sr-only"
              type="file"
              accept="image/*"
              onChange={(event) => handleAvatar(event.target.files?.[0])}
            />
            {avatarPreview ? (
              <img src={avatarPreview} alt="" className="size-full object-cover" />
            ) : (
              <span>{initials(user.name)}</span>
            )}
            <span className="absolute inset-0 grid place-items-center bg-ink/45 opacity-0 transition group-hover:opacity-100">
              <UploadCloud className="size-6 text-white" />
            </span>
          </label>
          <div>
            <Button
              type="button"
              variant="secondary"
              icon={<Camera className="size-4" />}
              onClick={() => fileInputRef.current?.click()}
            >
              Выбрать фотографию
            </Button>
            <p className="mt-2 text-xs text-muted">JPG, PNG или WEBP, до 3 МБ. Можно перетащить фото на аватар.</p>
            {avatarError && <p className="mt-2 text-xs font-semibold text-danger">{avatarError}</p>}
          </div>
        </div>

        <div className="mt-7 grid gap-5 sm:grid-cols-2">
          <Input name="name" label="Имя и фамилия" defaultValue={user.name ?? ""} disabled />
          <Input label="Электронная почта" defaultValue={user.email ?? user.login ?? ""} disabled />
          <Input name="department" label="Подразделение" defaultValue={user.department ?? ""} disabled />
          <Input name="phone" label="Телефон" defaultValue={user.phone ?? ""} disabled />
          <Textarea
            name="bio"
            className="sm:col-span-2"
            label="О себе"
            defaultValue={user.bio ?? ""}
            disabled
          />
        </div>
      </div>
    </div>
  );
}
