"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import {
  Phone,
  Mail,
  MapPin,
  Globe,
  ExternalLink,
  ShieldCheck,
  Briefcase,
  Users,
  X,
  CheckCircle2,
  Send,
  Sparkles,
  ArrowRight,
  Github,
  Linkedin,
  Twitter,
  Facebook,
  Instagram,
  Youtube,
  MessageCircle,
  Clock,
  Lock,
  Layers,
  Terminal
} from "lucide-react";
import { useAppStore } from "@/lib/store";
import { ShinyButton } from "@/components/ui/ShinyButton";
import { BlinkingSquares } from "@/components/ui/BlinkingSquares";
import { SectionCorners } from "@/components/ui/SectionCorner";

export function Footer() {
  const pathname = usePathname();
  const { products, siteSettings, language, currency, t } = useAppStore();
  const [isResumeModalOpen, setIsResumeModalOpen] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("+92 ");
  const [role, setRole] = useState("Full-Stack Next.js Engineer");
  const [portfolio, setPortfolio] = useState("");
  const [resume, setResume] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [currentTime, setCurrentTime] = useState<string>("");

  // Live clock in Islamabad / PKT time
  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      const timeStr = new Intl.DateTimeFormat("en-US", {
        timeZone: "Asia/Karachi",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: true,
      }).format(now);
      setCurrentTime(timeStr);
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  // Hide footer inside full admin dashboard layout
  if (pathname.startsWith("/admin") && pathname !== "/admin/login") {
    return null;
  }

  const handleResumeSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
      setIsResumeModalOpen(false);
      setName("");
      setEmail("");
      setPortfolio("");
      setResume("");
    }, 2200);
  };

  const socialLinks = siteSettings?.social_links;

  return (
    <footer className="w-full border-t border-border bg-card/60 relative font-sans overflow-hidden">
      {/* Interactive Twinkling Blinking Squares Canvas in Footer */}
      <BlinkingSquares
        squareSize={18}
        gap={8}
        color="#024d37"
        maxOpacity={0.2}
        minOpacity={0.02}
        blinkProbability={0.015}
        className="opacity-35"
      />
      <SectionCorners />

      {/* 1. TOP CAROUSEL / CAREERS CALLOUT */}
      <div className="border-b border-border bg-muted/40 relative overflow-hidden">
        <div className="mx-auto max-w-[1440px] px-6 py-8 sm:px-10 lg:px-14 flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
          <div className="space-y-1.5 max-w-xl">
            <div className="inline-flex items-center gap-2 font-mono text-xs text-[#024d37] font-semibold uppercase">
              <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
              <span>{t("footer.careers_badge")}</span>
            </div>
            <h3 className="text-2xl font-bold tracking-tight text-foreground font-sans">
              {t("footer.careers_title")}
            </h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              We are constantly hiring top-tier full-stack engineers, mobile developers, and UI/UX architects. Submit your portfolio for rapid engineering pod evaluation.
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            <button
              onClick={() => setIsResumeModalOpen(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 active:scale-[0.98]"
            >
              <Briefcase className="h-4 w-4" />
              {t("footer.join_now")}
            </button>
            <Link
              href="/team"
              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-5 py-3 font-mono text-xs font-semibold text-foreground hover:border-[#024d37] hover:bg-muted transition-all"
            >
              <Users className="h-3.5 w-3.5 text-[#024d37]" />
              {t("footer.meet_team")}
            </Link>
          </div>
        </div>
      </div>

      {/* 2. MAIN FOOTER CONTENT */}
      <div className="mx-auto max-w-[1440px] px-6 py-14 sm:px-10 lg:px-14">
        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-12">
          {/* Col 1: Brand, Vision & Super Admin Managed Social Hub (4 cols) */}
          <div className="lg:col-span-4 space-y-5">
            <Link href="/" className="inline-block group">
              <div className="relative h-10 w-44">
                <Image
                  src={siteSettings?.logo_url || "/assets/logo/logo.png"}
                  alt={siteSettings?.company_name || "AetherSoft Innovations"}
                  fill
                  className="object-contain object-left transition-transform group-hover:scale-105"
                  priority
                />
              </div>
            </Link>

            <p className="text-xs leading-relaxed text-muted-foreground max-w-sm">
              {siteSettings?.hero_subtext || "Complete software solutions, engineered beyond limits. High-speed Next.js web applications, cross-platform mobile apps, and dedicated vertical SaaS ecosystems."}
            </p>

            {/* SUPER ADMIN MANAGED SOCIAL MEDIA LINKS */}
            <div className="space-y-2 pt-1">
              <span className="font-mono text-[11px] font-semibold text-muted-foreground block tracking-wider uppercase">
                // CONNECT & FOLLOW US:
              </span>
              <div className="flex flex-wrap items-center gap-2">
                {/* GitHub */}
                {socialLinks?.github && (
                  <a
                    href={socialLinks.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="GitHub Profile"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-foreground hover:border-[#024d37] hover:bg-[#024d37]/10 transition-all shadow-xs"
                  >
                    <Github className="h-4 w-4" />
                  </a>
                )}

                {/* LinkedIn */}
                {socialLinks?.linkedin && (
                  <a
                    href={socialLinks.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="LinkedIn Page"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#0077b5] hover:border-[#0077b5] hover:bg-[#0077b5]/10 transition-all shadow-xs"
                  >
                    <Linkedin className="h-4 w-4" />
                  </a>
                )}

                {/* Twitter / X */}
                {socialLinks?.twitter && (
                  <a
                    href={socialLinks.twitter}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Twitter / X"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#1da1f2] hover:border-[#1da1f2] hover:bg-[#1da1f2]/10 transition-all shadow-xs"
                  >
                    <Twitter className="h-4 w-4" />
                  </a>
                )}

                {/* Instagram */}
                {socialLinks?.instagram && (
                  <a
                    href={socialLinks.instagram}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Instagram Profile"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#e4405f] hover:border-[#e4405f] hover:bg-[#e4405f]/10 transition-all shadow-xs"
                  >
                    <Instagram className="h-4 w-4" />
                  </a>
                )}

                {/* Facebook */}
                {socialLinks?.facebook && (
                  <a
                    href={socialLinks.facebook}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Facebook Page"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#1877f2] hover:border-[#1877f2] hover:bg-[#1877f2]/10 transition-all shadow-xs"
                  >
                    <Facebook className="h-4 w-4" />
                  </a>
                )}

                {/* YouTube */}
                {socialLinks?.youtube && (
                  <a
                    href={socialLinks.youtube}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="YouTube Channel"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#ff0000] hover:border-[#ff0000] hover:bg-[#ff0000]/10 transition-all shadow-xs"
                  >
                    <Youtube className="h-4 w-4" />
                  </a>
                )}

                {/* WhatsApp */}
                {socialLinks?.whatsapp && (
                  <a
                    href={socialLinks.whatsapp}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Direct WhatsApp Chat"
                    className="h-8 w-8 rounded-xl border border-border bg-card flex items-center justify-center text-muted-foreground hover:text-[#25d366] hover:border-[#25d366] hover:bg-[#25d366]/10 transition-all shadow-xs"
                  >
                    <MessageCircle className="h-4 w-4" />
                  </a>
                )}
              </div>
            </div>

            {/* Direct Contact Details */}
            <div className="pt-2 font-mono text-xs text-muted-foreground space-y-2 border-t border-border/80">
              <a
                href={`tel:${siteSettings?.contact_phone || "+923357758256"}`}
                className="flex items-center gap-2.5 text-muted-foreground hover:text-[#024d37] transition-colors"
              >
                <Phone className="h-3.5 w-3.5 text-[#024d37] shrink-0" />
                <span>{siteSettings?.contact_phone || "+92 335 7758256"}</span>
              </a>
              <a
                href={`mailto:${siteSettings?.contact_email || "contact@aethersoftinnovations.com"}`}
                className="flex items-center gap-2.5 text-muted-foreground hover:text-[#024d37] transition-colors"
              >
                <Mail className="h-3.5 w-3.5 text-[#024d37] shrink-0" />
                <span className="truncate">{siteSettings?.contact_email || "contact@aethersoftinnovations.com"}</span>
              </a>
              <div className="flex items-start gap-2.5 text-muted-foreground">
                <MapPin className="h-3.5 w-3.5 text-[#024d37] shrink-0 mt-0.5" />
                <span>{siteSettings?.office_address || "Software Technology Park, I-9, Islamabad, Pakistan"}</span>
              </div>
            </div>
          </div>

          {/* Col 2: Services & Disciplines (2 cols) */}
          <div className="lg:col-span-2 space-y-3">
            <h4 className="text-xs font-mono font-semibold uppercase tracking-[0.14em] text-[#024d37] pb-1">
              // SERVICES
            </h4>
            <ul className="space-y-2 text-xs text-muted-foreground font-sans">
              <li>
                <Link href="/services#web-development" className="hover:text-[#024d37] transition-colors">
                  Web Development (Next.js)
                </Link>
              </li>
              <li>
                <Link href="/services#mobile-app-development" className="hover:text-[#024d37] transition-colors">
                  Mobile App Development
                </Link>
              </li>
              <li>
                <Link href="/services#seo-digital-marketing" className="hover:text-[#024d37] transition-colors">
                  SEO & Technical Growth
                </Link>
              </li>
              <li>
                <Link href="/services#ui-ux-design-systems" className="hover:text-[#024d37] transition-colors">
                  UI/UX Design Systems
                </Link>
              </li>
              <li>
                <Link href="/services#custom-erp-saas-solutions" className="hover:text-[#024d37] transition-colors">
                  Enterprise ERP & POS
                </Link>
              </li>
              <li className="pt-1">
                <Link href="/packages" className="hover:text-[#024d37] transition-colors font-mono font-bold text-[#024d37] flex items-center gap-1 text-[11px]">
                  <span>Tiered Packages</span>
                  <ArrowRight className="h-3 w-3" />
                </Link>
              </li>
            </ul>
          </div>

          {/* Col 3: SaaS Platforms (2 cols) */}
          <div className="lg:col-span-2 space-y-3">
            <h4 className="text-xs font-mono font-semibold uppercase tracking-[0.14em] text-[#024d37] pb-1">
              // SAAS ECOSYSTEM
            </h4>
            <ul className="space-y-2 text-xs text-muted-foreground font-sans">
              {products.slice(0, 5).map((p) => (
                <li key={p.id}>
                  <Link
                    href={`/products?product=${p.slug}`}
                    className="hover:text-[#024d37] transition-colors flex items-center justify-between group"
                  >
                    <span>{p.name}</span>
                    <span className="text-[10px] font-mono text-muted-foreground group-hover:text-[#024d37] opacity-60">
                      v{p.version}
                    </span>
                  </Link>
                </li>
              ))}
              <li className="pt-1">
                <Link href="/products" className="text-[#024d37] hover:underline flex items-center gap-1 font-mono font-bold text-[11px]">
                  <span>View All 6+ SaaS</span>
                  <ArrowRight className="h-3 w-3" />
                </Link>
              </li>
            </ul>
          </div>

          {/* Col 4: Corporate & Navigation (2 cols) */}
          <div className="lg:col-span-2 space-y-3">
            <h4 className="text-xs font-mono font-semibold uppercase tracking-[0.14em] text-[#024d37] pb-1">
              // COMPANY
            </h4>
            <ul className="space-y-2 text-xs text-muted-foreground font-sans">
              <li>
                <Link href="/team" className="hover:text-[#024d37] transition-colors font-medium text-foreground">
                  Our Engineering Team
                </Link>
              </li>
              <li>
                <button
                  onClick={() => setIsResumeModalOpen(true)}
                  className="hover:text-[#024d37] transition-colors text-left cursor-pointer"
                >
                  Careers & Hiring (Join Us)
                </button>
              </li>
              <li>
                <Link href="/portfolio" className="hover:text-[#024d37] transition-colors">
                  Case Studies & Proof
                </Link>
              </li>
              <li>
                <Link href="/portal" className="hover:text-[#024d37] transition-colors">
                  Client Project Portal
                </Link>
              </li>
              <li>
                <Link href="/contact" className="hover:text-[#024d37] transition-colors">
                  Free Architecture Audit
                </Link>
              </li>
              <li className="pt-1">
                <Link href="/login" className="font-mono text-[11px] text-muted-foreground hover:text-[#024d37] flex items-center gap-1">
                  <Lock className="h-3 w-3" />
                  <span>Portal & Admin Login</span>
                </Link>
              </li>
            </ul>
          </div>

          {/* Col 5: Direct Dispatch & Live SLA Beacon (2 cols) */}
          <div className="lg:col-span-2 space-y-3">


            <div className="pt-1 space-y-2">
              <ShinyButton href="/contact" size="sm" className="w-full text-center">
                Get Instant Quote →
              </ShinyButton>

              {socialLinks?.whatsapp && (
                <a
                  href={socialLinks.whatsapp}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full inline-flex items-center justify-center gap-1.5 rounded-full border border-[#25d366]/40 bg-[#25d366]/10 px-3 py-2 font-mono text-[11px] font-bold text-[#25d366] hover:bg-[#25d366]/20 transition-colors"
                >
                  <MessageCircle className="h-3.5 w-3.5" />
                  <span>WhatsApp Sprint Desk</span>
                </a>
              )}
            </div>
          </div>
        </div>

        {/* 3. BOTTOM BAR: SYSTEM SPECS, TIMEZONE & COPYRIGHT */}
        <div className="mt-14 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4 font-mono text-[11px] text-muted-foreground">
          <div className="flex flex-wrap items-center gap-3 text-center sm:text-left">
            <span>© {new Date().getFullYear()} {siteSettings?.company_name || "AetherSoft Innovations"}. All rights reserved.</span>
            <span className="hidden sm:inline-block text-border">•</span>
            <span className="text-foreground font-semibold">Beyond The Limits</span>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {currentTime && (
              <div className="flex items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-0.5 text-foreground">
                <Clock className="h-3 w-3 text-[#024d37]" />
                <span>PKT: {currentTime}</span>
              </div>
            )}
            <div className="flex items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-0.5">
              <span>{language?.toUpperCase()}</span>
              <span>/</span>
              <span className="text-[#024d37] font-bold">{currency}</span>
            </div>
            <span className="text-[10px] text-muted-foreground/80">v2.8.0-PROD</span>
          </div>
        </div>
      </div>

      {/* SUBMIT RESUME MODAL */}
      {isResumeModalOpen && (
        <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={() => setIsResumeModalOpen(false)} />
          <div className="relative z-10 w-full max-w-lg rounded-3xl 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">// CAREERS @ AETHERSOFT</span>
                <h3 className="text-lg font-bold font-sans mt-0.5">Submit Your Resume & Portfolio</h3>
              </div>
              <button onClick={() => setIsResumeModalOpen(false)} className="text-muted-foreground hover:text-foreground cursor-pointer">
                <X className="h-5 w-5" />
              </button>
            </div>

            {submitted ? (
              <div className="rounded-2xl 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">Resume Received!</h4>
                <p className="text-xs text-muted-foreground">
                  Our engineering leads review all candidate submissions within 48 hours. Thank you for your interest in AetherSoft Innovations.
                </p>
              </div>
            ) : (
              <form onSubmit={handleResumeSubmit} 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={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full rounded-2xl border border-border bg-muted px-3 py-2.5 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={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full rounded-2xl border border-border bg-muted px-3 py-2.5 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={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      className="w-full rounded-2xl border border-border bg-muted px-3 py-2.5 text-foreground font-sans text-xs focus:border-[#024d37] focus:outline-none"
                    />
                  </div>
                </div>

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

                <div>
                  <label className="text-muted-foreground block mb-1">[PORTFOLIO / GITHUB / LINKEDIN URL]</label>
                  <input
                    type="url"
                    required
                    placeholder="https://github.com/yourusername"
                    value={portfolio}
                    onChange={(e) => setPortfolio(e.target.value)}
                    className="w-full rounded-2xl border border-border bg-muted px-3 py-2.5 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="Provide a public Google Drive resume link or brief summary of your tech stack and experience..."
                    value={resume}
                    onChange={(e) => setResume(e.target.value)}
                    className="w-full rounded-2xl border border-border bg-muted px-3 py-2.5 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={() => setIsResumeModalOpen(false)}
                    className="rounded-full border border-border px-4 py-2 text-xs text-muted-foreground cursor-pointer"
                  >
                    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 hover:bg-[#036549] transition-all cursor-pointer"
                  >
                    Submit Application →
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}
    </footer>
  );
}