'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';
import api from '@/lib/api';

interface LeadershipMember {
  id: number;
  name: string;
  position: string;
  bio: string;
  full_bio: string;
  type: string;
  type_label: string;
  image: string;
  image_thumb?: string;
  image_medium?: string;
  image_large?: string;
  email?: string;
  linkedin?: string;
}

export default function LeadershipMemberPage() {
  const params = useParams();
  const id = params?.id as string;

  const [member, setMember] = useState<LeadershipMember | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (id) {
      fetchMember();
    }
  }, [id]);

  const fetchMember = async () => {
    try {
      setLoading(true);
      setError(null);

      const memberId = parseInt(id);
      if (isNaN(memberId)) {
        throw new Error('Invalid member ID');
      }

      const data: any = await api.getLeadershipMember(memberId);
      setMember(data);
    } catch (err: any) {
      console.error('Error fetching leadership member:', err);
      setError(err?.message || 'Failed to load team member');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex min-h-[70vh] items-center justify-center px-4">
          <p className="text-neutral-600">Loading team member...</p>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !member) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex min-h-[70vh] items-center justify-center px-4">
          <div className="max-w-lg text-center">
            <h1 className="text-3xl font-black text-neutral-900">Member not found</h1>
            <p className="mt-3 text-neutral-600">
              {error || 'The team member you are looking for does not exist.'}
            </p>
            <Link
              href="/our-leadership"
              className="mt-6 inline-flex cursor-pointer items-center rounded-lg bg-navy-800 px-6 py-3 text-sm font-bold text-white hover:bg-navy-700"
            >
              Back to SSEOA Team
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  const memberImage = member.image_large || member.image_medium || member.image || '';

  return (
    <div className="min-h-screen bg-white">
      <Header />

      <section className="relative overflow-hidden border-b border-secondary-200 bg-white pt-28 pb-12 sm:pt-32 sm:pb-16">
        <div className="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="pointer-events-none absolute -right-16 bottom-0 h-56 w-56 rounded-full bg-navy-800/5 blur-3xl" />

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Link
            href="/our-leadership"
            className="inline-flex cursor-pointer items-center gap-2 text-sm font-bold text-navy-800 hover:text-primary-600"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Back to SSEOA Team
          </Link>

          <span className="mt-6 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-primary-700">
            <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
            {member.type_label || 'SSEOA Team'}
          </span>

          <h1 className="mt-5 text-4xl font-black leading-tight text-neutral-900 sm:text-5xl md:text-6xl">
            {member.name}
          </h1>
          <p className="mt-4 max-w-2xl text-lg font-semibold text-primary-600">{member.position}</p>
        </div>
      </section>

      <section className="relative overflow-hidden bg-white py-12 md:py-20">
        <div className="pointer-events-none absolute -right-20 top-10 h-72 w-72 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="pointer-events-none absolute -left-16 bottom-0 h-64 w-64 rounded-full bg-navy-800/5 blur-3xl" />

        <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 sm:px-6 lg:grid-cols-12 lg:gap-14 lg:px-8">
          <aside className="lg:col-span-4">
            <div className="overflow-hidden rounded-3xl border border-secondary-200 bg-white lg:sticky lg:top-24">
              {memberImage ? (
                <img
                  src={memberImage}
                  alt={member.name}
                  className="block w-full h-auto"
                />
              ) : (
                <div className="flex h-64 items-center justify-center bg-navy-800 text-3xl font-black text-primary-500">
                  {member.name
                    .split(' ')
                    .map((part) => part[0])
                    .join('')
                    .slice(0, 2)}
                </div>
              )}

              <div className="p-6 sm:p-8">
                <h2 className="text-2xl font-black text-neutral-900">{member.name}</h2>
                <p className="mt-1 text-sm font-semibold text-primary-600">{member.position}</p>
                {member.bio && (
                  <p className="mt-4 text-sm leading-relaxed text-neutral-600">{member.bio}</p>
                )}
                {member.email && (
                  <a
                    href={`mailto:${member.email}`}
                    className="mt-4 block cursor-pointer text-sm font-semibold text-navy-800 hover:text-primary-600"
                  >
                    {member.email}
                  </a>
                )}
                {member.linkedin && (
                  <a
                    href={member.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-2 inline-block cursor-pointer text-sm font-semibold text-navy-800 hover:text-primary-600"
                  >
                    LinkedIn
                  </a>
                )}
              </div>
            </div>
          </aside>

          <div className="lg:col-span-8">
            <div className="rounded-3xl border border-secondary-200 bg-white p-6 sm:p-8 md:p-10">
              <h2 className="text-2xl font-black text-neutral-900">Biography</h2>
              <div
                className="prose prose-lg mt-6 max-w-none text-neutral-700 [&>p]:mb-5 [&>p]:leading-relaxed [&>p:last-child]:mb-0"
                dangerouslySetInnerHTML={{ __html: member.full_bio }}
              />
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}