"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import { usePage } from "@inertiajs/react";
import { useState, useRef, useEffect } from "react";

import HomeNavbar from "@/components/homepages/home-nav";
import PageBanner from "@/components/shared/page-banner";
import Footer from "@/components/shared/footer";
import Badge from "@/components/shared/HomePageBadge";
import HomeProjectCard from "@/components/homepages/home-project-cards";

import styles from "./single-project.module.scss";

import { FiCopy, FiMapPin } from "react-icons/fi";

type BankKey = "uba" | "access";

const SingleProject = () => {
  const { project, projects } = usePage().props as any;

  const [activeBank, setActiveBank] = useState<BankKey>("uba");
  const [toast, setToast] = useState("");

  const scrollRef = useRef<HTMLDivElement>(null);

  /* ================= AUTO SLIDER ================= */
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;

    const interval = setInterval(() => {
      el.scrollBy({ left: 280, behavior: "smooth" });

      if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 10) {
        el.scrollTo({ left: 0, behavior: "smooth" });
      }
    }, 3500);

    return () => clearInterval(interval);
  }, []);


  /* ================= HELPERS ================= */
  const format = (num: number) =>
    new Intl.NumberFormat("en-NG").format(num);

  const handleCopy = (text: string, label: string) => {
    navigator.clipboard.writeText(text);
    setToast(`${label} copied`);
    setTimeout(() => setToast(""), 2000);
  };

  const percent = project.progress_percent;
  const amountLeft = project.amount_left;

  const banks: Record<BankKey, any> = {
    uba: {
      name: "United Bank for Africa",
      short: "UBA",
      accountName: "Censers Church Project",
      accountNumber: "1023456789",
      logo: "/uba.png",
    },
    access: {
      name: "Access Bank",
      short: "Access",
      accountName: "Censers Church Project",
      accountNumber: "0123456789",
      logo: "/access.png",
    },
  };

  const currentBank = banks[activeBank];

  return (
    <div className={styles.page}>
      <HomeNavbar />
      <PageBanner title={project.name} />

      {/* TOAST */}
      {toast && <div className={styles.toast}>{toast}</div>}

      <section className={styles.section}>
        <div className={styles.container}>
          
          {/* LEFT */}
          <div className={styles.left}>
            
            <div className={styles.hero}>
              <Badge text="Project" />
              <h2>{project.name}</h2>

              <div className={styles.meta}>
                <FiMapPin />
                <span>{project.location}</span>
              </div>

              <p>{project.description}</p>
            </div>

            {/* FUNDING */}
            <div className={styles.fundingCard}>
              <div className={styles.fundingTop}>
                <h3>Funding Progress</h3>
                <span>{percent}%</span>
              </div>

              <div className={styles.progressBar}>
                <div style={{ width: `${percent}%` }} />
              </div>

              <div className={styles.fundingStats}>
                <div>
                  <span>Raised</span>
                  <h4>₦{format(project.amount_raised)}</h4>
                </div>
                <div>
                  <span>Target</span>
                  <h4>₦{format(project.target_amount)}</h4>
                </div>
                <div>
                  <span>Remaining</span>
                  <h4>₦{format(amountLeft)}</h4>
                </div>
              </div>
            </div>

            {/* TIMELINE */}
            <div className={styles.timeline}>
              <h3>Project Milestones</h3>

              {project?.milestones?.length > 0 ? (
                project.milestones.map((m: any, i: number) => {
                  const isLast = i === project.milestones.length - 1;

                  return (
                    <div key={i} className={styles.timelineItem}>
                      <div className={styles.timelineLeft}>
                        {!isLast && <div className={styles.line} />}
                        <div className={styles.circle} />
                      </div>

                      <div className={styles.timelineCard}>
                        <div className={styles.timelineHeader}>
                          <h4>{m.title}</h4>
                          <span
                            className={`${styles.status} ${
                              isLast ? styles.current : styles.completed
                            }`}
                          >
                            {isLast ? "Current" : "Completed"}
                          </span>
                        </div>

                        <p>{m.description}</p>
                      </div>
                    </div>
                  );
                })
              ) : (
                <p>No milestones yet</p>
              )}
            </div>
          </div>

          {/* RIGHT */}
          <div className={styles.sideWrapper}>
            <div className={styles.side}>
              <div className={styles.donationCard}>
                <h3>Support This Project</h3>
                <p>Make a transfer using the details below</p>

                <div className={styles.tabs}>
                  {(Object.keys(banks) as BankKey[]).map((key) => (
                    <button
                      key={key}
                      className={`${styles.tab} ${
                        activeBank === key ? styles.active : ""
                      }`}
                      onClick={() => setActiveBank(key)}
                    >
                      {banks[key].short}
                    </button>
                  ))}
                </div>

                <div className={styles.account}>
                  <div className={styles.bank}>
                    <img src={currentBank.logo} />
                    <span>{currentBank.name}</span>
                  </div>

                  <div className={styles.row}>
                    <label>Account Name</label>
                    <div>
                      <p>{currentBank.accountName}</p>
                      <FiCopy onClick={() =>
                        handleCopy(currentBank.accountName, "Account name")
                      }/>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <label>Account Number</label>
                    <div>
                      <p>{currentBank.accountNumber}</p>
                      <FiCopy onClick={() =>
                        handleCopy(currentBank.accountNumber, "Account number")
                      }/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* RELATED */}
      <section className={styles.carouselSection}>
        <div className={styles.carouselContainer}>
          
          {/* HEADER */}
          <div className={styles.carouselHeader}>
            <Badge text="Explore" />
            <h3 className={styles.carouselHeadText}>See More Projects</h3>
          </div>

          {/* SLIDER */}
          <div className={styles.sliderWrapper}>
            
            {/* LEFT CONTROL */}
            <button
              className={`${styles.control} ${styles.left}`}
              onClick={() =>
                scrollRef.current?.scrollBy({ left: -300, behavior: "smooth" })
              }
            >
              ←
            </button>

            {/* EDGE FADE LEFT */}
            <div className={`${styles.fade} ${styles.fadeLeft}`} />

            {/* SCROLL AREA */}
            <div className={styles.scroll} ref={scrollRef}>
              {projects?.data?.slice(0, 6).map((p: any) => (
                <div key={p.id} className={styles.cardWrap}>
                  <HomeProjectCard project={p} />
                </div>
              ))}
            </div>

            {/* EDGE FADE RIGHT */}
            <div className={`${styles.fade} ${styles.fadeRight}`} />

            {/* RIGHT CONTROL */}
            <button
              className={`${styles.control} ${styles.right}`}
              onClick={() =>
                scrollRef.current?.scrollBy({ left: 300, behavior: "smooth" })
              }
            >
              →
            </button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default SingleProject;