'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDown, CheckCircle2, Loader2 } from 'lucide-react';

import { FancyQRCode } from '@/components/misc/fancy-qrcode';

import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import { cn } from '@/utils/cn';

export function InputWithButton() {
  return (
    <div className='w-full max-w-[300px]'>
      <div className='flex flex-col gap-1'>
        <Input.Root>
          <Input.Wrapper>
            <Input.Input placeholder='james@alignui.com' />
          </Input.Wrapper>
          <button
            type='button'
            className={cn(
              'bg-bg-weak-50 text-label-sm text-text-sub-600 inline-flex items-center justify-center rounded-none px-3 py-2 whitespace-nowrap ring-1 ring-transparent transition duration-200 ease-out outline-none ring-inset',
              'hover:bg-bg-white-0 hover:text-text-strong-950',
              'focus-visible:bg-bg-white-0 focus-visible:text-text-strong-950 focus-visible:ring-transparent',
            )}
          >
            Send link
          </button>
        </Input.Root>
      </div>
    </div>
  );
}

const StoreSetupWizardAccordion = () => (
  <div className='flex max-w-[624px] flex-col gap-4'>
    <div className='flex w-full flex-col gap-2'>
      <Label.Root>
        Set-up your online store
        <IconInfoCustom className='text-text-disabled-300 size-5' />
      </Label.Root>
      <Accordion.Root
        className='border-stroke-soft-200 bg-bg-white-0 w-full rounded-xl border'
        type='single'
        defaultValue='item-2'
        collapsible
      >
        <Accordion.Item
          value='item-1'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <CheckCircle2 className='text-success-base size-5 shrink-0' />
                <span className='text-label-sm text-text-strong-950 truncate text-left'>
                  Add products
                </span>
                <Badge.Root
                  variant='lighter'
                  color='green'
                  size='medium'
                  className='ml-auto shrink-0'
                >
                  Ready
                </Badge.Root>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Add and manage products in your store effortlessly. Control
                product details, pricing, and inventory levels all in one place.
                Create categories to keep your products organized and easily
                accessible.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-2'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Loader2 className='text-text-soft-400 group-data-[state=open]:text-warning-base size-5 shrink-0 group-data-[state=open]:animate-spin' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  Get the point of sale application
                </span>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='flex flex-col gap-6 pr-[52px] pb-4 pl-[46px] sm:flex-row'>
              <div>
                <p className='text-paragraph-sm text-text-sub-600'>
                  Scan the QR code or send yourself the link to get the app. The
                  mobile app is where you&apos;ll manage orders, track
                  inventory, and view analytics on the go.
                </p>
                <div className='mt-4 flex items-center gap-4'>
                  <InputWithButton />
                </div>
              </div>
              <div className='border-stroke-soft-200 h-[112px] w-[112px] shrink-0 rounded-lg border'>
                <FancyQRCode content='https://alignui.com' size={112} />
              </div>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item
          value='item-3'
          className='hover:bg-bg-weak-50 transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Loader2 className='text-text-soft-400 group-data-[state=open]:text-warning-base size-5 shrink-0 group-data-[state=open]:animate-spin' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  Product price & stock
                </span>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Set competitive prices and monitor inventory levels. Update
                product prices, track stock quantities in real-time, and receive
                low-stock alerts. Manage multiple pricing options and automate
                stock notifications for seamless inventory control.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>

    <div className='flex w-full flex-col gap-2'>
      <Label.Root>
        Store settings
        <IconInfoCustom className='text-text-disabled-300 size-5' />
      </Label.Root>
      <Accordion.Root
        className='border-stroke-soft-200 bg-bg-white-0 w-full rounded-xl border'
        type='single'
        collapsible
      >
        <Accordion.Item
          value='item-1'
          className='hover:bg-bg-weak-50 transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Loader2 className='text-text-soft-400 group-data-[state=open]:text-warning-base size-5 shrink-0 group-data-[state=open]:animate-spin' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  Customize your store-front
                </span>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Customize your store&apos;s appearance and functionality. Choose
                themes, configure layouts, and add features to create a unique
                shopping experience for your customers.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>

    <div className='flex w-full flex-col gap-2'>
      <Label.Root>
        Prepare for launch
        <IconInfoCustom className='text-text-disabled-300 size-5' />
      </Label.Root>
      <Accordion.Root
        className='border-stroke-soft-200 bg-bg-white-0 w-full rounded-xl border'
        type='single'
        collapsible
      >
        <Accordion.Item
          value='item-1'
          className='border-stroke-soft-200 hover:bg-bg-weak-50 border-b transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex w-0 flex-1 items-center gap-2.5'>
                <Loader2 className='text-text-soft-400 group-data-[state=open]:text-warning-base size-5 shrink-0 group-data-[state=open]:animate-spin' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  Set up shipping options
                </span>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Configure multiple shipping methods to meet your customers&apos;
                needs. Set up local and international delivery options, define
                shipping zones, and create flexible pricing rules. Integrate
                with popular carriers for real-time rates and tracking
                capabilities.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item
          value='item-2'
          className='hover:bg-bg-weak-50 transition-colors duration-200 first:rounded-t-xl last:rounded-b-xl data-[state=open]:hover:bg-transparent'
        >
          <Accordion.Trigger className='group flex w-full items-center px-4 py-3.5 text-left'>
            <div className='flex w-full items-center gap-4'>
              <div className='flex flex-1 items-center gap-2.5'>
                <Loader2 className='text-text-soft-400 group-data-[state=open]:text-warning-base size-5 shrink-0 group-data-[state=open]:animate-spin' />
                <span className='text-label-sm text-text-sub-600 group-data-[state=open]:text-text-strong-950 truncate text-left'>
                  Configure tax settings
                </span>
              </div>
              <ChevronDown className='text-text-soft-400 group-data-[state=open]:text-text-sub-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180' />
            </div>
          </Accordion.Trigger>
          <Accordion.Content className='data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown overflow-hidden'>
            <div className='pr-[52px] pb-4 pl-[46px]'>
              <p className='text-paragraph-sm text-text-sub-600'>
                Set up your tax configurations to ensure compliance with local
                and international regulations. Define tax rates for different
                regions, configure tax exemptions, and automate tax calculations
                for various product categories. Stay up-to-date with tax
                reporting and documentation requirements.
              </p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </div>

    <div className='bg-bg-weak-50 flex w-full flex-col items-start gap-4 rounded-xl p-4'>
      <div>
        <div>
          <div className='flex items-center justify-start gap-2'>
            <span className='text-label-sm text-text-strong-950'>
              Boost your online presence
            </span>
            <Badge.Root variant='light' color='purple' size='small'>
              PRO
            </Badge.Root>
          </div>
        </div>
        <p className='text-paragraph-sm text-text-sub-600'>
          Take your e-commerce business to the next level with advanced features
          designed to increase sales and improve customer experience
        </p>
      </div>

      <Button.Root variant='neutral' mode='filled' size='xxsmall'>
        Upgrade
      </Button.Root>
    </div>
  </div>
);

export default StoreSetupWizardAccordion;