'use client';

import * as React from 'react';
import * as Popover from '@radix-ui/react-popover';
import {
  Plus,
  MessageCircle,
  Crosshair,
  MoreHorizontal,
  Bell,
  Settings2,
  UserRound,
} from 'lucide-react';
import { cn } from '@/utils/cn';

import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
type Notification = {
  id: string;
  icon: React.ComponentType<any>;
  iconColor: string;
  title: string;
  description: string;
  time: string;
  hasIndicator?: boolean;
};

const notifications: Notification[] = [
  {
    id: '1',
    icon: UserRound,
    iconColor: 'text-information-base',
    title: 'New Lead Generated',
    description: 'John Smith submitted web form',
    time: '10 minutes ago',
  },
  {
    id: '2',
    icon: Crosshair,
    iconColor: 'text-away-base',
    title: 'Campaign Milestone',
    description: 'Black Friday campaign hit 150% target',
    time: '3 days ago',
    hasIndicator: true,
  },
  {
    id: '3',
    icon: MessageCircle,
    iconColor: 'text-feature-base',
    title: 'Live Chat Interaction',
    description: 'John Smith submitted web form',
    time: '4 days ago',
  },
];

const Divider = ({ className }: { className?: string }) => {
  return (
    <div
      className={cn('text-stroke-soft-200 relative h-0 w-full', className)}
      role='separator'
    >
      <div
        className='absolute left-0 h-px w-full'
        style={{
          background:
            'linear-gradient(90deg, currentColor 4px, transparent 4px) 50% 50% / 8px 1px repeat no-repeat',
        }}
      />
    </div>
  );
};

export default function MarketingNotificationsPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke' className='relative'>
          <Button.Icon as={Bell} />
          <div className='border-stroke-white-0 bg-primary-base shadow-regular-xs absolute top-2.5 right-2.5 size-2 rounded-full border-2' />
        </Button.Root>
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content
          className='bg-bg-white-0 shadow-regular-md mx-4 w-[calc(100vw-32px)] rounded-3xl p-0 will-change-transform min-[480px]:max-w-[420px]'
          sideOffset={5}
        >
          <div className='relative z-10 flex items-center justify-between px-5 py-4'>
            <h5 className='text-label-md text-text-sub-600'>Notifications</h5>
            <CompactButton.Root
              size='large'
              variant='ghost'
              className='text-text-soft-400'
              tabIndex={-1}
            >
              <CompactButton.Icon as={Settings2} />
            </CompactButton.Root>
          </div>

          <div className='px-4'>
            <Divider />
          </div>

          <div className='p-2 pb-0'>
            {notifications.map((notification) => (
              <div
                key={notification.id}
                className='group hover:bg-bg-weak-50 relative rounded-lg p-4'
              >
                <CompactButton.Root
                  size='medium'
                  variant='ghost'
                  className='absolute top-3 right-3 opacity-0 group-hover:opacity-100'
                >
                  <CompactButton.Icon as={MoreHorizontal} />
                </CompactButton.Root>

                <div className='flex items-start gap-4'>
                  <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-9 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                    <notification.icon
                      className={`size-5 ${notification.iconColor}`}
                    />
                  </div>
                  <div className='flex flex-col gap-2'>
                    <div className='flex flex-col gap-1'>
                      <div className='flex items-center gap-2'>
                        <h5 className='text-label-sm text-text-strong-950'>
                          {notification.title}
                        </h5>
                        {notification.hasIndicator && (
                          <div className='bg-primary-base h-1.5 w-1.5 rounded-full'></div>
                        )}
                      </div>
                      <span className='text-paragraph-sm text-text-sub-600'>
                        {notification.description}
                      </span>
                    </div>
                    <span className='text-label-xs text-text-soft-400'>
                      {notification.time}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className='px-5 pt-2 pb-5'>
            <Button.Root
              variant='neutral'
              mode='stroke'
              size='xsmall'
              className='w-full'
            >
              Archive All
            </Button.Root>
          </div>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}