import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { Icon } from "@iconify/react";
import { userApi } from "../api/userApi";
import { notesApi } from "../api/notesApi";
import { Note } from "../types/note";
import { PublicNoteItem } from "../components/notes/PublicNoteItem";
import { ImageModal } from "../components/common/ImageModal";
import { ThemeToggle } from "../components/common/ThemeToggle";

const PublicProfilePage: React.FC = () => {
  const { username } = useParams<{ username: string }>();
  const navigate = useNavigate();

  const [profile, setProfile] = useState<{ username: string; avatar?: string } | null>(null);
  const [notes, setNotes] = useState<Note[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [selectedNote, setSelectedNote] = useState<Note | null>(null);
  const [imageIndex, setImageIndex] = useState(0);

  useEffect(() => {
    if (username) {
      loadPublicProfile();
    }
  }, [username]);

  const loadPublicProfile = async () => {
    if (!username) return;

    setIsLoading(true);
    setError(null);

    try {
      // Загружаем профиль пользователя
      const profileData = await userApi.getPublicProfile(username);
      setProfile(profileData);

      // Загружаем публичные заметки
      const notesData = await notesApi.getPublicNotes(username);
      setNotes(notesData);
    } catch (error: any) {
      console.error("Ошибка загрузки публичного профиля:", error);
      if (error.response?.status === 404) {
        setError("Пользователь не найден");
      } else if (error.response?.status === 403) {
        setError("Профиль не является публичным");
      } else {
        setError("Ошибка загрузки профиля");
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleImageClick = (imageUrl: string, note: Note) => {
    // Извлекаем imageId из URL для определения индекса
    const imageIdMatch = imageUrl.match(/\/images\/(\d+)/);
    if (imageIdMatch) {
      const imageId = parseInt(imageIdMatch[1]);
      const index = note.images.findIndex((img) => img.id === imageId);
      setImageIndex(index >= 0 ? index : 0);
    } else {
      setImageIndex(0);
    }
    setSelectedImage(imageUrl);
    setSelectedNote(note);
  };

  const handleCloseImageModal = () => {
    setSelectedImage(null);
    setSelectedNote(null);
  };

  if (isLoading) {
    return (
      <div className="center">
        <div className="container">
          <div style={{ textAlign: "center", padding: "50px" }}>
            <Icon icon="mdi:loading" style={{ fontSize: "48px" }} />
            <p style={{ marginTop: "20px" }}>Загрузка...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="center">
        <div className="container">
          <div style={{ textAlign: "center", padding: "50px" }}>
            <Icon icon="mdi:alert-circle" style={{ fontSize: "48px", color: "#dc3545" }} />
            <h2 style={{ marginTop: "20px" }}>Ошибка</h2>
            <p style={{ color: "#666", marginTop: "10px" }}>{error}</p>
            <button
              className="btnSave"
              onClick={() => navigate("/")}
              style={{ marginTop: "20px" }}
            >
              Вернуться на главную
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!profile) {
    return null;
  }

  // Сортируем заметки: сначала закрепленные, потом по дате создания (новые сверху)
  const sortedNotes = [...notes].sort((a, b) => {
    if (a.is_pinned !== b.is_pinned) {
      return b.is_pinned - a.is_pinned;
    }
    const dateA = new Date(a.created_at).getTime();
    const dateB = new Date(b.created_at).getTime();
    return dateB - dateA;
  });

  return (
    <>
      <div className="center">
        <div className="container">
          <header className="notes-header">
            <div className="notes-header-left">
              <div style={{ display: "flex", alignItems: "center", gap: "15px" }}>
                {profile.avatar ? (
                  <img
                    src={profile.avatar}
                    alt={profile.username}
                    style={{
                      width: "40px",
                      height: "40px",
                      borderRadius: "50%",
                      objectFit: "cover",
                    }}
                  />
                ) : (
                  <div
                    style={{
                      width: "40px",
                      height: "40px",
                      borderRadius: "50%",
                      backgroundColor: "var(--accent-color, #007bff)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: "white",
                      fontSize: "20px",
                      lineHeight: "1",
                    }}
                  >
                    <Icon icon="mdi:account" style={{ margin: 0, padding: 0 }} />
                  </div>
                )}
                <span>
                  <Icon icon="mdi:account" /> {profile.username}
                </span>
              </div>
            </div>
            <div className="user-info">
              <ThemeToggle />
              <button
                className="notes-btn"
                onClick={() => navigate("/")}
                title="На главную"
              >
                <Icon icon="mdi:home" />
              </button>
            </div>
          </header>
          <div style={{ 
            padding: "15px 0", 
            borderBottom: "1px solid var(--border-primary, #ddd)",
            marginBottom: "15px"
          }}>
            <p style={{ margin: 0, color: "var(--text-secondary, #666)", fontSize: "14px" }}>
              {notes.length} {notes.length === 1 ? "заметка" : notes.length < 5 ? "заметки" : "заметок"}
            </p>
          </div>
        </div>
        {sortedNotes.length === 0 ? (
          <div className="notes-container">
            <p className="empty-message">У пользователя пока нет публичных заметок</p>
          </div>
        ) : (
          <div className="notes-container">
            {sortedNotes.map((note) => (
              <PublicNoteItem
                key={note.id}
                note={note}
                onImageClick={(imageUrl) => handleImageClick(imageUrl, note)}
              />
            ))}
          </div>
        )}
      </div>

      {/* Модальное окно для изображений */}
      {selectedImage && selectedNote && (
        <ImageModal
          imageUrl={selectedImage}
          images={selectedNote.images.map((img) => `/api/public/notes/${selectedNote.id}/images/${img.id}`)}
          currentIndex={imageIndex}
          onClose={handleCloseImageModal}
        />
      )}
    </>
  );
};

export default PublicProfilePage;

