'use client';

import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import {
  ArrowLeftRight,
  ArrowUpRight,
  CircleCheckBig,
  LayoutGrid,
  Play,
  Settings2,
} from 'lucide-react';
import Image from 'next/image';

import NewBadgeStrokeAnnouncement from '@/components/landing-page-blocks/announcement/new-badge-stroke-announcement';
import ApexActionMegaMenuHeader from '@/components/landing-page-blocks/navigation/apex-action-mega-menu-header';
import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as FancyButton from '@/components/ui/fancy-button';
import { cn } from '@/utils/cn';

const brands = [
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-1-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-1-400-dark.svg',
    alt: 'Synergy',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-2-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-2-400-dark.svg',
    alt: 'Horizon',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-3-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-3-400-dark.svg',
    alt: 'Catalyst',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-4-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-4-400-dark.svg',
    alt: 'Phoenix',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-6-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-6-400-dark.svg',
    alt: 'Solaris',
  },
];

const features = [
  'Monitor live fund flow',
  'Review monthly outflows',
  'Detect unusual activity',
];

const tabs = [
  { icon: LayoutGrid, label: 'Overview' },
  { icon: Settings2, label: 'Settings' },
  { icon: ArrowLeftRight, label: 'Payment' },
];

function HeroBadge() {
  return (
    <div className='bg-bg-weak-50 flex w-fit items-center gap-2 rounded-[10px] py-1 pr-[9px] pl-1.5'>
      <Badge.Root
        variant='lighter'
        color='blue'
        className='bg-bg-white-0 text-primary-base shadow-complex-10 rounded-[5px] px-1.25 font-semibold'
      >
        NEW
      </Badge.Root>
      <span className='text-label-sm text-text-sub-600'>
        All accounts, global access
      </span>
      <ArrowUpRight className='text-text-soft-400 -ml-[2px] size-4' />
    </div>
  );
}

function Tabs({
  active,
  onChange,
}: {
  active: number;
  onChange: (index: number) => void;
}) {
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const [indicator, setIndicator] = useState({
    left: 0,
    top: 0,
    width: 0,
    height: 0,
  });

  const measure = useCallback(() => {
    const element = tabRefs.current[active];

    if (element) {
      setIndicator({
        left: element.offsetLeft,
        top: element.offsetTop,
        width: element.offsetWidth,
        height: element.offsetHeight,
      });
    }
  }, [active]);

  useLayoutEffect(measure, [measure]);

  useEffect(() => {
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [measure]);

  return (
    <div className='bg-bg-white-0 shadow-colored-gray relative flex w-full gap-1 rounded-[14px] p-1 md:w-fit'>
      <div
        className='bg-bg-weak-50 absolute rounded-[12px] transition-all duration-300 ease-out'
        style={{
          left: indicator.left,
          top: indicator.top,
          width: indicator.width,
          height: indicator.height,
        }}
      />
      {tabs.map((tab, index) => (
        <button
          key={tab.label}
          type='button'
          ref={(element) => {
            tabRefs.current[index] = element;
          }}
          onClick={() => onChange(index)}
          className={cn(
            'relative z-10 flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[12px] px-3 py-2 transition-colors duration-300 md:flex-none md:justify-start',
            active === index ? 'text-text-strong-950' : 'text-text-soft-400',
          )}
        >
          <tab.icon
            className={cn(
              'size-[18px]',
              active === index ? 'text-primary-base' : 'text-text-soft-400',
            )}
          />
          <span className='text-label-sm whitespace-nowrap'>{tab.label}</span>
        </button>
      ))}
    </div>
  );
}

export default function FinanceDataHubHero() {
  const [active, setActive] = useState(1);

  return (
    <div className='bg-bg-white-0 w-full'>
      <style>{`@keyframes finance-data-hub-image-fade{from{opacity:0}to{opacity:1}}`}</style>
      <NewBadgeStrokeAnnouncement
        text='Multi-currency cards are now available for all users'
        variant='lighter'
      />
      <ApexActionMegaMenuHeader announcement={true} />

      <div className='mx-auto w-full max-w-[1600px] px-6 pt-8 pb-0 lg:px-4 lg:py-6'>
        <div className='flex flex-col items-start gap-6 lg:items-center lg:gap-16'>
          <div className='flex w-full flex-col items-start gap-6 lg:items-center lg:gap-7'>
            <div className='flex w-full flex-col items-start gap-4 lg:items-center'>
              <div className='flex w-full flex-col items-start gap-3 lg:items-center'>
                <HeroBadge />
                <h1 className='text-title-h4 lg:text-title-h1 text-text-strong-950 font-[550] lg:text-center'>
                  All your finance data, one hub
                </h1>
              </div>
              <p className='text-paragraph-md text-text-sub-600 w-full lg:text-center'>
                Manage transfers, insights, and audits seamlessly in one place
                for smarter financial control.
              </p>
            </div>

            <div className='flex w-full flex-col gap-4 lg:w-auto lg:flex-row lg:items-center'>
              <FancyButton.Root
                variant='primary'
                size='medium'
                className='shadow-complex-7 bg-primary-base w-full cursor-pointer gap-1.5 rounded-xl pr-3.5 pl-5 after:opacity-0 hover:after:opacity-[.24] lg:w-auto'
              >
                Launch the portal
                <FancyButton.Icon
                  as={ArrowUpRight}
                  className='text-static-white/[0.64] mx-0 size-5'
                />
              </FancyButton.Root>
              <Button.Root
                variant='neutral'
                mode='lighter'
                size='medium'
                className='bg-bg-weak-50 w-full cursor-pointer gap-2 rounded-xl pr-4.5 pl-3.5 lg:w-auto'
              >
                <Button.Icon
                  as={Play}
                  className='text-text-sub-600 mx-0 size-5'
                />
                View the process
              </Button.Root>
            </div>
          </div>

          <div className='flex w-full flex-col items-start gap-8 lg:items-center'>
            <div className='flex flex-col items-start gap-4 lg:flex-row lg:items-center lg:justify-center lg:gap-8'>
              {features.map((feature) => (
                <div key={feature} className='flex items-center gap-3'>
                  <CircleCheckBig className='text-primary-base size-[15px] shrink-0' />
                  <span className='text-label-md text-text-sub-600'>
                    {feature}
                  </span>
                </div>
              ))}
            </div>

            <div className='-mx-6 w-[calc(100%+48px)] lg:mx-0 lg:w-full'>
              <div className='from-bg-weak-25 to-bg-white-0 flex w-full flex-col items-center gap-4 overflow-hidden rounded-[24px] bg-gradient-to-b to-50% px-4 pt-4 pb-10 lg:gap-8 lg:pt-10'>
                <Tabs active={active} onChange={setActive} />

                <div className='border-stroke-soft-200 w-full max-w-[1088px] rounded-[40px] border p-2.5'>
                  <div className='bg-bg-weak-50 rounded-[32px] p-2.5'>
                    <div
                      key={active}
                      className='bg-bg-white-0 shadow-colored-gray [animation:finance-data-hub-image-fade_0.35s_ease-out] overflow-hidden rounded-[24px]'
                    >
                      <Image
                        src='https://alignui.com/images/blocks/hero-9-image.png'
                        alt='Finance dashboard'
                        width={1048}
                        height={654}
                        priority
                        className='hidden h-auto w-full md:block'
                      />
                      <Image
                        src='https://alignui.com/images/blocks/hero-9-image-mobile-v2.png'
                        alt='Finance dashboard'
                        width={636}
                        height={1377}
                        priority
                        className='h-auto w-full md:hidden'
                      />
                    </div>
                  </div>
                </div>

                <div className='flex w-full flex-col items-center gap-4 pt-4 lg:gap-6 lg:pt-0'>
                  <p className='text-label-sm text-text-soft-400 text-center'>
                    Trusted solutions for global finance
                  </p>
                  <div className='-mx-4 w-[calc(100%+32px)] lg:mx-0 lg:w-full'>
                    <div className='no-scrollbar flex items-center gap-8 overflow-x-auto px-4 lg:justify-center lg:gap-12 lg:overflow-visible lg:px-0'>
                      {brands.map((brand) => (
                        <div
                          key={brand.alt}
                          className='flex shrink-0 items-center'
                        >
                          <Image
                            src={brand.src}
                            alt={brand.alt}
                            width={106}
                            height={24}
                            className='h-6 w-auto dark:hidden'
                          />
                          <Image
                            src={brand.darkSrc}
                            alt={brand.alt}
                            width={106}
                            height={24}
                            className='hidden h-6 w-auto dark:block'
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}