'use client';

import * as React from 'react';
import {
  AlertTriangle,
  ChevronDown,
  ChevronRight,
  CheckCircle2,
  Info,
  Loader2,
  MoreHorizontal,
  Pencil,
  Trash2,
  XCircle,
} from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as CompactButton from '@/components/ui/compact-button';
import * as Dropdown from '@/components/ui/dropdown';
const Divider = ({ className }: { className?: string }) => {
  return (
    <div className='text-stroke-soft-200 relative h-0 w-full' 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>
  );
};

const sections = [
  {
    id: 'talent-management',
    title: 'Talent Management',
    description: 'Complete talent acquisition and management system.',
    items: [
      {
        id: 'recruitment-process',
        label: 'Recruitment Process',
        status: 'success' as StatusType,
      },
      {
        id: 'performance-management',
        label: 'Performance Management',
        status: 'warning' as StatusType,
      },
      {
        id: 'succession-planning',
        label: 'Succession Planning',
        status: 'default' as StatusType,
      },
    ],
  },
  {
    id: 'employee-experience',
    title: 'Employee Experience',
    description: 'Enhance employee engagement and satisfaction.',
    items: [
      {
        id: 'feedback-systems',
        label: 'Feedback Systems',
        status: 'success' as StatusType,
      },
      {
        id: 'employee-development',
        label: 'Employee Development',
        status: 'error' as StatusType,
      },
      {
        id: 'engagement-metrics',
        label: 'Engagement Metrics',
        status: 'default' as StatusType,
      },
    ],
  },
  {
    id: 'hr-analytics',
    title: 'HR Analytics',
    description: 'Data-driven HR insights and reporting.',
    items: [
      {
        id: 'performance-analytics',
        label: 'Performance Analytics',
        status: 'error' as StatusType,
      },
      {
        id: 'workforce-planning',
        label: 'Workforce Planning',
        status: 'warning' as StatusType,
      },
      {
        id: 'retention-analysis',
        label: 'Retention Analysis',
        status: 'default' as StatusType,
      },
    ],
  },
];

type StatusType = 'success' | 'warning' | 'error' | 'default';

function StatusIcon({ status }: { status: StatusType }) {
  const iconConfig = {
    success: {
      icon: CheckCircle2,
      className: 'text-success-base',
    },
    warning: {
      icon: AlertTriangle,
      className: 'text-warning-base',
    },
    error: {
      icon: XCircle,
      className: 'text-error-base',
    },
    default: {
      icon: Loader2,
      className: 'text-text-disabled-300',
    },
  };

  const config = iconConfig[status];
  const Icon = config.icon;

  return <Icon className={`size-4 shrink-0 ${config.className}`} />;
}

export default function HrServicesCheckboxList() {
  return (
    <div className='w-full max-w-[540px]'>
      <div className='flex items-end justify-between'>
        <div>
          <h2 className='text-label-md text-text-strong-950'>
            HR Management Solutions
          </h2>
          <p className='text-paragraph-sm text-text-sub-600 mt-1'>
            Select services to enhance your HR operations
          </p>
        </div>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='rounded-10 flex w-[120px] items-center gap-0'
        >
          <span className='text-label-sm text-text-sub-600'>All services</span>
          <ChevronDown className='text-text-sub-600 size-5 shrink-0' />
        </Button.Root>
      </div>

      <div className='flex flex-col gap-2.5 pt-5'>
        {sections.map((section) => (
          <label key={section.id} className='block'>
            <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 cursor-pointer rounded-2xl p-4 ring-1 transition duration-200 ease-out hover:shadow-none hover:ring-0'>
              <div className='flex items-start gap-3'>
                <Checkbox.Root id={section.id} />
                <div className='flex flex-1 flex-col gap-1'>
                  <div className='text-label-sm text-text-strong-950'>
                    {section.title}
                  </div>
                  <div className='text-paragraph-xs text-text-sub-600'>
                    {section.description}
                  </div>
                </div>
              </div>

              <div className='mt-3 pl-8'>
                <Divider />
              </div>

              <div className='pl-8'>
                {section.items.map((item, index) => (
                  <React.Fragment key={item.id}>
                    <div
                      className={`flex items-start gap-2 ${
                        index === section.items.length - 1 ? 'pt-3' : 'py-3'
                      }`}
                      tabIndex={-1}
                    >
                      <StatusIcon status={item.status} />
                      <div className='text-label-xs text-text-sub-600 flex-1'>
                        {item.label}
                      </div>
                      <Dropdown.Root>
                        <Dropdown.Trigger asChild>
                          <CompactButton.Root
                            variant='ghost'
                            className='text-text-soft-400 data-[state=open]:text-primary-base size-4 focus:outline-none'
                            tabIndex={-1}
                          >
                            <CompactButton.Icon
                              as={MoreHorizontal}
                              className='size-4'
                              tabIndex={-1}
                            />
                          </CompactButton.Root>
                        </Dropdown.Trigger>
                        <Dropdown.Portal>
                          <Dropdown.Content
                            align='start'
                            side='left'
                            className='rounded-10 shadow-custom-md w-[144px] ring-0'
                          >
                            <Dropdown.Group className='flex flex-col gap-0.5'>
                              <Dropdown.Item className='group hover:bg-bg-weak-50 flex w-full items-center justify-between gap-1.5 rounded-md p-1.5'>
                                <div className='flex items-center gap-1.5'>
                                  <Loader2 className='text-text-soft-400 group-hover:text-text-sub-600 size-4' />
                                  <span className='text-label-xs text-text-sub-600'>
                                    Details
                                  </span>
                                </div>
                                <ChevronRight className='text-text-soft-400 size-4 opacity-0 transition-opacity group-hover:opacity-100' />
                              </Dropdown.Item>
                              <Dropdown.Item className='group hover:bg-bg-weak-50 flex w-full items-center justify-between gap-1.5 rounded-md p-1.5'>
                                <div className='flex items-center gap-1.5'>
                                  <Pencil className='text-text-soft-400 group-hover:text-text-sub-600 size-4' />
                                  <span className='text-label-xs text-text-sub-600'>
                                    Edit
                                  </span>
                                </div>
                                <ChevronRight className='text-text-soft-400 size-4 opacity-0 transition-opacity group-hover:opacity-100' />
                              </Dropdown.Item>
                              <Dropdown.Item className='group hover:bg-bg-weak-50 flex w-full items-center justify-between gap-1.5 rounded-md p-1.5'>
                                <div className='flex items-center gap-1.5'>
                                  <Trash2 className='text-text-soft-400 group-hover:text-text-sub-600 size-4' />
                                  <span className='text-label-xs text-text-sub-600'>
                                    Delete
                                  </span>
                                </div>
                                <ChevronRight className='text-text-soft-400 size-4 opacity-0 transition-opacity group-hover:opacity-100' />
                              </Dropdown.Item>
                            </Dropdown.Group>
                          </Dropdown.Content>
                        </Dropdown.Portal>
                      </Dropdown.Root>
                    </div>
                    {index < section.items.length - 1 && <Divider />}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </label>
        ))}
      </div>
    </div>
  );
}