import { useMemo, useRef, useState, type AnimationEvent } from "react";
import logoUrl from "./assets/logo-universal.png";
import ShowcaseVisual from "./ShowcaseVisual";

const slides = [
  {
    eyebrow: "UPLOAD",
    title: "直达云端",
    body: "截图可直接保存至对象存储、远端服务器等，并将地址直接复制到剪切板。",
    metric: "OBS / SSH / FTP",
    feature: "支持多种远端存储配置",
  },
  {
    eyebrow: "IDENTIFICATION",
    title: "智能识别",
    body: "截图可按你配置进行 AI 识别与总结，直接将你所需要的答案复制到剪切板。",
    metric: "AI",
    feature: "支持自定义 prompt 与多 provider",
  },
  {
    eyebrow: "OCR",
    title: "文字提取",
    body: "截图可自动识别其中的文本文字，并将文字直接复制到剪切板。",
    metric: "TEXT",
    feature: "兼容多个主流的 OCR 服务",
  },
  {
    eyebrow: "CAPTURE",
    title: "功能完备",
    body: "完善的截图功能，支持各类标注、打码，直接复制与本机保存。",
    metric: "⌘⇧S",
    feature: "全局快捷键唤起",
  },
];

type SlideDirection = -1 | 1;

type SlideTransition = {
  from: number;
  direction: SlideDirection;
};

function Logo() {
  return (
    <div className="brand" aria-label="SnapGo logo">
      <div className="brand-main">
        <span className="logo-mark">
          <img src={logoUrl} alt="SnapGo" />
        </span>
        <span className="brand-name">SnapGo</span>
      </div>
      <p className="brand-overline">AI SCREENSHOT UTILITY</p>
    </div>
  );
}

export default function App() {
  const [activeSlide, setActiveSlide] = useState(0);
  const [slideTransition, setSlideTransition] = useState<SlideTransition | null>(null);
  const dragStartX = useRef<number | null>(null);
  const active = slides[activeSlide];

  function getTransitionClass(role: "entering" | "exiting") {
    if (!slideTransition) {
      return "";
    }

    const edge = slideTransition.direction === 1 ? "right" : "left";
    return `is-${role}-from-${edge}`;
  }

  function finishSlideTransition(event: AnimationEvent<HTMLElement>) {
    if (event.target === event.currentTarget) {
      setSlideTransition(null);
    }
  }

  function selectSlide(nextSlide: number, direction: SlideDirection) {
    if (slideTransition || nextSlide === activeSlide) {
      return;
    }

    setSlideTransition({ from: activeSlide, direction });
    setActiveSlide(nextSlide);
  }

  function selectDotSlide(nextSlide: number) {
    const forwardDistance = (nextSlide - activeSlide + slides.length) % slides.length;
    const backwardDistance = (activeSlide - nextSlide + slides.length) % slides.length;
    selectSlide(nextSlide, forwardDistance <= backwardDistance ? 1 : -1);
  }

  const accentDots = useMemo(
    () =>
      slides.map((slide, index) => (
        <button
          key={slide.eyebrow}
          className={`dot ${index === activeSlide ? "is-active" : ""}`}
          type="button"
          aria-label={`查看 ${slide.title}`}
          onClick={() => selectDotSlide(index)}
        />
      )),
    [activeSlide, slideTransition],
  );

  function moveSlide(direction: SlideDirection) {
    const nextSlide = (activeSlide + direction + slides.length) % slides.length;
    selectSlide(nextSlide, direction);
  }

  function handlePointerEnd(clientX: number) {
    if (dragStartX.current === null) {
      return;
    }

    const delta = clientX - dragStartX.current;
    dragStartX.current = null;
    if (Math.abs(delta) < 42) {
      return;
    }

    moveSlide(delta > 0 ? -1 : 1);
  }

  return (
    <main className="landing-shell">
      <div className="ambient ambient-one" aria-hidden="true" />
      <div className="ambient ambient-two" aria-hidden="true" />
      <Logo />

      <section className="hero-copy" aria-labelledby="landing-title">
        <h1 id="landing-title">AI 时代的截图工具</h1>
        <p className="subtitle">高效、便捷、专为 AI 交互设计</p>
        <p className="intro">
          智能识图，发布链接，提取文本..
          <br />
          你能想到的都能一键解决
        </p>

        <div className="cta-row" aria-label="下载与项目链接">
          <div className="download-cta-group">
            <a className="primary-cta" href="https://gitea.mamamiyear.site/mamamiyear/SnapGo">
              <span className="apple-logo" aria-hidden="true"></span>
              下载 Mac 应用
              <svg viewBox="0 0 20 20" aria-hidden="true">
                <path d="M5 10h9M10.5 6.5 14 10l-3.5 3.5" />
              </svg>
            </a>
            <span className="platform-note">Windows/Linux 版本紧锣密鼓开发中</span>
          </div>
          <a
            className="github-cta"
            href="https://gitea.mamamiyear.site/mamamiyear/SnapGo"
            aria-label="查看源码"
            title="查看源码"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.34 1.12 2.91.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.74-.1-.26-.45-1.3.1-2.7 0 0 .84-.28 2.75 1.05A9.32 9.32 0 0 1 12 6.96c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.64.71 1.03 1.62 1.03 2.74 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9 0 1.38-.01 2.49-.01 2.83 0 .27.18.59.69.49A10.1 10.1 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"
              />
            </svg>
          </a>
        </div>
      </section>

      <section className="product-showcase" aria-label="SnapGo 功能效果展示">
        <div
          className="device-card"
          onPointerDown={(event) => {
            dragStartX.current = event.clientX;
          }}
          onPointerUp={(event) => handlePointerEnd(event.clientX)}
          onPointerCancel={() => {
            dragStartX.current = null;
          }}
          onPointerLeave={() => {
            dragStartX.current = null;
          }}
        >
          <div className="window-chrome" aria-hidden="true">
            <span />
            <span />
            <span />
          </div>

          <div className="preview-stage">
            {slideTransition && (
              <div
                key={`visual-${slideTransition.from}`}
                className={`carousel-slide is-exiting ${getTransitionClass("exiting")}`}
                aria-hidden="true"
              >
                <ShowcaseVisual activeIndex={slideTransition.from} />
              </div>
            )}
            <div
              key={`visual-${activeSlide}`}
              className={`carousel-slide ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
              onAnimationEnd={finishSlideTransition}
            >
              <ShowcaseVisual activeIndex={activeSlide} />
            </div>
          </div>

          <div className="slide-panel-viewport">
            {slideTransition && (
              <div
                key={`copy-${slideTransition.from}`}
                className={`slide-panel is-exiting ${getTransitionClass("exiting")}`}
                aria-hidden="true"
              >
                <p>{slides[slideTransition.from].eyebrow}</p>
                <h2>{slides[slideTransition.from].title}</h2>
                <span>{slides[slideTransition.from].body}</span>
              </div>
            )}
            <div
              key={`copy-${activeSlide}`}
              className={`slide-panel ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
            >
              <p>{active.eyebrow}</p>
              <h2>{active.title}</h2>
              <span>{active.body}</span>
            </div>
          </div>
        </div>

        <div className="carousel-bar">
          <button type="button" className="nav-btn" aria-label="上一项" onClick={() => moveSlide(-1)}>
            <svg viewBox="0 0 20 20" aria-hidden="true">
              <path d="m12 5-5 5 5 5" />
            </svg>
          </button>
          <div className="slide-meta-viewport" aria-live="polite">
            {slideTransition && (
              <div
                key={`meta-${slideTransition.from}`}
                className={`slide-meta is-exiting ${getTransitionClass("exiting")}`}
                aria-hidden="true"
              >
                <strong>{slides[slideTransition.from].metric}</strong>
                <span>{slides[slideTransition.from].feature}</span>
              </div>
            )}
            <div
              key={`meta-${activeSlide}`}
              className={`slide-meta ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
            >
              <strong>{active.metric}</strong>
              <span>{active.feature}</span>
            </div>
          </div>
          <div className="dots" aria-label="轮播分页">
            {accentDots}
          </div>
          <button type="button" className="nav-btn" aria-label="下一项" onClick={() => moveSlide(1)}>
            <svg viewBox="0 0 20 20" aria-hidden="true">
              <path d="m8 5 5 5-5 5" />
            </svg>
          </button>
        </div>
      </section>
    </main>
  );
}
