"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import {
  Users,
  Code2,
  Terminal,
  Sparkles,
  Github,
  Linkedin,
  Mail,
  ArrowRight,
  CheckCircle2,
  ShieldCheck,
  Send,
  X,
  FileText,
  Briefcase,
  Layers,
  HeartHandshake
} from "lucide-react";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { ShinyButton } from "@/components/ui/ShinyButton";
import { BlinkingSquares } from "@/components/ui/BlinkingSquares";
import { Showcase8 } from "@/components/ui/Showcase8";
import { useAppStore } from "@/lib/store";

interface TeamMember {
  name: string;
  role: string;
  department: string;
  bio: string;
  tech_stack: string[];
  image: string;
  github?: string;
  linkedin?: string;
  featured: boolean;
}

const TEAM_MEMBERS: TeamMember[] = [
  {
    name: "Muhammad Irfan",
    role: "Chief Technology Officer & Lead Architect",
    department: "Executive & Core Engineering",
    bio: "Systems architect and full-stack engineer with deep expertise in Next.js App Router, Supabase distributed PostgreSQL, Electron offline POS runtimes, and high-concurrency cloud infrastructure.",
    tech_stack: ["Next.js", "TypeScript", "PostgreSQL", "Electron", "Supabase", "Docker", "Redis"],
    image: "/assets/team/irfan.jpg",
    github: "https://github.com",
    linkedin: "https://linkedin.com",
    featured: true
  },
  {
    name: "Ayesha Khan",
    role: "Head of UI/UX & Design Systems",
    department: "Product Design",
    bio: "Design lead passionate about human-centric interfaces, high-fidelity Figma design tokens, light/dark mode ergonomics, and micro-interactions that elevate brand trust.",
    tech_stack: ["Figma", "Design Systems", "Tailwind CSS", "Spline 3D", "Wireframing"],
    image: "/assets/team/ayesha.jpg",
    linkedin: "https://linkedin.com",
    featured: true
  },
  {
    name: "Hamza Tariq",
    role: "Senior Mobile Application Engineer",
    department: "Mobile Engineering",
    bio: "Cross-platform mobile specialist crafting 60fps Flutter and React Native experiences with biometric offline storage, push webhook engines, and real-time state sync.",
    tech_stack: ["Flutter", "React Native", "Firebase", "Dart", "SQLite", "iOS/Android SDK"],
    image: "/assets/team/hamza.jpg",
    github: "https://github.com",
    linkedin: "https://linkedin.com",
    featured: true
  },
  {
    name: "Bilal Ahmed",
    role: "Growth PM & Technical SEO Lead",
    department: "Growth & Delivery",
    bio: "Data-driven growth engineer specializing in technical Core Web Vitals optimization, programmatic SEO keyword funnels, and high-ROI Meta ad campaign architecture.",
    tech_stack: ["Google Search Console", "GA4", "Ahrefs", "Technical SEO", "Meta Ads API"],
    image: "/assets/team/bilal.jpg",
    linkedin: "https://linkedin.com",
    featured: false
  },
  {
    name: "Zainab Ali",
    role: "HR & Talent Operations Manager",
    department: "Operations & Culture",
    bio: "Fostering engineering culture, talent acquisition, and seamless onboarding for global remote and local engineering pods across Pakistan.",
    tech_stack: ["Talent Acquisition", "HRMS", "Sprint Logistics", "Team Operations"],
    image: "/assets/team/zainab.jpg",
    linkedin: "https://linkedin.com",
    featured: false
  },
  {
    name: "Danial Raza",
    role: "Frontend Engineer (Next.js & GSAP)",
    department: "Frontend Engineering",
    bio: "Interactive web developer crafting dynamic animated web experiences, scroll triggers, and responsive layout architectures with strict accessibility standards.",
    tech_stack: ["Next.js", "React", "GSAP", "Tailwind CSS", "WebSockets"],
    image: "/assets/team/danial.jpg",
    github: "https://github.com",
    featured: false
  }
];

export default function TeamPage() {
  const store = useAppStore();
  const { t } = store;
  const members = (store.teamMembers && store.teamMembers.length > 0) ? store.teamMembers : TEAM_MEMBERS;

  const [isApplyModalOpen, setIsApplyModalOpen] = useState(false);
  const [applicantName, setApplicantName] = useState("");
  const [applicantEmail, setApplicantEmail] = useState("");
  const [applicantPhone, setApplicantPhone] = useState("+92 ");
  const [applicantRole, setApplicantRole] = useState("Full-Stack Next.js Engineer");
  const [portfolioLink, setPortfolioLink] = useState("");
  const [resumeText, setResumeText] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleApplySubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitted(true);
    setTimeout(() => {
      setIsSubmitted(false);
      setIsApplyModalOpen(false);
      setApplicantName("");
      setApplicantEmail("");
      setPortfolioLink("");
      setResumeText("");
    }, 2000);
  };

  return (
    <div className="mx-auto flex min-h-screen w-[calc(100%-1.5rem)] max-w-[1440px] flex-col border-x border-border sm:w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] bg-background text-foreground">
      {/* Header Banner */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 overflow-hidden">
        <SectionCorners />
        <BlinkingSquares
          squareSize={20}
          gap={8}
          color="#024d37"
          maxOpacity={0.35}
          minOpacity={0.03}
          blinkProbability={0.02}
          className="opacity-50"
        />

        <div className="relative z-10 max-w-3xl 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">
            <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
            {t("team.badge")}
          </div>

          <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
            {t("team.title")}
          </h1>

          <p className="text-base text-muted-foreground leading-relaxed max-w-2xl">
            {t("team.desc")}
          </p>

          <div className="pt-2">
            <button
              onClick={() => setIsApplyModalOpen(true)}
              className="inline-flex items-center gap-2 rounded-full bg-[#024d37] px-6 py-3 font-mono text-xs font-bold uppercase tracking-[0.12em] text-white hover:bg-[#036549] transition-all shadow-md shadow-[#024d37]/25 cursor-pointer"
            >
              <Briefcase className="h-4 w-4" />
              {t("team.join_team")}
            </button>
          </div>
        </div>
      </section>

      {/* Featured Editorial Scroll-Snap Team Carousel */}


      {/* Leadership & Core Engineering Grid with Real Portraits */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-12">
        <SectionCorners />

        <div className="flex items-center justify-between border-b border-border pb-4 font-mono text-xs">
          <span className="text-[#024d37] font-semibold">// ENGINEERING & PRODUCT PODS</span>
          <span className="text-muted-foreground">{members.length} Active Team Members</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {members.map((member, idx) => (
            <div
              key={member.name}
              className="rounded-2xl border border-border bg-card p-6 flex flex-col justify-between space-y-5 hover:border-[#024d37]/50 transition-all shadow-xs group"
            >
              <div className="space-y-4">
                {/* Employee Portrait & Pod Tag */}
                <div className="flex items-start gap-4">
                  <div className="relative h-20 w-20 sm:h-24 sm:w-24 shrink-0 overflow-hidden rounded-2xl border border-[#024d37]/40 shadow-md group-hover:border-[#024d37] transition-all">
                    <Image
                      src={member.image}
                      alt={member.name}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>

                  <div className="space-y-1">
                    <span className="font-mono text-xs text-[#024d37]">// POD_0{idx + 1}</span>
                    <h3 className="font-bold text-lg text-foreground group-hover:text-[#024d37] transition-colors leading-tight">
                      {member.name}
                    </h3>
                    <p className="text-xs font-mono text-muted-foreground">{member.role}</p>
                    <span className="inline-block rounded-full border border-border bg-muted px-2 py-0.5 font-mono text-[10px] text-foreground mt-1">
                      {member.department.split(" ")[0]}
                    </span>
                  </div>
                </div>

                <p className="text-xs text-muted-foreground leading-relaxed pt-2">
                  {member.bio}
                </p>

                <div className="space-y-1.5 pt-3 border-t border-border font-mono text-xs">
                  <span className="text-[10px] text-muted-foreground uppercase block">CORE TECH STACK:</span>
                  <div className="flex flex-wrap gap-1.5 pt-0.5">
                    {member.tech_stack.map((tech) => (
                      <span
                        key={tech}
                        className="rounded-md border border-border bg-muted/60 px-2 py-0.5 text-[11px] text-foreground"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div className="pt-3 border-t border-border flex items-center justify-between font-mono text-xs">
                <span className="text-[11px] text-[#024d37] font-semibold flex items-center gap-1">
                  <span className="h-1.5 w-1.5 rounded-full bg-[#024d37] animate-pulse" /> Active Contributor
                </span>

                <div className="flex items-center gap-2 text-muted-foreground">
                  {member.github && (
                    <a
                      href={member.github}
                      target="_blank"
                      rel="noreferrer"
                      aria-label="GitHub"
                      className="hover:text-foreground p-1 transition-colors"
                    >
                      <Github className="h-4 w-4" />
                    </a>
                  )}
                  {member.linkedin && (
                    <a
                      href={member.linkedin}
                      target="_blank"
                      rel="noreferrer"
                      aria-label="LinkedIn"
                      className="hover:text-foreground p-1 transition-colors"
                    >
                      <Linkedin className="h-4 w-4" />
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Engineering Culture Section */}


      {/* CTA Join Us Banner */}
      <section className="relative p-8 sm:p-14 text-center space-y-6">
        <SectionCorners />

        <div className="max-w-2xl mx-auto space-y-3">
          <span className="font-mono text-xs text-[#024d37] uppercase font-bold tracking-wider">
            // CAREERS & TALENT POOL
          </span>
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
            Ready to build high-concurrency software?
          </h2>
          <p className="text-xs sm:text-sm text-muted-foreground">
            We are always scouting high-velocity developers, UI/UX designers, and systems architects. Send us your resume or GitHub link today.
          </p>
          <div className="pt-2">
            <button
              onClick={() => setIsApplyModalOpen(true)}
              className="inline-flex items-center gap-2 rounded-full bg-[#024d37] px-8 py-3.5 font-mono text-xs font-bold uppercase tracking-[0.12em] text-white hover:bg-[#036549] transition-all shadow-lg shadow-[#024d37]/25 cursor-pointer"
            >
              Submit Your Resume →
            </button>
          </div>
        </div>
      </section>

      {/* SUBMIT RESUME MODAL */}
      {isApplyModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setIsApplyModalOpen(false)} />
          <div className="relative z-10 w-full max-w-lg rounded-2xl border border-border bg-card p-6 sm:p-8 text-foreground shadow-2xl space-y-4 font-mono text-xs max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between border-b border-border pb-3">
              <div>
                <span className="text-[#024d37] font-semibold">// TALENT ONBOARDING</span>
                <h3 className="text-lg font-bold font-sans mt-0.5">Submit Resume to AetherSoft</h3>
              </div>
              <button onClick={() => setIsApplyModalOpen(false)} className="text-muted-foreground hover:text-foreground">
                <X className="h-5 w-5" />
              </button>
            </div>

            {isSubmitted ? (
              <div className="rounded-xl border border-[#024d37]/40 bg-[#024d37]/10 p-6 text-center space-y-2">
                <CheckCircle2 className="h-8 w-8 text-[#024d37] mx-auto" />
                <h4 className="font-sans font-bold text-base text-foreground">Application Received!</h4>
                <p className="text-xs text-muted-foreground">
                  Thank you for applying to AetherSoft Innovations. Our engineering leads will review your portfolio and reach out via email.
                </p>
              </div>
            ) : (
              <form onSubmit={handleApplySubmit} className="space-y-3.5">
                <div>
                  <label className="text-muted-foreground block mb-1">[FULL NAME]</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Asad Mehmood"
                    value={applicantName}
                    onChange={(e) => setApplicantName(e.target.value)}
                    className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                  />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                  <div>
                    <label className="text-muted-foreground block mb-1">[EMAIL ADDRESS]</label>
                    <input
                      type="email"
                      required
                      placeholder="asad@example.com"
                      value={applicantEmail}
                      onChange={(e) => setApplicantEmail(e.target.value)}
                      className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="text-muted-foreground block mb-1">[PHONE / WHATSAPP]</label>
                    <input
                      type="text"
                      required
                      value={applicantPhone}
                      onChange={(e) => setApplicantPhone(e.target.value)}
                      className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                    />
                  </div>
                </div>

                <div>
                  <label className="text-muted-foreground block mb-1">[POSITION / ROLE]</label>
                  <select
                    value={applicantRole}
                    onChange={(e) => setApplicantRole(e.target.value)}
                    className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground text-xs focus:border-[#024d37] focus:outline-none"
                  >
                    <option value="Full-Stack Next.js Engineer">Full-Stack Next.js Engineer</option>
                    <option value="Flutter / Mobile Engineer">Flutter / Mobile Engineer</option>
                    <option value="UI/UX Product Designer">UI/UX Product Designer</option>
                    <option value="Backend / Database Architect">Backend / Database Architect</option>
                    <option value="Technical SEO & Growth Specialist">Technical SEO & Growth Specialist</option>
                  </select>
                </div>

                <div>
                  <label className="text-muted-foreground block mb-1">[GITHUB / PORTFOLIO / LINKEDIN URL]</label>
                  <input
                    type="url"
                    required
                    placeholder="https://github.com/yourhandle"
                    value={portfolioLink}
                    onChange={(e) => setPortfolioLink(e.target.value)}
                    className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                  />
                </div>

                <div>
                  <label className="text-muted-foreground block mb-1">[RESUME SUMMARY OR DRIVE LINK]</label>
                  <textarea
                    rows={3}
                    required
                    placeholder="Paste link to Google Drive CV or summary of projects & experience..."
                    value={resumeText}
                    onChange={(e) => setResumeText(e.target.value)}
                    className="w-full rounded-xl border border-border bg-muted px-3 py-2 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                  />
                </div>

                <div className="flex justify-end gap-2 pt-3 border-t border-border">
                  <button
                    type="button"
                    onClick={() => setIsApplyModalOpen(false)}
                    className="rounded-full border border-border px-4 py-1.5 text-xs text-muted-foreground"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="rounded-full bg-[#024d37] px-6 py-2 text-xs font-bold text-white shadow-md shadow-[#024d37]/20 cursor-pointer"
                  >
                    Send Application →
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}
    </div>
  );
}