/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import DashboardLayout from "@/layouts/dashboard";
import styles from "./pastor.module.scss";
import {
  FiCheckCircle,
  FiXCircle,
  FiMapPin,
  FiArrowRight,
  FiCalendar,
  FiRepeat,
  FiClock,
} from "react-icons/fi";

type TransferRecord = {
  branchName: string;
  branchAddress: string;
  transferredDate: string;
  resumptionDate: string;
  endDate: string;
};

const SinglePastor = () => {
  const pastor = {
    name: "Pastor John Doe",
    status: "Active" as "Active" | "Inactive",
    email: "pastor.john@church.com",
    phone: "+234 801 234 5678",
    address: "12 Victory Street, Abuja",
    stateOfOrigin: "Lagos",
    lga: "Ikeja",
    dob: "1985-06-15",
    gender: "Male",
    maritalStatus: "Married",
    highestDegree: "Masters Degree",
    courseOfStudy: "Theology",
    graduationYear: "2010",
    dateJoinedCommission: "2011-01-10",
    ordinationDate: "2012-05-20",
    currentBranch: "Central Church, Abuja",
    leftCommissionDate: "N/A",
    role: "Senior Pastor",
    specialSkills: ["Children Ministry", "Preaching", "Music"],
    transferRecords: [
      {
        branchName: "Branch A",
        branchAddress: "123 Alpha Street, Lagos",
        transferredDate: "2015-01-10",
        resumptionDate: "2015-01-15",
        endDate: "2017-03-20",
      },
      {
        branchName: "Branch B",
        branchAddress: "45 Beta Road, Abuja",
        transferredDate: "2017-04-01",
        resumptionDate: "2017-04-05",
        endDate: "2020-06-30",
      },
      {
        branchName: "Central Church, Abuja",
        branchAddress: "Central Church Compound, Abuja",
        transferredDate: "2020-07-01",
        resumptionDate: "2020-07-05",
        endDate: "Present",
      },
    ] as TransferRecord[],
  };

  const yearsInMinistry =
    new Date().getFullYear() -
    new Date(pastor.dateJoinedCommission).getFullYear();

  const totalTransfers = pastor.transferRecords.length - 1;

  const currentTenure =
    new Date().getFullYear() -
    new Date(
      pastor.transferRecords[pastor.transferRecords.length - 1]
        .resumptionDate
    ).getFullYear();

  return (
    <div className={styles.page}>
      {/* HERO */}
      <div className={styles.hero}>
        <div className={styles.heroTop}>
          <h1>
            Welcome to <span>{pastor.name}</span>
          </h1>

          <div
            className={`${styles.statusBadge} ${
              pastor.status === "Active"
                ? styles.active
                : styles.inactive
            }`}
          >
            {pastor.status === "Active" ? (
              <FiCheckCircle />
            ) : (
              <FiXCircle />
            )}
            {pastor.status}
          </div>
        </div>

        <div className={styles.statsRow}>
          <Stat icon={<FiCalendar />} label="Years in Ministry" value={`${yearsInMinistry} yrs`} />
          <Stat icon={<FiRepeat />} label="Total Transfers" value={`${totalTransfers}`} />
          <Stat icon={<FiClock />} label="Current Tenure" value={`${currentTenure} yrs`} />
        </div>
      </div>

      {/* GRID CONTENT */}
      <div className={styles.gridLayout}>
        <Section title="Bio Data">
          <Info label="Email" value={pastor.email} />
          <Info label="Phone" value={pastor.phone} />
          <Info label="Address" value={pastor.address} />
          <Info label="State of Origin" value={pastor.stateOfOrigin} />
          <Info label="LGA" value={pastor.lga} />
          <Info label="Date of Birth" value={pastor.dob} />
          <Info label="Gender" value={pastor.gender} />
          <Info label="Marital Status" value={pastor.maritalStatus} />
        </Section>

        <Section title="Academic Data">
          <Info label="Highest Degree" value={pastor.highestDegree} />
          <Info label="Course of Study" value={pastor.courseOfStudy} />
          <Info label="Graduation Year" value={pastor.graduationYear} />
        </Section>

        <Section title="Ministry Data">
          <Info label="Joined Commission" value={pastor.dateJoinedCommission} />
          <Info label="Ordination Date" value={pastor.ordinationDate} />
          <Info label="Current Branch" value={pastor.currentBranch} />
          <Info label="Role" value={pastor.role} />
          <Info label="Special Skills" value={pastor.specialSkills.join(", ")} />
        </Section>
      </div>

      {/* TRANSFER TIMELINE */}
      <div className={styles.transferSection}>
        <h2>Transfer Journey</h2>

        <div className={styles.timeline}>
          <div className={styles.verticalLine}></div>
          <div className={styles.movingDot}></div>

          {pastor.transferRecords.map((record, index) => (
            <div key={index} className={styles.timelineItem}>
              <div className={styles.branchAvatar}>
                {record.branchName.charAt(0)}
              </div>

              <div className={styles.branchCard}>
                <h3>{record.branchName}</h3>
                <p className={styles.address}>
                  <FiMapPin /> {record.branchAddress}
                </p>
                <div className={styles.dateRow}>
                  {record.transferredDate} → {record.endDate}
                </div>
              </div>

              {index !== pastor.transferRecords.length - 1 && (
                <div className={styles.arrow}>
                  <FiArrowRight />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

function Section({ title, children }: any) {
  return (
    <div className={styles.card}>
      <h2>{title}</h2>
      <div className={styles.infoGrid}>{children}</div>
    </div>
  );
}

function Info({ label, value }: any) {
  return (
    <div className={styles.infoItem}>
      <span>{label}</span>
      <p>{value}</p>
    </div>
  );
}

function Stat({ icon, label, value }: any) {
  return (
    <div className={styles.statCard}>
      <div className={styles.statIcon}>{icon}</div>
      <div>
        <small>{label}</small>
        <h4>{value}</h4>
      </div>
    </div>
  );
}

SinglePastor.layout = (page: any) => (
  <DashboardLayout title="Pastor Details">{page}</DashboardLayout>
);

export default SinglePastor;