'use client';

import { useState, type CSSProperties } from 'react';
import {
  ArrowUpRight,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Info,
  Landmark,
  Play,
  Plus,
  ShieldUser,
  Zap,
} 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 * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as LinkButton from '@/components/ui/link-button';
import * as Select from '@/components/ui/select';
import * as Switch from '@/components/ui/switch';
import * as Textarea from '@/components/ui/textarea';

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-5-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-5-400-dark.svg',
    alt: 'Pulse',
  },
  {
    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',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-7-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-7-400-dark.svg',
    alt: 'Aurora',
  },
];

const paymentMethods = [
  { value: 'wire', label: 'Wire' },
  { value: 'ach', label: 'ACH' },
  { value: 'crypto', label: 'Crypto' },
  { value: 'bank-transfer', label: 'Bank Transfer' },
];

const cardMeta = [
  { icon: Landmark, title: 'Link all accounts' },
  { icon: ShieldUser, title: 'Control payment roles' },
  { icon: Zap, title: 'Send funds instantly' },
];

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'>
        Faster payments, global reach
      </span>
      <ArrowUpRight className='text-text-soft-400 -ml-[2px] size-4' />
    </div>
  );
}

export default function GlobalPaymentNetworkHero() {
  const [activeCard, setActiveCard] = useState(0);
  const ActiveIcon = cardMeta[activeCard].icon;

  return (
    <div className='bg-bg-white-0 w-full'>
      <NewBadgeStrokeAnnouncement
        text='Multi-currency cards are now available for all users'
        variant='lighter'
      />
      <ApexActionMegaMenuHeader announcement={true} />

      <div className='mx-auto w-full max-w-7xl px-6 py-8 md:px-7 lg:py-10'>
        <div className='flex flex-col items-center gap-12 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'>
                  Your complete payment network
                </h1>
              </div>
              <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
                From global transfers to fraud protection, all in one place.
              </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'
              >
                Access the dashboard
                <FancyButton.Icon
                  as={ArrowUpRight}
                  className='text-static-white/[0.64] mx-0 size-5'
                />
              </FancyButton.Root>
              <Button.Root
                variant='primary'
                mode='stroke'
                size='medium'
                className='w-full cursor-pointer rounded-xl lg:w-auto'
              >
                <Button.Icon as={Play} className='size-5' />
                See it in action
              </Button.Root>
            </div>
          </div>

          <div className='flex w-full flex-col items-center gap-8'>
            <div className='-mx-6 w-[calc(100%+48px)] lg:mx-0 lg:w-full'>
              <div className='no-scrollbar flex items-center gap-8 overflow-x-auto px-6 lg:justify-center lg:gap-10 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 className='w-full'>
              <div className='bg-bg-weak-50 mb-4 flex w-full items-center gap-2.5 rounded-[14px] px-3 py-1 lg:hidden'>
                <button
                  type='button'
                  onClick={() =>
                    setActiveCard((previous) => Math.max(0, previous - 1))
                  }
                  disabled={activeCard === 0}
                  className='flex size-5 shrink-0 cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-40'
                  aria-label='Previous card'
                >
                  <ChevronLeft className='text-text-sub-600 size-5' />
                </button>
                <div className='bg-bg-white-0 shadow-colored-gray flex flex-1 items-center justify-center gap-2 rounded-xl px-3 py-2'>
                  <ActiveIcon className='text-primary-base size-5' />
                  <span className='text-label-md text-text-strong-950'>
                    {cardMeta[activeCard].title}
                  </span>
                </div>
                <button
                  type='button'
                  onClick={() =>
                    setActiveCard((previous) => Math.min(2, previous + 1))
                  }
                  disabled={activeCard === 2}
                  className='flex size-5 shrink-0 cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-40'
                  aria-label='Next card'
                >
                  <ChevronRight className='text-text-sub-600 size-5' />
                </button>
              </div>

              <div className='-mr-6 overflow-hidden lg:mr-0 lg:overflow-visible'>
                <div
                  className='flex translate-x-[var(--slide)] items-start gap-2 transition-transform duration-500 ease-out lg:translate-x-0 lg:items-stretch lg:gap-4 xl:gap-6'
                  style={
                    {
                      '--slide': `calc(${activeCard} * (2.5rem - 100vw))`,
                    } as CSSProperties
                  }
                >
                  <div className='bg-bg-weak-50 flex w-[calc(100vw-3rem)] shrink-0 flex-col rounded-[28px] px-2.5 pt-6 pb-2.5 lg:w-auto lg:flex-1 lg:rounded-[32px] lg:px-4 lg:pt-9 lg:pb-4'>
                    <div className='mb-6 flex flex-col px-3.5 lg:px-5 xl:mb-9'>
                      <div className='bg-bg-white-0 shadow-colored-gray mb-5 flex w-fit items-center rounded-[14px] p-2.5 xl:mb-9'>
                        <Landmark className='text-primary-base size-6 lg:size-7' />
                      </div>
                      <div className='flex flex-col'>
                        <h6 className='text-label-lg xl:text-title-h6 text-text-strong-950 mb-2'>
                          Link all accounts
                        </h6>
                        <p className='text-label-sm lg:text-label-md text-text-sub-600 mb-5 xl:mb-8'>
                          Merge your banks, wallets, and cards to see balances
                          in one view
                        </p>
                        <LinkButton.Root
                          className='text-label-sm lg:text-label-md text-text-sub-600 hover:text-text-strong-950 group h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces transition-all duration-300'
                          asChild
                        >
                          <a href='#'>
                            Learn more
                            <LinkButton.Icon
                              as={ArrowUpRight}
                              className='text-primary-base group-hover:text-text-strong-950 size-5 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                            />
                          </a>
                        </LinkButton.Root>
                      </div>
                    </div>
                    <div className='rounded-20 bg-bg-white-0 shadow-colored-gray mt-auto flex flex-1 flex-col gap-3 p-4 lg:gap-6'>
                      <div className='flex flex-1 flex-col gap-4'>
                        <div className='border-stroke-soft-200 flex items-center gap-3 border-b pb-4'>
                          <div className='relative flex'>
                            <div className='shadow-regular-sm absolute top-0 -right-1.5 flex size-4.5'>
                              <Image
                                src='https://alignui.com/images/blocks/star-icon.svg'
                                alt='Verified'
                                width={18}
                                height={18}
                                className='size-4.5 rounded-full object-cover'
                              />
                            </div>
                            <Image
                              src='https://alignui.com/images/blocks/hiw-4-image-1.jpg'
                              alt='James Brown'
                              width={40}
                              height={40}
                              className='size-10 rounded-full object-cover'
                            />
                          </div>
                          <div className='flex flex-1 flex-col gap-1'>
                            <div className='text-label-sm text-text-strong-950'>
                              James Brown
                            </div>
                            <div className='text-paragraph-xs text-text-sub-600'>
                              james@alignui.com
                            </div>
                          </div>
                          <div className='bg-faded-lighter text-faded-base text-label-xs rounded-full px-2 py-0.5'>
                            A-52112
                          </div>
                        </div>
                        <div className='border-stroke-soft-200 flex items-center gap-3 border-b pb-4'>
                          <Image
                            src='https://alignui.com/images/blocks/hiw-4-image-2.jpg'
                            alt='Sophia Williams'
                            width={40}
                            height={40}
                            className='size-10 rounded-full object-cover'
                          />
                          <div className='flex flex-1 flex-col gap-1'>
                            <div className='text-label-sm text-text-strong-950'>
                              Sophia Williams
                            </div>
                            <div className='text-paragraph-xs text-text-sub-600'>
                              +44 01 2345 6789
                            </div>
                          </div>
                          <div className='bg-faded-lighter text-faded-base text-label-xs rounded-full px-2 py-0.5'>
                            A-52132
                          </div>
                        </div>
                        <div className='border-stroke-soft-200 flex items-center gap-3 border-b pb-4'>
                          <Image
                            src='https://alignui.com/images/blocks/hiw-4-image-3.jpg'
                            alt='Emma Wright'
                            width={40}
                            height={40}
                            className='size-10 rounded-full object-cover'
                          />
                          <div className='flex flex-1 flex-col gap-1'>
                            <div className='text-label-sm text-text-strong-950'>
                              Emma Wright
                            </div>
                            <div className='text-paragraph-xs text-text-sub-600'>
                              james@alignui.com
                            </div>
                          </div>
                          <div className='bg-faded-lighter text-faded-base text-label-xs rounded-full px-2 py-0.5'>
                            A-52184
                          </div>
                        </div>
                        <div className='flex items-center gap-3'>
                          <Image
                            src='https://alignui.com/images/blocks/hiw-4-image-4.jpg'
                            alt='Matthew Johnson'
                            width={40}
                            height={40}
                            className='size-10 rounded-full object-cover'
                          />
                          <div className='flex flex-1 flex-col gap-1'>
                            <div className='text-label-sm text-text-strong-950'>
                              Matthew Johnson
                            </div>
                            <div className='text-paragraph-xs text-text-sub-600'>
                              +1 (456) 789-0123
                            </div>
                          </div>
                          <div className='bg-faded-lighter text-faded-base text-label-xs rounded-full px-2 py-0.5'>
                            A-52114
                          </div>
                        </div>
                      </div>
                      <Button.Root
                        variant='neutral'
                        mode='lighter'
                        className='text-label-sm text-text-sub-600 bg-bg-weak-50 flex w-full cursor-pointer items-center justify-center gap-2'
                      >
                        <Button.Icon
                          as={Plus}
                          className='text-text-sub-600 size-5'
                        />
                        New Recipient
                      </Button.Root>
                    </div>
                  </div>

                  <div className='bg-bg-weak-50 flex w-[calc(100vw-3rem)] shrink-0 flex-col rounded-[28px] px-2.5 pt-6 pb-2.5 lg:w-auto lg:flex-1 lg:rounded-[32px] lg:px-4 lg:pt-9 lg:pb-4'>
                    <div className='mb-6 flex flex-col px-3.5 lg:px-5 xl:mb-9'>
                      <div className='bg-bg-white-0 shadow-colored-gray mb-5 flex w-fit items-center rounded-[14px] p-2.5 xl:mb-9'>
                        <ShieldUser className='text-primary-base size-6 lg:size-7' />
                      </div>
                      <div className='flex flex-col'>
                        <h6 className='text-label-lg xl:text-title-h6 text-text-strong-950 mb-2'>
                          Control payment roles
                        </h6>
                        <p className='text-label-sm lg:text-label-md text-text-sub-600 mb-5 xl:mb-8'>
                          Set limits, authorize steps, and assign payment rights
                          by team
                        </p>
                        <LinkButton.Root
                          className='text-label-sm lg:text-label-md text-text-sub-600 hover:text-text-strong-950 group h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces transition-all duration-300'
                          asChild
                        >
                          <a href='#'>
                            Learn more
                            <LinkButton.Icon
                              as={ArrowUpRight}
                              className='text-primary-base group-hover:text-text-strong-950 size-5 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                            />
                          </a>
                        </LinkButton.Root>
                      </div>
                    </div>
                    <div className='rounded-20 bg-bg-white-0 shadow-colored-gray mb-2 flex items-center gap-3.5 p-4'>
                      <Image
                        src='https://alignui.com/images/blocks/hiw-4-image-1.jpg'
                        alt='James Brown'
                        width={40}
                        height={40}
                        className='size-10 rounded-full object-cover'
                      />
                      <div className='flex flex-1 flex-col gap-1'>
                        <div className='text-label-sm text-text-strong-950'>
                          James Brown
                        </div>
                        <div className='text-paragraph-xs text-text-sub-600'>
                          james@alignui.com
                        </div>
                      </div>
                      <LinkButton.Root
                        variant='primary'
                        asChild
                        className='text-label-sm text-primary-base h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces underline-offset-2 transition-all duration-300 hover:text-blue-700 hover:underline focus:underline'
                      >
                        <a href='#'>Edit</a>
                      </LinkButton.Root>
                    </div>
                    <div className='rounded-20 bg-bg-white-0 shadow-colored-gray flex flex-col p-4'>
                      <div className='border-stroke-soft-200 flex w-full flex-col gap-1 border-b border-dashed pb-5'>
                        <Label.Root
                          className='text-label-sm text-text-strong-950'
                          htmlFor='payment-method-network'
                        >
                          Select Payment Method
                          <Info className='text-text-disabled-300 size-5' />
                        </Label.Root>

                        <Select.Root>
                          <Select.Trigger
                            id='payment-method-network'
                            className='text-paragraph-sm text-text-strong-950'
                          >
                            <Select.Value
                              placeholder='Wire'
                              className='text-paragraph-sm text-text-strong-950'
                            />
                          </Select.Trigger>
                          <Select.Content className='text-paragraph-sm text-text-strong-950 w-full'>
                            {paymentMethods.map((item) => (
                              <Select.Item
                                key={item.value}
                                value={item.value}
                                className='text-paragraph-sm text-text-strong-950 w-full'
                              >
                                {item.label}
                              </Select.Item>
                            ))}
                          </Select.Content>
                        </Select.Root>

                        <p className='text-paragraph-xs text-text-sub-600'>
                          Same-day transfer, no fees.
                        </p>
                      </div>
                      <div className='border-stroke-soft-200 mb-5 flex items-center gap-3 border-b border-dashed py-5'>
                        <div className='flex flex-1 flex-row items-center gap-3'>
                          <div className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs relative flex size-10 items-center justify-center rounded-full border'>
                            <Landmark className='text-text-sub-600 size-5' />
                          </div>
                          <div className='flex flex-col gap-1'>
                            <div className='text-label-sm text-text-strong-950'>
                              Summit Finance International
                            </div>
                            <div className='text-paragraph-xs text-text-sub-600'>
                              Account ••9876 · Routing ••5432
                            </div>
                          </div>
                        </div>
                        <LinkButton.Root
                          variant='primary'
                          asChild
                          className='text-label-sm text-primary-base h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces underline-offset-2 transition-all duration-300 hover:text-blue-700 hover:underline focus:underline'
                        >
                          <a href='#'>Edit</a>
                        </LinkButton.Root>
                      </div>
                      <Button.Root
                        variant='neutral'
                        mode='lighter'
                        className='text-label-sm text-text-sub-600 bg-bg-weak-50 flex w-full cursor-pointer items-center justify-center gap-2'
                      >
                        Continue
                      </Button.Root>
                    </div>
                  </div>

                  <div className='bg-bg-weak-50 flex w-[calc(100vw-3rem)] shrink-0 flex-col rounded-[28px] px-2.5 pt-6 pb-2.5 lg:w-auto lg:flex-1 lg:rounded-[32px] lg:px-4 lg:pt-9 lg:pb-4'>
                    <div className='mb-6 flex flex-col px-3.5 lg:px-5 xl:mb-9'>
                      <div className='bg-bg-white-0 shadow-colored-gray mb-5 flex w-fit items-center rounded-[14px] p-2.5 xl:mb-9'>
                        <Zap className='text-primary-base size-6 lg:size-7' />
                      </div>
                      <div className='flex flex-col'>
                        <h6 className='text-label-lg xl:text-title-h6 text-text-strong-950 mb-2'>
                          Send funds instantly
                        </h6>
                        <p className='text-label-sm lg:text-label-md text-text-sub-600 mb-5 xl:mb-8'>
                          Pay clients, partners, and suppliers in seconds
                          without delays
                        </p>
                        <LinkButton.Root
                          className='text-label-sm lg:text-label-md text-text-sub-600 hover:text-text-strong-950 group h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces transition-all duration-300'
                          asChild
                        >
                          <a href='#'>
                            Learn more
                            <LinkButton.Icon
                              as={ArrowUpRight}
                              className='text-primary-base group-hover:text-text-strong-950 size-5 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                            />
                          </a>
                        </LinkButton.Root>
                      </div>
                    </div>
                    <div className='rounded-20 bg-bg-white-0 shadow-colored-gray mb-2 flex items-center gap-3.5 p-4'>
                      <div className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs relative flex size-10 items-center justify-center rounded-full border'>
                        <Landmark className='text-text-sub-600 size-5' />
                      </div>
                      <div className='flex flex-1 flex-col gap-1'>
                        <div className='text-label-sm text-text-strong-950'>
                          Operations Account
                        </div>
                        <div className='text-paragraph-xs text-text-sub-600'>
                          Available: $15,000.00
                        </div>
                      </div>
                      <Button.Root
                        variant='neutral'
                        mode='stroke'
                        className='shadow-regular-xs active:bg-bg-strong-950 flex size-7 cursor-pointer items-center justify-center rounded-[6px]'
                      >
                        <Button.Icon
                          as={ChevronDown}
                          className='text-text-sub-600 group-active:text-text-white-0 size-5'
                        />
                      </Button.Root>
                    </div>
                    <div className='rounded-20 bg-bg-white-0 shadow-colored-gray flex flex-1 flex-col p-4'>
                      <div className='mb-4 flex w-full flex-col gap-1'>
                        <Label.Root
                          className='text-label-sm text-text-strong-950 flex items-center gap-0.25'
                          htmlFor='amount-network'
                        >
                          Enter Amount
                          <Info className='text-text-disabled-300 size-5' />
                        </Label.Root>
                        <Input.Root className='shadow-regular-xs hover:shadow-regular-xs border-stroke-soft-200 hover:[&:not(:has(input:focus)):has(>:only-child)]:before:ring-stroke-soft-200'>
                          <Input.Wrapper>
                            <Input.InlineAffix>$</Input.InlineAffix>
                            <Input.Input
                              id='amount-network'
                              placeholder='0.00'
                              className='text-paragraph-sm text-text-strong-950 placeholder:text-text-soft-400 placeholder:text-paragraph-sm'
                            />
                          </Input.Wrapper>
                        </Input.Root>
                      </div>
                      <div className='mb-4 flex w-full flex-col gap-1'>
                        <Label.Root
                          htmlFor='description-network'
                          className='text-label-sm text-text-strong-950'
                        >
                          Description
                          <Label.Asterisk className='text-primary-base' />
                          <Label.Sub className='text-paragraph-sm text-text-sub-600'>
                            (Optional)
                          </Label.Sub>
                        </Label.Root>

                        <Textarea.Root
                          id='description-network'
                          placeholder='The message you wish to send to the recipient...'
                          className='text-paragraph-sm text-text-strong-950 placeholder:text-text-soft-400 placeholder:text-paragraph-sm shadow-regular-xs'
                        >
                          <Textarea.CharCounter current={0} max={200} />
                        </Textarea.Root>
                      </div>
                      <div className='flex items-center gap-2'>
                        <Switch.Root
                          id='recurring-network'
                          className='[&>div]:group-data-[state=checked]/switch:!bg-primary-base cursor-pointer [&>div]:group-data-[state=checked]/switch:hover:!bg-blue-700'
                        />
                        <Label.Root
                          className='text-paragraph-sm'
                          htmlFor='recurring-network'
                        >
                          Recurring payment
                        </Label.Root>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <p className='text-label-sm text-text-soft-400 hidden text-center lg:block'>
              From secure payments to account sync,{' '}
              <span className='text-text-sub-600'>
                everything runs in one place.
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}