'use client';

import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import {
  ArrowUpRight,
  ChartNoAxesCombined,
  FileChartColumn,
  Settings2,
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { cn } from '@/utils/cn';

const tabs = [
  {
    icon: Settings2,
    label: 'Workflow',
    items: [
      {
        name: 'Asana',
        logo: 'https://alignui.com/images/blocks/integrations-logo-asana.svg',
        description:
          'Assign work, set priorities, and keep every project moving.',
      },
      {
        name: 'Monday',
        logo: 'https://alignui.com/images/blocks/integrations-logo-monday.svg',
        description:
          'Build custom boards, automate handoffs, and align your team.',
      },
      {
        name: 'Notion',
        logo: 'https://alignui.com/images/blocks/integrations-logo-notion.svg',
        description: 'Document processes, share specs, and centralize context.',
      },
    ],
  },
  {
    icon: ChartNoAxesCombined,
    label: 'Growth',
    items: [
      {
        name: 'Slack',
        logo: 'https://alignui.com/images/blocks/integrations-logo-slack.svg',
        description:
          'Collaborate in real time, track updates, and keep teams connected.',
      },
      {
        name: 'Linear',
        logo: 'https://alignui.com/images/blocks/integrations-logo-linear.svg',
        description:
          'Streamline task management, track progress, and resolve issues.',
      },
      {
        name: 'ClickUp',
        logo: 'https://alignui.com/images/blocks/integrations-logo-clickup.svg',
        description: 'Plan projects, track milestones, and manage workloads.',
      },
    ],
  },
  {
    icon: FileChartColumn,
    label: 'Reporting',
    items: [
      {
        name: 'Zapier',
        logo: 'https://alignui.com/images/blocks/integrations-logo-zapier.svg',
        description:
          'Connect your stack and push reporting data wherever it belongs.',
      },
      {
        name: 'Mailchimp',
        logo: 'https://alignui.com/images/blocks/integrations-logo-mailchimp.svg',
        description: 'Measure campaign performance and sync audience insights.',
      },
      {
        name: 'Zendesk',
        logo: 'https://alignui.com/images/blocks/integrations-logo-zendesk.svg',
        description:
          'Track support volume, response times, and customer sentiment.',
      },
    ],
  },
];

function IntegrationTabs({
  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) return;

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

  useLayoutEffect(() => {
    measure();

    const observer = new ResizeObserver(measure);
    tabRefs.current.forEach((element) => {
      if (element) observer.observe(element);
    });

    return () => observer.disconnect();
  }, [measure]);

  return (
    <div
      role='tablist'
      aria-label='Integration categories'
      className='bg-bg-white-0 shadow-custom-input relative flex w-full gap-1 rounded-[12px] p-1 lg:w-fit'
    >
      <div
        className='bg-bg-weak-50 absolute rounded-[10px] 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'
          role='tab'
          aria-selected={active === index}
          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-[10px] px-3 py-1.5 transition-colors duration-300 lg:flex-none lg:justify-start',
            active === index ? 'text-text-strong-950' : 'text-text-sub-600',
          )}
        >
          <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 CategorizedWorkflowIntegrations() {
  const [active, setActive] = useState(1);
  const activeTab = tabs[active];

  return (
    <div className='bg-bg-white-0 w-full pt-10 pb-8 lg:py-24'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-center gap-8 px-6 md:px-7'>
        <div className='flex w-full max-w-[600px] flex-col gap-3'>
          <span className='bg-bg-weak-50 text-label-sm text-text-sub-600 w-fit rounded-[9px] px-2.5 py-1'>
            Apps &amp; Integrations
          </span>
          <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550]'>
            Essential integrations for <br className='hidden lg:block' />
            better workflows
          </h2>
        </div>

        <div className='flex w-full max-w-[600px] flex-col items-center gap-6 lg:items-start'>
          <IntegrationTabs active={active} onChange={setActive} />

          <div className='flex w-full flex-col gap-2'>
            {activeTab.items.map((item) => (
              <div
                key={item.name}
                className='bg-bg-weak-50 flex w-full items-start gap-5 rounded-[20px] p-4 lg:p-5'
              >
                <div className='bg-bg-white-0 shadow-custom-input-4 flex shrink-0 items-center rounded-full p-2.5'>
                  <Image
                    src={item.logo}
                    alt={item.name}
                    width={28}
                    height={28}
                    className='size-6 lg:size-7'
                  />
                </div>
                <div className='flex min-w-0 flex-1 flex-col gap-1'>
                  <h3 className='text-label-md text-text-strong-950'>
                    {item.name}
                  </h3>
                  <p className='text-label-sm text-text-sub-600'>
                    {item.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className='flex w-full max-w-[600px] flex-col gap-2'>
          <p className='text-paragraph-sm text-text-sub-600'>
            Have a tool you&rsquo;d like to integrate?
          </p>
          <Link
            href='/'
            className='text-label-sm text-primary-base group flex w-fit items-center gap-1'
          >
            Request tools
            <ArrowUpRight className='size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
          </Link>
        </div>
      </div>
    </div>
  );
}