import Link from 'next/link';
import Image from 'next/image';
import { getHomepageContent } from '@/lib/homepage-content';

import { NavNode } from '@/lib/navigation';

interface FooterProps {
  navigationTree: NavNode[];
}

async function getGlobalLayoutProps() {
  try {
    const data = await getHomepageContent();
    const content = data?.puckData?.content as any[] | undefined;
    const headerBlock = content?.find((b: any) => b.type === 'SiteHeader');
    const footerBlock = content?.find((b: any) => b.type === 'SiteFooter');
    return {
      logo: headerBlock?.props?.logo || null,
      leftDescription: footerBlock?.props?.leftDescription || null,
      copyrightText: footerBlock?.props?.copyrightText || null,
    };
  } catch {
    return { logo: null, leftDescription: null, copyrightText: null };
  }
}

export async function Footer({ navigationTree }: FooterProps) {
  const { logo, leftDescription, copyrightText } = await getGlobalLayoutProps();
  return (
    <footer className="bg-deep-black border-t border-crimson-red">
      {/* Main footer content */}
      <div className="container mx-auto px-4 py-10 md:py-14">
        <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-8 md:gap-12">
          {/* Left: Logo + Description */}
          <div className="flex flex-col gap-4 max-w-xl">
            <Link href="/" className="inline-block hover:opacity-80 transition-opacity">
              <Image
                src={logo ?? "/logo.png"}
                alt="ten-sura-game.com"
                width={180}
                height={40}
                className="h-10 w-auto object-contain"
              />
            </Link>
            <p className="text-text-light-gray text-sm leading-relaxed">
              {leftDescription ?? '日本発のゲーム攻略メディア「ten-sura-game.com」。メギド72の攻略情報、キャラクター評価、リセマラ情報など、プレイヤーに役立つ情報を分かりやすくお届けします。'}
            </p>
          </div>

          {/* Right: Category links */}
          <div className="flex-shrink-0">
            <h3 className="text-text-white font-semibold text-base mb-4">
              メニュー
            </h3>
            <ul className="flex flex-col gap-2.5">
              {navigationTree.map((node) => (
                <li key={node.id}>
                  <Link
                    href={node.url}
                    target={node.openInNewTab ? '_blank' : undefined}
                    className="text-text-light-gray text-sm hover:text-crimson-red transition-colors"
                  >
                    {node.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom copyright bar */}
      <div className="border-t border-soft-gray-border">
        <div className="container mx-auto px-4 py-5">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
            <p className="text-text-light-gray text-xs">
              {copyrightText ?? '© 2026 ten-sura-game.com. All rights reserved.'}
            </p>
            <div className="flex items-center gap-4">
              {/* Legacy location for hardcoded links. Links are now rendered dynamically in the main navigationTree section above */}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
