'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { ChevronDown, Search } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as Input from '@/components/ui/input';
import * as ProgressBar from '@/components/ui/progress-bar';
import * as SegmentedControl from '@/components/ui/segmented-control';
import * as StatusBadge from '@/components/ui/status-badge';
const modules = [
  {
    id: 'talent-management',
    title: 'Talent Management',
    description: 'Recruitment, onboarding, and employee lifecycle',
    type: 'Core HR',
    priority: 'Critical',
    progress: 0,
    defaultChecked: true,
    badge: {
      label: 'Critical',
      color: 'failed',
    },
  },
  {
    id: 'performance-reviews',
    title: 'Performance Reviews',
    description: 'Employee evaluations and feedback tracking',
    type: 'Review',
    priority: 'High',
    progress: 60,
    defaultChecked: false,
    badge: {
      label: 'High',
      color: 'pending',
    },
  },
  {
    id: 'documentation',
    title: 'Documentation',
    description: 'Policy management and document control',
    type: 'Policy',
    priority: 'Low',
    progress: 0,
    defaultChecked: false,
    badge: {
      label: 'Medium',
      color: 'information',
    },
  },
  {
    id: 'benefits-admin',
    title: 'Benefits Admin',
    description: 'Compensation and benefits management',
    type: 'Admin',
    priority: 'Low',
    progress: 0,
    defaultChecked: false,
    badge: {
      label: 'Low',
      color: 'completed',
    },
  },
];

export default function HrSystemModulesCheckboxes() {
  const [searchQuery, setSearchQuery] = React.useState('');
  const [activeTab, setActiveTab] = React.useState('core');

  const filteredModules = modules.filter(
    (module) =>
      module.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      module.description.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  return (
    <div className='w-full max-w-[480px]'>
      <div className='mb-4'>
        <h2 className='text-label-md text-text-strong-950'>
          Configure HR System
        </h2>
        <p className='text-paragraph-sm text-text-sub-600 mt-1'>
          Select HR modules, critical ones required
        </p>
      </div>

      <div className='mb-4'>
        <SegmentedControl.Root defaultValue='core' onValueChange={setActiveTab}>
          <SegmentedControl.List>
            <SegmentedControl.Trigger value='core'>
              Core features
            </SegmentedControl.Trigger>
            <SegmentedControl.Trigger value='advanced'>
              Advanced features
            </SegmentedControl.Trigger>
          </SegmentedControl.List>
        </SegmentedControl.Root>
      </div>

      <div className='mb-4 flex items-center justify-between gap-3'>
        <Input.Root size='small'>
          <Input.Wrapper>
            <Input.Icon as={Search} />
            <Input.Input
              type='text'
              placeholder='Search modules...'
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </Input.Wrapper>
        </Input.Root>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='text-label-sm text-text-sub-600 flex items-center gap-1'
        >
          All priorities
          <ChevronDown className='h-4 w-4' />
        </Button.Root>
      </div>

      <div className='mb-4'>
        <div className='flex items-center justify-between'>
          <div className='text-label-sm text-text-strong-950'>
            Configuration progress
          </div>
          <div className='text-paragraph-xs text-text-sub-600'>60%</div>
        </div>
        <ProgressBar.Root value={60} className='mt-1.5' />
        <div className='text-paragraph-xs text-text-sub-600 mt-1.5'>
          In-progress...
        </div>
      </div>

      <div className='flex flex-col gap-2'>
        {filteredModules.map((module) => (
          <label
            key={module.id}
            htmlFor={module.id}
            className='group bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 block cursor-pointer rounded-[14px] p-4 ring-1 transition-all duration-200 hover:shadow-none hover:ring-transparent'
          >
            <div className='flex items-start gap-3'>
              <Checkbox.Root
                id={module.id}
                defaultChecked={module.defaultChecked}
              />
              <div className='w-full'>
                <div className='flex items-start justify-between gap-3'>
                  <div>
                    <div className='flex items-center gap-2'>
                      <div className='flex items-center gap-1'>
                        <div className='text-label-sm text-text-strong-950'>
                          {module.title}
                        </div>
                        <IconInfoCustom className='text-text-disabled-300 size-3' />
                      </div>
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600 mt-1'>
                      {module.description}
                    </div>
                    <div className='group-hover:shadow-custom-xs bg-bg-weak-50 text-paragraph-xs text-text-sub-600 group-hover:bg-bg-white-0 mt-3 inline-flex w-full flex-wrap gap-2 rounded-md px-3 py-1.5 transition-colors duration-200'>
                      <div className='flex items-center gap-1'>
                        <span className='text-paragraph-xs text-text-sub-600'>
                          Type:
                        </span>
                        <span className='text-label-xs text-text-strong-950'>
                          {module.type}
                        </span>
                      </div>
                      <span className='text-text-disabled-300 hidden sm:inline'>
                        ・
                      </span>
                      <div className='flex items-center gap-1'>
                        <span className='text-paragraph-xs text-text-sub-600'>
                          Priority:
                        </span>
                        <span className='text-label-xs text-text-strong-950'>
                          {module.priority}
                        </span>
                      </div>
                      <span className='text-text-disabled-300 hidden sm:inline'>
                        ・
                      </span>
                      <div className='flex items-center gap-1'>
                        <span className='text-paragraph-xs text-text-sub-600'>
                          Progress:
                        </span>
                        <span className='text-label-xs text-text-strong-950'>
                          {module.progress}%
                        </span>
                      </div>
                    </div>
                  </div>
                  <StatusBadge.Root
                    variant='light'
                    status={
                      module.badge.color as
                        | 'failed'
                        | 'pending'
                        | 'completed'
                        | 'disabled'
                    }
                    className={`text-label-xs bg-transparent ${
                      module.badge.color === 'information'
                        ? 'text-information-base'
                        : ''
                    }`}
                  >
                    <StatusBadge.Dot
                      className={
                        module.badge.color === 'information'
                          ? 'text-information-base'
                          : ''
                      }
                    />
                    <span className='text-label-xs'>{module.badge.label}</span>
                  </StatusBadge.Root>
                </div>
              </div>
            </div>
          </label>
        ))}
      </div>
    </div>
  );
}