"use client";

import { useMessages, useT } from "@/components/LocaleProvider";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import { SectionLabel, AnimatedHeading } from "./Features";

export function AppShowcase() {
  const messages = useMessages();
  const highlights = messages.appShowcase.steps;
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });

  const phoneY = useTransform(scrollYProgress, [0, 1], ["20%", "-20%"]);
  const phoneRotate = useTransform(scrollYProgress, [0, 1], [6, -6]);

  return (
    <section ref={ref} id="app" className="relative py-20 md:py-28">
      <div
        className="pointer-events-none absolute inset-y-0 left-1/2 w-full max-w-6xl -translate-x-1/2 opacity-60"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(168,85,247,0.15), transparent 60%)",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-6">
        <div className="mb-12 max-w-3xl md:mb-16">
          <SectionLabel>{messages.appShowcase.label}</SectionLabel>
          <AnimatedHeading>
            <span className="flex flex-col gap-2 md:gap-3">
              <span>{messages.appShowcase.titleLine1}</span>
              <span className="text-muted-strong">
                {messages.appShowcase.titleLine2}
              </span>
            </span>
          </AnimatedHeading>
        </div>

        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-14">
          <motion.div
            style={{ y: phoneY, rotateZ: phoneRotate }}
            className="relative mx-auto flex w-full max-w-sm justify-center"
          >
            <PhoneMockup />
          </motion.div>

          <div className="space-y-6 md:space-y-8">
            {highlights.map((h, i) => (
              <motion.div
                key={h.step}
                initial={{ opacity: 0, x: 40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true, margin: "-80px" }}
                transition={{
                  duration: 0.8,
                  delay: i * 0.15,
                  ease: [0.22, 1, 0.36, 1],
                }}
                className="group relative flex gap-6 rounded-2xl border border-white/[0.06] bg-surface/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:border-white/15 md:p-8"
              >
                <div className="relative shrink-0">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-accent/30 bg-accent/10 font-mono text-sm font-semibold text-accent-bright">
                    {h.step}
                  </div>
                </div>
                <div>
                  <h3 className="mb-2 text-xl font-semibold tracking-tight md:text-2xl">
                    {h.title}
                  </h3>
                  <p className="text-sm leading-relaxed text-muted md:text-base">
                    {h.description}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PhoneMockup() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 60, rotateX: -10 }}
      whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 1.4, ease: [0.22, 1, 0.36, 1] }}
      className="relative"
      style={{ transformStyle: "preserve-3d" }}
    >
      <div
        aria-hidden
        className="absolute inset-0 -z-10 scale-110 blur-[80px]"
        style={{
          background:
            "radial-gradient(circle, rgba(168,85,247,0.45), transparent 70%)",
        }}
      />

      <div className="relative mx-auto aspect-[9/19.5] w-[280px] rounded-[3rem] border border-white/20 bg-gradient-to-b from-neutral-900 to-neutral-950 p-3 shadow-[0_40px_80px_-20px_rgba(0,0,0,0.8),0_0_0_1px_rgba(255,255,255,0.05)_inset] md:w-[320px]">
        <div className="absolute inset-y-12 -left-px w-px bg-gradient-to-b from-transparent via-white/20 to-transparent" />
        <div className="absolute inset-y-12 -right-px w-px bg-gradient-to-b from-transparent via-white/20 to-transparent" />

        <div className="relative h-full w-full overflow-hidden rounded-[2.3rem] bg-black">
          <div className="absolute left-1/2 top-2.5 z-20 h-[26px] w-[100px] -translate-x-1/2 rounded-full bg-black" />

          <PlaceholderAppUI />
        </div>
      </div>
    </motion.div>
  );
}

function PlaceholderAppUI() {
  const t = useT();
  const pu = (k: string) => t(`hero.phoneUi.${k}`);

  return (
    <div className="relative flex h-full w-full flex-col bg-gradient-to-b from-[#0a0a0f] via-[#0f0a18] to-[#1a0f28]">
      <div
        aria-hidden
        className="absolute inset-x-0 top-0 h-64"
        style={{
          background:
            "radial-gradient(ellipse at top, rgba(168,85,247,0.35), transparent 60%)",
        }}
      />

      <div className="h-12" />

      <div className="relative flex items-center gap-3 px-5 pb-4 pt-2">
        <div className="h-10 w-10 overflow-hidden rounded-full border border-white/20 bg-gradient-to-br from-accent/40 to-accent-deep/40" />
        <div className="flex-1">
          <div className="text-[13px] font-semibold text-white">Marcus</div>
          <div className="text-[10px] text-white/50">{pu("experience")}</div>
        </div>
        <div className="h-6 w-6 rounded-full bg-white/10" />
      </div>

      <div className="relative flex-1 space-y-3 overflow-hidden px-4 py-4">
        <ChatBubble from="ai" delay={0.4}>
          {pu("bubble1")}
        </ChatBubble>
        <ChatBubble from="user" delay={0.8}>
          {pu("bubble2")}
        </ChatBubble>
        <ChatBubble from="ai" delay={1.2}>
          {pu("bubble3")}
        </ChatBubble>
        <ChatBubble from="user" delay={1.6}>
          {pu("bubble4")}
        </ChatBubble>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 2 }}
          className="flex max-w-fit items-center gap-1.5 rounded-2xl rounded-bl-md border border-white/10 bg-white/[0.04] px-3 py-2.5"
        >
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              className="h-1.5 w-1.5 rounded-full bg-white/60"
              animate={{ opacity: [0.3, 1, 0.3] }}
              transition={{
                duration: 1.4,
                repeat: Infinity,
                delay: i * 0.2,
              }}
            />
          ))}
        </motion.div>
      </div>

      <div className="relative px-4 pb-6 pt-2">
        <div className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2.5">
          <div className="text-[11px] text-white/40">{pu("typing")}</div>
        </div>
      </div>

      <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 text-center">
        <div className="text-[9px] uppercase tracking-[0.3em] text-white/[0.08]">
          {t("hero.placeholderWatermark")}
        </div>
      </div>
    </div>
  );
}

function ChatBubble({
  from,
  children,
  delay,
}: {
  from: "ai" | "user";
  children: React.ReactNode;
  delay: number;
}) {
  const isAI = from === "ai";
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      className={`flex ${isAI ? "justify-start" : "justify-end"}`}
    >
      <div
        className={`max-w-[80%] rounded-2xl px-3 py-2 text-[11px] leading-snug ${
          isAI
            ? "rounded-bl-md border border-white/10 bg-white/[0.04] text-white/90"
            : "rounded-br-md bg-gradient-to-br from-accent to-accent-deep text-white"
        }`}
      >
        {children}
      </div>
    </motion.div>
  );
}