'use client';

import {
  AlertTriangle,
  BarChart3,
  Bell,
  Clock,
  GitBranch,
  LayoutDashboard,
  Search,
  Settings,
  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,
  query: Search,
  errors: AlertTriangle,
  slowRequests: Clock,
  trace: GitBranch,
  statistics: BarChart3,
  config: Settings,
  alerts: Bell,
};

const TASK_PATHS: Record<string, string> = {
  overview: '/logs',
  query: '/logs/query',
  errors: '/logs/errors',
  slowRequests: '/logs/slow-requests',
  trace: '/logs/trace',
  statistics: '/logs/statistics',
  config: '/logs/config',
  alerts: '/logs/alerts',
};

export default function LogsHelpPage() {
  const { t } = useTranslation();
  const help = t.logs.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>
  );
}