import React from 'react';
import type { IconType } from 'react-icons';
import {
  LuFileText,
  LuLayoutDashboard,
  LuLink2,
  LuListChecks,
  LuMessageCircle,
} from 'react-icons/lu';

/** Top-level report tabs; ``?tab=`` deep-links a panel. */
export type VisibilityTabId =
  | 'overview'
  | 'prompts'
  | 'content'
  | 'citations'
  | 'chat';

interface VisibilityTabsListProps {
  /** The panel currently on screen. */
  activeTabId: VisibilityTabId;
  /** Called with the panel the merchant picked. */
  onTabChange: (tabId: VisibilityTabId) => void;
  /**
   * ``true`` when the merchant is inside the Citations beta; the tab is
   * hidden entirely otherwise.
   */
  showCitations: boolean;
  /** Articles waiting to be read; badged on the Content tab when non-zero. */
  contentReadyCount: number;
}

/** One entry in the rendered tab strip. */
interface VisibilityTabEntry {
  id: VisibilityTabId;
  label: string;
  Icon: IconType;
  /** Rendered after the label when > 0. */
  badge?: number;
}

/**
 * The report's tab strip. It rides inside the pinned header rather than
 * sitting above the panels, so a merchant three screens down can still
 * switch section; the strip therefore has to survive a narrow phone without
 * either wrapping or squashing its triggers - it swipes sideways instead,
 * with the scrollbar chrome hidden because on a desktop the bar has room and
 * a visible track there is just noise.
 *
 * @param {VisibilityTabsListProps} props - Active tab, handler and badges.
 * @returns {JSX.Element} The tab strip.
 */
const VisibilityTabsList = ({
  activeTabId,
  onTabChange,
  showCitations,
  contentReadyCount,
}: VisibilityTabsListProps): JSX.Element => {
  const tabs: VisibilityTabEntry[] = [
    { id: 'overview', label: 'Overview', Icon: LuLayoutDashboard },
    { id: 'prompts', label: 'Tracked Prompts', Icon: LuListChecks },
    {
      id: 'content',
      label: 'Content',
      Icon: LuFileText,
      badge: contentReadyCount,
    },
    ...(showCitations
      ? [{ id: 'citations' as const, label: 'Citations', Icon: LuLink2 }]
      : []),
    { id: 'chat', label: 'Chat', Icon: LuMessageCircle },
  ];

  return (
    <div
      role="tablist"
      // ``w-fit`` (not ``max-w-full``): the wrapper is a shrink-to-fit flex
      // item, so capping the width against it makes the strip believe it
      // overflows even on a desktop with room to spare.
      className="inline-flex h-9 w-fit max-w-full items-center justify-center gap-0.5 overflow-x-auto rounded-lg bg-gray-100 p-[3px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
    >
      {tabs.map(({ id, label, Icon, badge }) => {
        const isSelected = activeTabId === id;

        return (
          <button
            key={id}
            type="button"
            role="tab"
            aria-selected={isSelected}
            onClick={() => onTabChange(id)}
            className={`inline-flex h-full shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-sm font-medium transition-colors ${
              isSelected
                ? 'bg-white text-gray-900 shadow-sm'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden />
            {label}
            {badge !== undefined && badge > 0 && (
              <span className="ml-0.5 rounded-md bg-emerald-100 px-1.5 py-0.5 text-[11px] font-bold leading-none text-emerald-700">
                {badge}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
};

export default VisibilityTabsList;