"use client";

import Link from "next/link";
import { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
import galleryData from "../data/image-host.json";
import styles from "./ImageHost.module.css";
import cardStyles from "./ImageHostCard.module.css";

type ImageItem = {
  id: string;
  title: string;
  src: string;
  category: string;
  ratio: string;
  position: string;
  width: number;
  height: number;
  size: string;
  format: string;
  uploadedAt: string;
  views: number;
  tags: string[];
  local?: boolean;
};

type AlbumItem = {
  id: string;
  title: string;
  description: string;
  category: string;
  coverId: string;
  imageIds: string[];
  updatedAt: string;
  tags: string[];
};

type DataShape = {
  categories: string[];
  images: ImageItem[];
  albums: AlbumItem[];
  feed: { kind: "image" | "album"; id: string }[];
};

type GalleryItem =
  | { key: string; kind: "image"; image: ImageItem; albumId?: string }
  | { key: string; kind: "album"; album: AlbumItem; cover: ImageItem };

type ViewState =
  | { type: "gallery" }
  | { type: "album"; id: string }
  | { type: "image"; id: string; albumId?: string };

const data = galleryData as DataShape;

export default function ImageHostPage() {
  const uploadRef = useRef<HTMLInputElement>(null);
  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const localUrlsRef = useRef<string[]>([]);
  const [view, setView] = useState<ViewState>({ type: "gallery" });
  const [category, setCategory] = useState("全部");
  const [query, setQuery] = useState("");
  const [uploadedImages, setUploadedImages] = useState<ImageItem[]>([]);
  const [quickPreview, setQuickPreview] = useState<GalleryItem | null>(null);
  const [armingKey, setArmingKey] = useState<string | null>(null);
  const [toast, setToast] = useState("");

  const allImages = useMemo(() => [...uploadedImages, ...data.images], [uploadedImages]);
  const imageMap = useMemo(() => new Map(allImages.map((image) => [image.id, image])), [allImages]);

  const feedItems = useMemo(() => {
    const uploaded: GalleryItem[] = uploadedImages.map((image) => ({ key: `image-${image.id}`, kind: "image", image }));
    const bundled = data.feed.flatMap<GalleryItem>((entry) => {
      if (entry.kind === "image") {
        const image = imageMap.get(entry.id);
        return image ? [{ key: `image-${image.id}`, kind: "image", image }] : [];
      }
      const album = data.albums.find((item) => item.id === entry.id);
      const cover = album ? imageMap.get(album.coverId) : undefined;
      return album && cover ? [{ key: `album-${album.id}`, kind: "album", album, cover }] : [];
    });
    return [...uploaded, ...bundled];
  }, [imageMap, uploadedImages]);

  const filteredItems = useMemo(() => feedItems.filter((item) => {
    const itemCategory = item.kind === "image" ? item.image.category : item.album.category;
    const searchable = item.kind === "image"
      ? `${item.image.title} ${item.image.tags.join(" ")} ${item.image.category}`
      : `${item.album.title} ${item.album.description} ${item.album.tags.join(" ")} ${item.album.category}`;
    return (category === "全部" || itemCategory === category) && searchable.toLowerCase().includes(query.trim().toLowerCase());
  }), [feedItems, category, query]);

  const currentAlbum = view.type === "album" ? data.albums.find((album) => album.id === view.id) ?? null : null;
  const albumImages = currentAlbum ? currentAlbum.imageIds.map((id) => imageMap.get(id)).filter((image): image is ImageItem => Boolean(image)) : [];
  const currentImage = view.type === "image" ? imageMap.get(view.id) ?? null : null;

  useEffect(() => () => {
    if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
    localUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
  }, []);

  const notify = (message: string) => {
    setToast(message);
    window.setTimeout(() => setToast(""), 1900);
  };

  const clearPreviewTimer = () => {
    if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
    previewTimerRef.current = null;
  };

  const armPreview = (item: GalleryItem) => {
    clearPreviewTimer();
    setQuickPreview(null);
    setArmingKey(item.key);
    previewTimerRef.current = window.setTimeout(() => {
      setQuickPreview(item);
      setArmingKey(null);
    }, 3000);
  };

  const disarmPreview = () => {
    clearPreviewTimer();
    setArmingKey(null);
    setQuickPreview(null);
  };

  const changeCategory = (value: string) => {
    setCategory(value);
    setView({ type: "gallery" });
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const openItem = (item: GalleryItem) => {
    disarmPreview();
    setView(item.kind === "album" ? { type: "album", id: item.album.id } : { type: "image", id: item.image.id, albumId: item.albumId });
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const goBack = () => {
    if (view.type === "image" && view.albumId) setView({ type: "album", id: view.albumId });
    else setView({ type: "gallery" });
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const uploadImages = (event: ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files ?? []).filter((file) => file.type.startsWith("image/"));
    if (!files.length) return;
    const today = new Date().toISOString().slice(0, 10);
    const additions = files.map<ImageItem>((file, index) => {
      const url = URL.createObjectURL(file);
      localUrlsRef.current.push(url);
      return {
        id: `local-${Date.now()}-${index}`,
        title: file.name.replace(/\.[^.]+$/, ""),
        src: url,
        category: "动漫",
        ratio: index % 2 ? "4 / 5" : "3 / 2",
        position: "center",
        width: 0,
        height: 0,
        size: formatBytes(file.size),
        format: file.type.split("/")[1]?.toUpperCase() || "IMAGE",
        uploadedAt: today,
        views: 0,
        tags: ["本地预览", "刚刚上传"],
        local: true,
      };
    });
    setUploadedImages((current) => [...additions, ...current]);
    setView({ type: "gallery" });
    setCategory("全部");
    event.target.value = "";
    notify(`已添加 ${additions.length} 张本地图片`);
  };

  const copyImageUrl = async (image: ImageItem) => {
    const value = image.local ? image.src : `${window.location.origin}${image.src}`;
    try {
      await navigator.clipboard.writeText(value);
      notify("图片地址已复制");
    } catch {
      notify("当前浏览器无法复制地址");
    }
  };

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <button className={styles.brand} onClick={() => setView({ type: "gallery" })} aria-label="返回图床首页"><span>◫</span><div><strong>LumaBox</strong><small>IMAGE HOST</small></div></button>
        <label className={styles.search}><span>⌕</span><input value={query} onChange={(event) => setQuery(event.target.value)} onFocus={() => setView({ type: "gallery" })} placeholder="搜索图片、标签或图集" />{query && <button onClick={() => setQuery("")} aria-label="清空搜索">×</button>}</label>
        <div className={styles.headerActions}><Link href="/">模板首页</Link><button className={styles.uploadButton} onClick={() => uploadRef.current?.click()}>＋ 上传图片</button><input ref={uploadRef} type="file" accept="image/*" multiple onChange={uploadImages} /></div>
      </header>

      <nav className={styles.categoryBar} aria-label="图片分类">
        <div>{data.categories.map((item) => <button key={item} className={category === item && view.type === "gallery" ? styles.categoryActive : ""} onClick={() => changeCategory(item)}>{item}</button>)}</div>
        <p><span>鼠标停留 3 秒</span>可快速大图预览</p>
      </nav>

      {view.type === "gallery" && <main className={styles.galleryPage}>
        <section className={styles.hero}>
          <div><p>YOUR VISUAL LIBRARY</p><h1>把喜欢的画面，收进一座安静的图床</h1><span>响应式卡片流 · 本地上传演示 · 图集连续浏览</span></div>
          <div className={styles.summary}><span><b>{feedItems.length}</b><small>展示项目</small></span><span><b>{data.albums.length}</b><small>公开图集</small></span><span><b>3s</b><small>悬停预览</small></span></div>
        </section>
        <div className={styles.resultLine}><div><strong>{category === "全部" ? "最近上传" : category}</strong><span>{filteredItems.length} 个结果</span></div>{(query || category !== "全部") && <button onClick={() => { setQuery(""); setCategory("全部"); }}>清除筛选</button>}</div>
        {filteredItems.length > 0 ? <GalleryGrid items={filteredItems} armingKey={armingKey} onArm={armPreview} onDisarm={disarmPreview} onOpen={openItem} /> : <div className={styles.empty}><span>◇</span><h2>没有找到匹配内容</h2><p>换一个关键词或查看全部分类。</p><button onClick={() => { setQuery(""); setCategory("全部"); }}>查看全部图片</button></div>}
      </main>}

      {view.type === "album" && currentAlbum && <main className={styles.albumPage}>
        <button className={styles.backButton} onClick={goBack}>← 返回图床</button>
        <section className={styles.albumHero}>
          <div className={styles.albumCover}>{albumImages.slice(0, 3).map((image, index) => <img key={image.id} src={image.src} alt="" style={{ objectPosition: image.position, zIndex: 3 - index }} />)}</div>
          <div className={styles.albumInfo}><p>ALBUM COLLECTION</p><h1>{currentAlbum.title}</h1><span>{currentAlbum.description}</span><div>{currentAlbum.tags.map((tag) => <b key={tag}>#{tag}</b>)}</div><small>{albumImages.length} 张图片 · 更新于 {currentAlbum.updatedAt}</small></div>
        </section>
        <div className={styles.resultLine}><div><strong>图集内容</strong><span>与图床相同的卡片浏览方式</span></div></div>
        <GalleryGrid items={albumImages.map((image) => ({ key: `album-image-${currentAlbum.id}-${image.id}`, kind: "image", image, albumId: currentAlbum.id }))} armingKey={armingKey} onArm={armPreview} onDisarm={disarmPreview} onOpen={openItem} />
      </main>}

      {view.type === "image" && currentImage && <main className={styles.detailPage}>
        <button className={styles.backButton} onClick={goBack}>← {view.albumId ? "返回图集" : "返回图床"}</button>
        <div className={styles.detailLayout}>
          <figure className={styles.detailVisual}><img src={currentImage.src} alt={currentImage.title} /><figcaption>原图预览 · {currentImage.format}</figcaption></figure>
          <aside className={styles.detailInfo}>
            <p>IMAGE DETAIL</p><h1>{currentImage.title}</h1>
            <div className={styles.detailTags}>{currentImage.tags.map((tag) => <span key={tag}>#{tag}</span>)}</div>
            <dl><div><dt>图片格式</dt><dd>{currentImage.format}</dd></div><div><dt>原始尺寸</dt><dd>{currentImage.width ? `${currentImage.width} × ${currentImage.height}` : "本地预览"}</dd></div><div><dt>文件大小</dt><dd>{currentImage.size}</dd></div><div><dt>上传时间</dt><dd>{currentImage.uploadedAt}</dd></div><div><dt>浏览次数</dt><dd>{currentImage.views.toLocaleString()}</dd></div><div><dt>所属分类</dt><dd>{currentImage.category}</dd></div></dl>
            <button className={styles.copyButton} onClick={() => copyImageUrl(currentImage)}>复制图片地址</button>
            <a className={styles.rawButton} href={currentImage.src} target="_blank" rel="noreferrer">在新窗口查看原图 ↗</a>
            <p className={styles.detailHint}>此模板使用本地 JSON 和浏览器文件预览，不需要后端接口。</p>
          </aside>
        </div>
      </main>}

      {quickPreview && <div className={styles.quickBackdrop} aria-hidden="true"><figure className={styles.quickPreview}><img src={quickPreview.kind === "image" ? quickPreview.image.src : quickPreview.cover.src} alt="" style={{ objectPosition: quickPreview.kind === "image" ? quickPreview.image.position : quickPreview.cover.position }} /><figcaption><span>{quickPreview.kind === "album" ? `图集 · ${quickPreview.album.imageIds.length} 张` : "图片快速预览"}</span><strong>{quickPreview.kind === "image" ? quickPreview.image.title : quickPreview.album.title}</strong><small>点击当前卡片进入详情</small></figcaption></figure></div>}
      {toast && <div className={styles.toast}>✓ {toast}</div>}
    </div>
  );
}

function GalleryGrid({ items, armingKey, onArm, onDisarm, onOpen }: {
  items: GalleryItem[];
  armingKey: string | null;
  onArm: (item: GalleryItem) => void;
  onDisarm: () => void;
  onOpen: (item: GalleryItem) => void;
}) {
  return <section className={styles.masonry} aria-label="图片卡片列表">{items.map((item) => {
    const image = item.kind === "image" ? item.image : item.cover;
    const title = item.kind === "image" ? item.image.title : item.album.title;
    const tags = item.kind === "image" ? item.image.tags : item.album.tags;
    return <button
      key={item.key}
      className={`${styles.card} ${cardStyles.card} ${item.kind === "album" ? styles.albumCard : ""}`}
      onPointerEnter={() => onArm(item)}
      onPointerMove={() => onArm(item)}
      onPointerLeave={onDisarm}
      onFocus={() => onArm(item)}
      onBlur={onDisarm}
      onClick={() => onOpen(item)}
    >
      <span className={`${styles.cardImage} ${cardStyles.cardImage}`} style={{ aspectRatio: image.ratio }}>
        <img src={image.src} alt={title} style={{ objectPosition: image.position }} />
        <span className={`${styles.cardBody} ${cardStyles.cardBody}`}>
          {item.kind === "album" && <b className={`${styles.albumBadge} ${cardStyles.albumBadge}`}>▣ {item.album.imageIds.length} 张图集</b>}
          <strong>{title}</strong>
          <small>{item.kind === "album" ? item.album.description : `${image.width || "本地"}${image.width ? ` × ${image.height}` : ""} · ${image.format}`}</small>
          <span className={`${styles.cardFooter} ${cardStyles.cardFooter}`}><em>{tags.slice(0, 2).map((tag) => `#${tag}`).join("  ")}</em><b>{item.kind === "album" ? "进入图集" : `${image.views.toLocaleString()} 浏览`} →</b></span>
        </span>
        {armingKey === item.key && <i className={styles.previewProgress} />}
      </span>
    </button>;
  })}</section>;
}

function formatBytes(bytes: number) {
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
}