"use client";

import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { 
  Users, 
  Sparkles, 
  Shuffle, 
  CheckCircle2, 
  ArrowRight,
  Github,
  Linkedin,
  Mail,
  Camera
} from "lucide-react";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { useAppStore } from "@/lib/store";
import { TeamMemberItem } from "@/types";

export interface Showcase6Props {
  title?: string;
  subtitle?: string;
  badge?: string;
  items?: TeamMemberItem[];
}

const ROTATION_PRESETS = [
  "-rotate-2 hover:rotate-0",
  "rotate-2.5 hover:rotate-0",
  "-rotate-1 hover:rotate-0",
  "rotate-2 hover:rotate-0",
  "-rotate-2.5 hover:rotate-0",
  "rotate-1.5 hover:rotate-0",
];

const TAPE_COLORS = [
  "bg-[#024d37]/25 border-[#024d37]/40",
  "bg-emerald-500/25 border-emerald-500/40",
  "bg-teal-500/25 border-teal-500/40",
  "bg-[#036549]/25 border-[#036549]/40",
];

export function Showcase6({
  title = "Meet Our Team",
  subtitle = "The engineering architects, product designers, and software engineers driving product innovation at AetherSoft Innovations.",
  badge = "// 05. MEET OUR TEAM",
  items,
}: Showcase6Props) {
  const { teamMembers } = useAppStore();
  const teamList = items || teamMembers || [];

  const [selectedDept, setSelectedDept] = useState<string>("All");
  const [shuffleKey, setShuffleKey] = useState<number>(0);

  const departments = [
    "All",
    "Executive",
    "Design",
    "Mobile",
    "Frontend",
    "Growth"
  ];

  const filteredTeam = selectedDept === "All"
    ? teamList
    : teamList.filter((m) => m.department.toLowerCase().includes(selectedDept.toLowerCase()));

  const handleShuffle = () => {
    setShuffleKey((prev) => prev + 1);
  };

  return (
    <section className="relative w-full border-b border-border bg-card/30 py-14 sm:py-20 overflow-hidden font-sans">
      <SectionCorners />

      <div className="mx-auto max-w-[1440px] px-6 sm:px-10 lg:px-14">
        {/* Section Header */}
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12">
          <div className="space-y-2.5 max-w-2xl">
            <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">
              <Users className="h-3.5 w-3.5 text-[#024d37]" />
              <span className="text-[#024d37] font-semibold">{badge}</span>
            </div>

            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-foreground font-sans">
              {title}
            </h2>

            <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
              {subtitle}
            </p>
          </div>

          {/* Department Filter Pills & Shuffle Trigger */}
          <div className="flex flex-wrap items-center gap-2 font-mono text-xs">
            {departments.map((dept) => (
              <button
                key={dept}
                onClick={() => setSelectedDept(dept)}
                className={`rounded-full px-3.5 py-1.5 transition-all cursor-pointer text-xs ${
                  selectedDept === dept
                    ? "bg-[#024d37] text-white font-bold shadow-md shadow-[#024d37]/20"
                    : "border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted"
                }`}
              >
                {dept}
              </button>
            ))}

            <button
              onClick={handleShuffle}
              title="Shuffle polaroid angles"
              className="rounded-full border border-border bg-card p-2 text-muted-foreground hover:text-[#024d37] hover:border-[#024d37] transition-all cursor-pointer ml-1"
            >
              <Shuffle className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>

        {/* Compact Polaroid Scrapbook Grid (6 Columns on Desktop / 3 on Tablet / 2 on Mobile) */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 sm:gap-5 pt-3">
          {filteredTeam.map((member, idx) => {
            const rotClass = ROTATION_PRESETS[(idx + shuffleKey) % ROTATION_PRESETS.length];
            const tapeColor = TAPE_COLORS[idx % TAPE_COLORS.length];

            return (
              <div
                key={`${member.id || member.name}-${shuffleKey}`}
                className={`group relative rounded-2xl bg-card border border-border/80 p-2.5 pb-4 shadow-lg transition-all duration-300 ease-out hover:z-20 hover:scale-105 hover:shadow-2xl hover:border-[#024d37]/60 ${rotClass}`}
              >
                {/* Scrapbook Washi Tape Accent on Top */}
                <div
                  className={`absolute -top-2.5 left-1/2 -translate-x-1/2 h-4 w-14 rounded-xs border backdrop-blur-xs shadow-xs z-10 ${tapeColor} rotate-[-1deg] group-hover:rotate-0 transition-transform`}
                />

                {/* Compact Polaroid Photo Frame */}
                <div className="relative aspect-square w-full rounded-xl overflow-hidden bg-muted border border-border/60 shadow-inner">
                  <Image
                    src={member.image || "/assets/team/irfan.jpg"}
                    alt={member.name}
                    fill
                    className="object-cover object-top transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80" />

                  {/* Stamp / Index Tag */}
                  <div className="absolute bottom-1.5 left-1.5 right-1.5 flex items-center justify-between text-white font-mono text-[9px]">
                    <span className="rounded-full bg-black/60 backdrop-blur-md px-2 py-0.2 border border-white/20">
                      #{String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="flex items-center gap-0.5 text-emerald-400 font-bold bg-black/60 backdrop-blur-md px-1.5 py-0.2 rounded-full border border-white/10">
                      <CheckCircle2 className="h-2.5 w-2.5" />
                    </span>
                  </div>
                </div>

                {/* Compact Mono Captions Below Photo */}
                <div className="mt-2.5 px-0.5 space-y-1 font-mono text-left">
                  <h3 className="font-sans font-bold text-sm text-foreground group-hover:text-[#024d37] transition-colors leading-tight truncate">
                    {member.name}
                  </h3>

                  <div className="text-[10px] text-[#024d37] font-semibold tracking-wide truncate">
                    // {member.role.split("&")[0].trim()}
                  </div>

                  <div className="flex items-center justify-between text-[9px] text-muted-foreground pt-1 border-t border-border/60 mt-1">
                    <span className="truncate max-w-[85px] uppercase text-[9px] font-medium text-muted-foreground">
                      {member.department.split("&")[0].trim()}
                    </span>

                    <div className="flex items-center gap-1.5 shrink-0">
                      {member.linkedin && (
                        <a
                          href={member.linkedin}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="hover:text-[#0077b5] transition-colors"
                          aria-label="LinkedIn Profile"
                        >
                          <Linkedin className="h-3 w-3" />
                        </a>
                      )}
                      {member.github && (
                        <a
                          href={member.github}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="hover:text-foreground transition-colors"
                          aria-label="GitHub Profile"
                        >
                          <Github className="h-3 w-3" />
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Gallery Footer Action */}
        <div className="mt-10 text-center font-mono text-xs">
          <Link
            href="/team"
            className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-5 py-2 font-semibold text-foreground hover:border-[#024d37] hover:bg-muted transition-all shadow-xs text-xs"
          >
            <Users className="h-3.5 w-3.5 text-[#024d37]" />
            <span>Meet All Engineering Leads & Core Pods →</span>
          </Link>
        </div>
      </div>
    </section>
  );
}