/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useEffect, useState } from "react"
import styles from "./branch-card.module.scss"
import logo from "../../../../../public/logo.png"
import { router, useForm } from "@inertiajs/react"

interface BranchProps {
  branch: any
}

const BranchCard: React.FC<BranchProps> = ({ branch }) => {
  const [loading, setLoading] = useState(true)

  const { processing } = useForm<{ branch_id: number }>({
    branch_id: branch.id,
  })

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 700)
    return () => clearTimeout(timer)
  }, [])

  const clipText = (text: string, max: number) => {
    if (!text) return ""
    return text.length > max ? text.slice(0, max) + "..." : text
  }

  const formatDate = (date: string) => {
    const d = new Date(date)

    const options: Intl.DateTimeFormatOptions = {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
    }

    const formatted = d.toLocaleDateString("en-US", options)

    const day = d.getDate()
    const suffix =
      day % 10 === 1 && day !== 11
        ? "st"
        : day % 10 === 2 && day !== 12
        ? "nd"
        : day % 10 === 3 && day !== 13
        ? "rd"
        : "th"

    return formatted.replace(day.toString(), `${day}${suffix}`)
  }

  const handleRedirect = () => {
    router.post(
          route("admin.switch-branch", branch.id),
          {},
          {
            preserveScroll: true,
            onStart: () => {
              // 👇 temporary flash (before backend response)
              window.dispatchEvent(
                new CustomEvent("flash", {
                  detail: { type: "info", message: "Switching branch..." },
                })
              );
            },
          }
        );        
  }

  if (loading) {
    return (
      <div className={`${styles.branchCard} ${styles.skeleton}`}>
        <div style={{ display: "flex", gap: "8px" }}>
          <div className={styles.skeletonLogo}></div>
          <div style={{ width: "100%" }}>
            <div className={styles.skeletonLine}></div>
          </div>
        </div>

        <div className={styles.skeletonLine}></div>
        <div className={styles.skeletonLine}></div>
        <div className={styles.skeletonLine}></div>

        <div className={styles.skeletonButton}></div>
      </div>
    )
  }

  return (
    <div className={styles.branchCard}>
      {/* STATUS */}
      <span className={styles.branchCard__status}>Active</span>

      {/* HEADER */}
      <div className={styles.branchCard__header}>
        <img src={logo} className={styles.branchCard__logo} />
        <span className={styles.branchCard__name}>{branch.name}</span>
      </div>

      {/* DETAILS */}
      <div className={styles.branchCard__details}>
        <div className={styles.branchCard__row}>
          <strong>Address:</strong> {clipText(branch.address, 50)}
        </div>

        <div className={styles.branchCard__row}>
          <strong>Pastor:</strong> {branch.pastor_in_charge}
        </div>

        <div className={styles.branchCard__row}>
          <strong>State:</strong> {branch.state} State
        </div>
      </div>

      {/* DIVIDER */}
      <hr className={styles.branchCard__divider} />

      {/* FOOTER */}
      <div className={styles.branchCard__footer}>
        <strong>Created At:</strong> {formatDate(branch.created_at)}
      </div>

      {/* BUTTON */}
      <button
        className={styles.branchCard__button}
        onClick={handleRedirect}
        disabled={processing}
      >
        {processing ? "Opening..." : "Visit Dashboard"}
      </button>
    </div>
  )
}

export default BranchCard