'use client';

import {
  AlertTriangle,
  BarChart3,
  DollarSign,
  LayoutDashboard,
  List,
  Search,
  Shield,
  type LucideIcon,
} from 'lucide-react';

import {
  ConceptsSection,
  HelpPage,
  IntroSection,
  RolesSection,
  TasksSection,
} from '@/components/help';
import { useTranslation } from '@/hooks/useTranslation';

const TASK_ICONS: Record<string, LucideIcon> = {
  overview: LayoutDashboard,
  logs: List,
  search: Search,
  integrity: Shield,
  financial: DollarSign,
  sensitive: AlertTriangle,
  statistics: BarChart3,
};

const TASK_PATHS: Record<string, string> = {
  overview: '/audit',
  logs: '/audit/logs',
  search: '/audit/search',
  integrity: '/audit/integrity',
  financial: '/audit/financial',
  sensitive: '/audit/sensitive',
  statistics: '/audit/statistics',
};

export default function AuditHelpPage() {
  const { t } = useTranslation();
  const help = t.audit.help;

  return (
    <HelpPage title={help.title} subtitle={help.subtitle}>
      <IntroSection
        title={help.intro.title}
        paragraph={help.intro.paragraph}
        highlights={help.intro.highlights}
      />

      <ConceptsSection
        title={help.concepts.title}
        description={help.concepts.description}
        items={help.concepts.items}
      />

      <RolesSection
        title={help.roles.title}
        description={help.roles.description}
        columnHeaders={help.roles.columnHeaders}
        items={help.roles.items}
      />

      <TasksSection
        title={help.tasks.title}
        description={help.tasks.description}
        cards={help.tasks.cards.map((c) => ({
          ...c,
          path: TASK_PATHS[c.id] ?? '#',
          icon: TASK_ICONS[c.id],
        }))}
      />
    </HelpPage>
  );
}