'use client';

import { Linkedin, Mail, Twitter } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Skeleton } from '@/components/ui/skeleton';
import WebLayout from '@/components/web/layout/web-layout';
import type { Photo, Team } from '@/db/schema';

const TeamMemberCard = ({ member }: { member: Team }) => {
  const splitParagraphs = (text: string) => {
    return text.split('\r\n').filter((paragraph) => paragraph.trim() !== '');
  };
  return (
    <div className="grid grid-cols-2 items-center overflow-hidden rounded-lg bg-white shadow-md transition-shadow hover:shadow-lg">
      <div className="relative h-120 overflow-hidden">
        <Image
          alt={member.name}
          className="h-full w-full object-cover object-center"
          height={300}
          src={member.image}
          width={300}
        />
      </div>
      <ScrollArea className="h-[500px]">
        <div className="p-6">
          <h3 className="mb-1 font-semibold text-oki-gray-dark text-xl">
            {member.name}
          </h3>
          <p className="mb-1 font-medium text-oki-blue-dark">{member.title}</p>
          {/* <p className="text-gray-500 text-sm mb-4">{member.department}</p> */}

          {splitParagraphs(member?.about).map((paragraph, index) => (
            <p className="mb-6 text-gray-600" key={`about-me-${index}`}>
              {paragraph}
            </p>
          ))}

          <div className="flex space-x-3">
            {member.linkedin && (
              <a
                className="text-gray-600 transition-colors hover:text-oki-blue-dark"
                href={member.linkedin}
                rel="noopener noreferrer"
                target="_blank"
              >
                <Linkedin size={20} />
              </a>
            )}
            {member.twitter && (
              <a
                className="text-gray-600 transition-colors hover:text-oki-blue-dark"
                href={member.twitter}
                rel="noopener noreferrer"
                target="_blank"
              >
                <Twitter size={20} />
              </a>
            )}
            {member.email && (
              <a
                className="text-gray-600 transition-colors hover:text-oki-blue-dark"
                href={`mailto:${member.email}`}
              >
                <Mail size={20} />
              </a>
            )}
          </div>
        </div>
      </ScrollArea>
    </div>
  );
};

const Teams = () => {
  const [TeamMember, setTeamMember] = useState<Team[]>([]);
  const [loadingTeam, setLoadingTeam] = useState(true);
  const [galleries, setGalleries] = useState<Photo[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const fetchTeams = async () => {
    try {
      const response = await fetch('/api/teams');
      const data = await response.json();
      setTeamMember(data);
    } catch (error) {
      toast.error('Error loading branches');
    } finally {
      setLoadingTeam(false);
    }
  };

  useEffect(() => {
    fetchTeams();
  }, []);

  const fetchGalleries = async () => {
    try {
      const response = await fetch('/api/photos/career');
      const data = await response.json();
      setGalleries(data);
    } catch (error: any) {
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchGalleries();
  }, []);

  const [bgImage, setBgImage] = useState<string>('');

  const fallbackImage = '/images/logo.png'; // Use your own fallback image URL

  useEffect(() => {
    let intervalId: NodeJS.Timeout;

    if (Array.isArray(galleries) && galleries.length > 0) {
      const validImages = galleries
        .map((h) => h?.url?.trim())
        .filter((img) => img); // filter out empty or undefined images

      if (validImages.length > 1) {
        // Set an initial image
        setBgImage(validImages[Math.floor(Math.random() * validImages.length)]);

        intervalId = setInterval(() => {
          const randomImage =
            validImages[Math.floor(Math.random() * validImages.length)];
          setBgImage(randomImage);
        }, 3000); // change every 3 seconds
      } else {
        // Only one image or none available
        setBgImage(validImages[0] || fallbackImage);
      }
    } else {
      setBgImage(fallbackImage);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [galleries]);

  return (
    <WebLayout>
      <div className="bg-oki-gray-light">
        <section
          className="w-full bg-center bg-cover py-20 pt-32 text-white"
          style={{
            backgroundImage: `linear-gradient(to right, rgba(0, 70, 173, 0.85), rgba(0, 160, 233, 0.85)), url(${bgImage})`,
          }}
        >
          <div className="container mx-auto px-4">
            <div className="max-w-3xl">
              <h1 className="mb-6 font-bold text-4xl md:text-5xl">Our Team</h1>
              <p className="text-white/90 text-xl">
                Meet the dedicated professionals who drive O.K. Isokariari
                Nigeria Limited forward with expertise, innovation, and
                commitment to excellence.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto px-4">
            <h2 className="mb-12 text-center font-bold text-3xl text-oki-gray-dark">
              Executive Leadership
            </h2>
            {loadingTeam ? (
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div
                    className="grid grid-cols-2 items-center overflow-hidden rounded-lg bg-white shadow-md"
                    key={i}
                  >
                    <Skeleton className="h-120 w-full" />
                    <div className="space-y-4 p-6">
                      <Skeleton className="h-6 w-3/4" />
                      <Skeleton className="h-4 w-1/2" />
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-5/6" />
                      <Skeleton className="h-4 w-2/3" />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                {TeamMember.map((member) => (
                  <TeamMemberCard key={member.id} member={member} />
                ))}
              </div>
            )}
          </div>
        </section>

        <section className="bg-oki-blue-dark py-16 text-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="mb-6 font-bold text-3xl">Join Our Team</h2>
            <p className="mx-auto mb-8 max-w-2xl text-lg text-white/80">
              We're always looking for talented professionals to join our
              growing team. Explore our current opportunities and become part of
              Nigeria's engineering excellence.
            </p>
            <Link
              className="inline-block rounded-md bg-white px-8 py-4 font-semibold text-oki-blue-dark transition-colors hover:bg-white/90"
              href="/careers"
            >
              View Open Positions
            </Link>
          </div>
        </section>
      </div>
    </WebLayout>
  );
};

export default Teams;