// Import ========================================================================================================================
import App from '@/layouts/aia/app-layout';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import PeopleExecutiveCard from '@/components/aia/people-excutive-card';
import PeopleMemberCard from '@/components/aia/people-member-card';
import { Head } from '@inertiajs/react';

// Type Definitions ========================================================================================================================
type Member = {
  id: number;
  portrait: string | null;
  name: string;
  title: string;
  text: string;
  positions: string[];
  member_type: 'board' | 'executive';
  sort: number;
  status: string;
  created_at: string;
  updated_at: string;
};

type PeopleProps = {
  members: Member[];
};

// Component ========================================================================================================================
export default function People({ members = [] }: PeopleProps) {
  // Helper function to get portrait URL with fallback
  const getPortraitUrl = (portrait: string | null): string => {
    if (!portrait) {
      return '/images/img-portrait.png'; // Default placeholder
    }
    return portrait;
  };

  // Empty state handling
  if (members.length === 0) {
    return (
      <>
        <Head>
          <title>Board Members - Taiwan AI Academy</title>
          <meta name="description" content="Meet our board members at Taiwan AI Academy Foundation" />
        </Head>
        <App
          subNav={
            <SectionNavigation
              links={[
                { name: 'About AIA', href: route('about') },
                { name: 'People', href: route('people'), default: true },
                { name: 'Partner with us', href: route('partner') }
              ]}
            />
          }
          pageMeta={
            <PageMeta
              title="People"
              tabs={[
                { name: 'Board Members', href: route('people') },
                { name: 'Executive', href: route('executive') }
              ]}
            />
          }
        >
          <div className="container pageIndent">
            <div className="text-center py-20">
              <p className="text-gray-500">No board members available at this time.</p>
            </div>
          </div>
        </App>
      </>
    );
  }

  // Split members into sections
  const featuredMember = members[0]; // First member - large featured card
  const secondaryMembers = members.slice(1, 3); // Next 2 members - medium cards
  const regularMembers = members.slice(3); // Remaining members - small grid cards

  return (
    <>
      <Head>
        <title>Board Members - Taiwan AI Academy</title>
        <meta name="description" content="Meet our board members at Taiwan AI Academy Foundation" />
        <meta property="og:title" content="Board Members - Taiwan AI Academy" />
        <meta property="og:description" content="Meet our board members at Taiwan AI Academy Foundation" />
      </Head>
      <App
        subNav={
          <SectionNavigation
            links={[
              { name: 'About AIA', href: route('about') },
              { name: 'People', href: route('people'), default: true },
              { name: 'Partner with us', href: route('partner') }
            ]}
          />
        }
        pageMeta={
          <PageMeta
            title="People"
            tabs={[
              { name: 'Board Members', href: route('people') },
              { name: 'Executive', href: route('executive') }
            ]}
          />
        }
      >
        {/* Featured and Secondary Members Section */}
        <div className="container pageIndent">
          <div className="grid grid-cols-1 gap-16 md:gap-64 lg:grid-cols-2 lg:gap-x-20 lg:gap-y-40">
            {/* Featured Member - Full Width */}
            <div className="col-span-1 lg:col-span-2">
              <PeopleExecutiveCard
                customClass="peopleExecutiveCard peopleExecutiveCard--person"
                portrait={getPortraitUrl(featuredMember.portrait)}
                name={featuredMember.name}
                title={featuredMember.title}
                text={featuredMember.text}
                positions={featuredMember.positions}
              />
            </div>

            {/* Secondary Members - Two Columns */}
            {secondaryMembers.map((member, index) => (
              <div key={member.id} className={`col-span-1 lg:col-span-start-${index + 1}`}>
                <PeopleExecutiveCard
                  portrait={getPortraitUrl(member.portrait)}
                  name={member.name}
                  title={member.title}
                  text={member.text}
                  positions={member.positions}
                />
              </div>
            ))}
          </div>
        </div>

        {/* Regular Members Grid */}
        {regularMembers.length > 0 && (
          <div className="container pageSection pageIndent">
            <div className="grid grid-cols-1 gap-20 md:grid-cols-2 lg:grid-cols-4">
              {regularMembers.map((member) => (
                <PeopleMemberCard
                  key={member.id}
                  portrait={getPortraitUrl(member.portrait)}
                  name={member.name}
                  title={member.title}
                  positions={member.positions}
                />
              ))}
            </div>
          </div>
        )}
      </App>
    </>
  );
}
