"use client";

import React, { useState } from "react";
import Image from "next/image";
import { Star, CheckCircle2, Quote, Sparkles, Building2, ExternalLink, ThumbsUp } from "lucide-react";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { useAppStore } from "@/lib/store";
import { TestimonialItem } from "@/types";

function TestimonialCard({ item }: { item: TestimonialItem }) {
  return (
    <div className="relative rounded-3xl border border-border/80 bg-card/85 p-6 backdrop-blur-md transition-all duration-300 hover:border-[#024d37] hover:shadow-xl hover:shadow-[#024d37]/5 space-y-4 group">
      {/* Top Header with Avatar, Name & Verified Badge */}
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="relative h-11 w-11 rounded-2xl bg-muted border border-border overflow-hidden shrink-0">
            <Image
              src={item.avatar || "/assets/team/irfan.jpg"}
              alt={item.name}
              fill
              className="object-cover"
            />
          </div>
          <div>
            <div className="flex items-center gap-1.5 font-bold text-sm text-foreground">
              <span>{item.name}</span>
              <CheckCircle2 className="h-3.5 w-3.5 text-[#024d37] shrink-0" />
            </div>
            <div className="text-[11px] text-muted-foreground font-mono truncate max-w-[200px]">
              {item.role} • {item.company}
            </div>
          </div>
        </div>

        {/* Rating Stars */}
        <div className="flex items-center gap-0.5 text-amber-400 shrink-0">
          {Array.from({ length: item.rating || 5 }).map((_, i) => (
            <Star key={i} className="h-3.5 w-3.5 fill-current text-amber-400" />
          ))}
        </div>
      </div>

      {/* Quote Text */}
      <p className="text-xs text-muted-foreground leading-relaxed italic relative">
        &ldquo;{item.content}&rdquo;
      </p>

      {/* Footer Badges */}
      <div className="pt-3 border-t border-border/70 flex flex-wrap items-center justify-between gap-2 font-mono text-[10px]">
        <span className="rounded-full border border-border bg-muted/60 px-2.5 py-1 text-foreground font-semibold flex items-center gap-1">
          <Sparkles className="h-2.5 w-2.5 text-[#024d37]" />
          {item.projectBadge}
        </span>

        <span className="text-[#024d37] font-bold text-[11px] flex items-center gap-1">
          <ThumbsUp className="h-3 w-3" />
          {item.metricHighlight}
        </span>
      </div>
    </div>
  );
}

export function SocialProof4() {
  const { testimonials } = useAppStore();
  const [isPaused, setIsPaused] = useState(false);

  const list = testimonials && testimonials.length > 0 ? testimonials : [];

  // Divide testimonials dynamically into 3 columns
  const col1: TestimonialItem[] = [];
  const col2: TestimonialItem[] = [];
  const col3: TestimonialItem[] = [];

  list.forEach((item, index) => {
    if (index % 3 === 0) col1.push(item);
    else if (index % 3 === 1) col2.push(item);
    else col3.push(item);
  });

  // Ensure minimum elements for smooth marquee loop
  const displayCol1 = col1.length > 0 ? [...col1, ...col1] : [];
  const displayCol2 = col2.length > 0 ? [...col2, ...col2] : displayCol1;
  const displayCol3 = col3.length > 0 ? [...col3, ...col3] : displayCol1;

  return (
    <section className="relative w-full border-b border-border bg-background py-16 sm:py-24 overflow-hidden font-sans">
      <SectionCorners />

      <div className="mx-auto max-w-[1440px] px-6 sm:px-10 lg:px-14">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-14 space-y-4">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-4 py-1.5 text-xs font-mono text-foreground shadow-xs">
            <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
            <span className="text-[#024d37] font-semibold">// 06. SOCIAL PROOF & VERIFIED REVIEWS</span>
          </div>

          <h2 className="text-3xl sm:text-5xl font-semibold tracking-tight text-foreground font-sans">
            Wall of Love & Verified Client Proof
          </h2>

          <p className="text-xs sm:text-sm text-muted-foreground max-w-xl mx-auto leading-relaxed">
            Real feedback from pharmacy owners, e-commerce founders, educational administrators, and enterprise tech leaders who scaled with AetherSoft.
          </p>

          {/* Rating Proof Pills */}
          <div className="flex flex-wrap items-center justify-center gap-3 pt-2 font-mono text-xs">
            <div className="flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-1.5 shadow-xs">
              <div className="flex text-amber-400">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} className="h-3 w-3 fill-current text-amber-400" />
                ))}
              </div>
              <span className="font-bold text-foreground">4.98 / 5.0</span>
              <span className="text-muted-foreground">({list.length}+ Verified Reviews)</span>
            </div>

            <div className="rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-1.5 text-emerald-700 dark:text-emerald-300 font-semibold text-[11px]">
              100% On-Time Delivery Warranty
            </div>
          </div>
        </div>

        {/* 3-COLUMN SCROLLING MARQUEE WALL OF LOVE */}
        <div 
          className="relative h-[620px] overflow-hidden"
          onMouseEnter={() => setIsPaused(true)}
          onMouseLeave={() => setIsPaused(false)}
        >
          {/* Top & Bottom Gradient Fade Masks */}
          <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-background via-background/80 to-transparent z-20" />
          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background via-background/80 to-transparent z-20" />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 h-full">
            {/* Column 1 (Scroll Down) */}
            <div className="overflow-hidden relative h-full">
              <div className={`space-y-6 animate-marquee-down ${isPaused ? "animation-pause" : ""}`}>
                {displayCol1.map((item, idx) => (
                  <TestimonialCard key={`col1-${item.id}-${idx}`} item={item} />
                ))}
              </div>
            </div>

            {/* Column 2 (Scroll Up) */}
            <div className="overflow-hidden relative h-full hidden md:block">
              <div className={`space-y-6 animate-marquee-up ${isPaused ? "animation-pause" : ""}`}>
                {displayCol2.map((item, idx) => (
                  <TestimonialCard key={`col2-${item.id}-${idx}`} item={item} />
                ))}
              </div>
            </div>

            {/* Column 3 (Scroll Down) */}
            <div className="overflow-hidden relative h-full hidden lg:block">
              <div className={`space-y-6 animate-marquee-down ${isPaused ? "animation-pause" : ""}`}>
                {displayCol3.map((item, idx) => (
                  <TestimonialCard key={`col3-${item.id}-${idx}`} item={item} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}