// 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 { 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 ExecutiveProps = {
  executives: Member[];
};

// Component ========================================================================================================================
export default function Executive({ executives = [] }: ExecutiveProps) {
  // 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 (executives.length === 0) {
    return (
      <>
        <Head>
          <title>Executive Team - Taiwan AI Academy</title>
          <meta name="description" content="Meet our executive team 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 executive members available at this time.</p>
            </div>
          </div>
        </App>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>Executive Team - Taiwan AI Academy</title>
        <meta name="description" content="Meet our executive team at Taiwan AI Academy Foundation" />
        <meta property="og:title" content="Executive Team - Taiwan AI Academy" />
        <meta property="og:description" content="Meet our executive team 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') }
            ]}
          />
        }
      >
        {/* Executive Members Grid */}
        <div className="container pageIndent">
          <div className="grid grid-cols-1 gap-16 md:gap-40 lg:grid-cols-2 lg:gap-x-20">
            {executives.map((executive) => (
              <PeopleExecutiveCard
                key={executive.id}
                portrait={getPortraitUrl(executive.portrait)}
                name={executive.name}
                title={executive.title}
                positions={executive.positions}
                text={executive.text}
                readMoreButton={true}
              />
            ))}
          </div>
        </div>
      </App>
    </>
  );
}
