import { Separator } from '@/components/ui/separator';
import { useTheme } from '@/context/theme-context';
import { SharedData } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { Link, usePage } from '@inertiajs/react';
import {
  DiscordLogoIcon,
  GithubLogoIcon,
  InstagramLogoIcon,
  TelegramLogoIcon,
  TwitterLogoIcon,
  XLogoIcon,
  YoutubeLogoIcon,
} from '@phosphor-icons/react';

export type DashboardFooterLink = { label: string; href: string };
export type DashboardFooterSocial = { platform: string; href: string };

export interface DashboardFooterProps {
  copyright?: string;
  description?: string;
  links?: DashboardFooterLink[];
  socialLinks?: DashboardFooterSocial[];
  policyLinks?: DashboardFooterLink[];
}

function SocialIcon({
  platform,
  className = 'size-[18px]',
}: {
  platform: string;
  className?: string;
}) {
  switch (platform.toLowerCase()) {
    case 'twitter':
      return <TwitterLogoIcon weight="fill" className={className} />;
    case 'x':
      return <XLogoIcon weight="fill" className={className} />;
    case 'discord':
      return <DiscordLogoIcon weight="fill" className={className} />;
    case 'telegram':
      return <TelegramLogoIcon weight="fill" className={className} />;
    case 'instagram':
      return <InstagramLogoIcon weight="fill" className={className} />;
    case 'github':
      return <GithubLogoIcon weight="fill" className={className} />;
    case 'youtube':
      return <YoutubeLogoIcon weight="fill" className={className} />;
    default:
      return null;
  }
}

export default function DashboardFooter({
  copyright,
  description,
  links = [],
  socialLinks = [],
  policyLinks = [],
}: DashboardFooterProps) {
  const { branding } = usePage<SharedData>().props;
  const { theme } = useTheme();

  const year = new Date().getFullYear();
  const appName = branding.branding?.app_name || 'Platform';
  const copyrightText =
    copyright ?? `© ${year} ${appName}. All rights reserved.`;

  const logo =
    theme === 'dark'
      ? branding.branding?.site_dark_logo
      : branding.branding?.site_light_logo;

  const mid = Math.ceil(links.length / 2);
  const col1 = links.slice(0, mid);
  const col2 = links.slice(mid);

  const hasLinks = links.length > 0;
  const hasSocial = socialLinks.length > 0;
  const hasPolicy = policyLinks.length > 0;

  return (
    <footer className="mt-6 border-t border-black/8 bg-white pt-8 dark:border-white/8 dark:bg-background">
      <div className="container px-4">
        <div className="flex flex-col gap-8 sm:flex-row sm:gap-12">
          <div className="flex min-w-0 shrink-0 flex-col gap-4 sm:max-w-[220px]">
            <Link href="/" prefetch className="flex items-center gap-2">
              {logo ? (
                <img
                  src={getImageUrl(logo)}
                  alt={appName}
                  className="h-7 w-auto object-contain"
                />
              ) : (
                <span className="text-base font-bold text-card-foreground">
                  {appName}
                </span>
              )}
            </Link>

            {description && (
              <p className="text-sm leading-relaxed text-black/50 dark:text-white/50">
                {description}
              </p>
            )}

            {hasSocial && (
              <div className="flex items-center gap-3">
                {socialLinks.map((s, i) => (
                  <a
                    key={i}
                    href={s.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={s.platform}
                    className="text-black/40 transition-colors hover:text-black/70 dark:text-white/40 dark:hover:text-white/70"
                  >
                    <SocialIcon platform={s.platform} />
                  </a>
                ))}
              </div>
            )}
          </div>

          {/* Right - link columns */}
          {hasLinks && (
            <div className="flex flex-1 gap-8 sm:justify-end">
              <div className="flex flex-col gap-2.5">
                {col1.map((link, i) => (
                  <Link
                    key={i}
                    href={link.href}
                    prefetch
                    className="text-sm text-black/50 transition-colors hover:text-black/80 dark:text-white/50 dark:hover:text-white/80"
                  >
                    {link.label}
                  </Link>
                ))}
              </div>
              {col2.length > 0 && (
                <div className="flex flex-col gap-2.5">
                  {col2.map((link, i) => (
                    <Link
                      key={i}
                      href={link.href}
                      prefetch
                      className="text-sm text-black/50 transition-colors hover:text-black/80 dark:text-white/50 dark:hover:text-white/80"
                    >
                      {link.label}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        <Separator className="my-6 bg-black/8 dark:bg-white/8" />

        <div className="flex flex-col gap-3 pb-6 text-sm text-black/40 sm:flex-row sm:items-center sm:justify-between dark:text-white/40">
          <span>{copyrightText}</span>
          {hasPolicy && (
            <div className="flex flex-wrap gap-5">
              {policyLinks.map((link, i) => (
                <Link
                  key={i}
                  href={link.href}
                  prefetch
                  className="transition-colors hover:text-black/70 dark:hover:text-white/70"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </footer>
  );
}