"use client";

import { useTranslation } from "@turbostarter/i18n";
import { cn } from "@turbostarter/ui";
import { useBreakpoint } from "@turbostarter/ui-web";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@turbostarter/ui-web/avatar";
import { Icons } from "@turbostarter/ui-web/icons";
import { Marquee } from "@turbostarter/ui-web/marquee";

import {
  Section,
  SectionBadge,
  SectionDescription,
  SectionHeader,
  SectionTitle,
} from "~/modules/marketing/layout/section";

const reviews = [
  {
    name: "testimonials.reviews.maria.name",
    body: "testimonials.reviews.maria.body",
    img: "https://avatar.vercel.sh/maria",
    position: "testimonials.reviews.maria.position",
    improvement: "4.1 → 4.6",
  },
  {
    name: "testimonials.reviews.carlos.name",
    body: "testimonials.reviews.carlos.body",
    img: "https://avatar.vercel.sh/carlos",
    position: "testimonials.reviews.carlos.position",
  },
  {
    name: "testimonials.reviews.elena.name",
    body: "testimonials.reviews.elena.body",
    img: "https://avatar.vercel.sh/elena",
    position: "testimonials.reviews.elena.position",
  },
  {
    name: "testimonials.reviews.david.name",
    body: "testimonials.reviews.david.body",
    img: "https://avatar.vercel.sh/david",
    position: "testimonials.reviews.david.position",
  },
  {
    name: "testimonials.reviews.sofia.name",
    body: "testimonials.reviews.sofia.body",
    img: "https://avatar.vercel.sh/sofia",
    position: "testimonials.reviews.sofia.position",
  },
] as const;

type Review = (typeof reviews)[number] & { improvement?: string };

export const Testimonials = () => {
  const { t } = useTranslation("marketing");
  const isDesktop = useBreakpoint("md");

  const rows = isDesktop
    ? [reviews.slice(0, reviews.length / 2), reviews.slice(reviews.length / 2)]
    : [reviews];

  return (
    <Section id="testimonials" className="lg:flex-row lg:items-start">
      <SectionHeader className="grow basis-0 lg:items-start">
        <SectionBadge>{t("testimonials.label")}</SectionBadge>
        <SectionTitle className="lg:text-left">
          {t("testimonials.title")}
        </SectionTitle>
        <SectionDescription className="lg:text-left">
          {t("testimonials.description")}
        </SectionDescription>
        <div className="flex flex-row items-center gap-0.5">
          {Array.from({ length: 5 }).map((_, index) => (
            <Icons.Star
              key={index}
              className="fill-yellow-500 text-yellow-500"
            />
          ))}
          <p className="ml-2 text-sm font-medium">
            {t("testimonials.rating", {
              rating: 4.9,
              count: reviews.length,
            })}
          </p>
        </div>
      </SectionHeader>

      <div className="relative flex h-[600px] grow flex-row items-center justify-center overflow-clip lg:basis-0">
        {rows.map((row, index) => (
          <Marquee
            key={index}
            pauseOnHover
            vertical
            className="[--duration:20s]"
            reverse={index % 2 !== 0}
          >
            {row.map((review) => (
              <ReviewCard key={review.name} {...review} />
            ))}
          </Marquee>
        ))}
        <div className="from-background pointer-events-none absolute inset-x-0 top-0 h-1/4 bg-gradient-to-b"></div>
        <div className="from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t"></div>
      </div>
    </Section>
  );
};

const ReviewCard = ({ img, name, position, body, improvement }: Review) => {
  const { t } = useTranslation("marketing");
  return (
    <figure
      className={cn(
        "bg-muted/20 relative h-full w-full overflow-clip rounded-xl border p-5",
      )}
    >
      <div className="flex flex-row items-center gap-2">
        <Avatar className="size-8">
          <AvatarImage src={img} alt={name} />
          <AvatarFallback className="uppercase">
            {t(name).slice(0, 2)}
          </AvatarFallback>
        </Avatar>
        <div className="flex flex-col">
          <figcaption className="text-sm font-medium">{t(name)}</figcaption>
          <p className="text-muted-foreground text-xs leading-tight font-medium">
            {t(position)}
          </p>
        </div>
        {improvement && (
          <span className="ml-auto inline-flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
            <Icons.TrendingUp className="size-3" />
            {improvement}
          </span>
        )}
      </div>
      <div className="mt-1.5 flex gap-0.5">
        {Array.from({ length: 5 }).map((_, i) => (
          <Icons.Star key={i} className="size-3.5 fill-yellow-500 text-yellow-500" />
        ))}
      </div>
      <blockquote className="mt-2 text-sm">{t(body)}</blockquote>
    </figure>
  );
};
