import { cn } from "@xtablo/shared";
import type { UserTablo } from "@xtablo/shared-types";

type TabId = string;

export interface TabloDetailsShellTab {
  id: TabId;
  label: string;
  icon: React.ElementType;
  disabled?: boolean;
  hasUnread?: boolean;
}

export interface TabloDetailsShellMetadataItem {
  key: string;
  label: string;
  value: React.ReactNode;
}

interface TabloDetailsShellProps {
  tablo: Pick<UserTablo, "name">;
  headerVisual?: React.ReactNode;
  headerActions?: React.ReactNode;
  metadata: TabloDetailsShellMetadataItem[];
  tabs: TabloDetailsShellTab[];
  activeTab: TabId;
  onTabChange: (tabId: TabId) => void;
  children: React.ReactNode;
  isDiscussionView?: boolean;
}

export function TabloDetailsShell({
  tablo,
  headerVisual,
  headerActions,
  metadata,
  tabs,
  activeTab,
  onTabChange,
  children,
  isDiscussionView = false,
}: TabloDetailsShellProps) {
  return (
    <div className={cn(isDiscussionView && "flex flex-col h-[calc(100vh-75px)]")}>
      <div className="px-4 pt-4">
        <div className="flex flex-col md:flex-row items-start justify-between mb-6 border-b border-[#F2F4F7] dark:border-gray-700 pb-5 gap-5 md:gap-0">
          <div className="flex items-center gap-4">
            {headerVisual}
            <h1 className="text-xl md:text-3xl font-bold text-foreground">{tablo.name}</h1>
          </div>

          {headerActions && (
            <div className="flex items-center gap-3 w-full sm:w-auto">{headerActions}</div>
          )}
        </div>

        <div className="flex flex-wrap items-center gap-3 sm:gap-6 text-sm border-b border-[#F2F4F7] dark:border-gray-700 pb-4 mb-4">
          {metadata.map((item, index) => (
            <div
              key={item.key}
              className={cn(
                "flex items-center gap-2",
                index < metadata.length - 1 &&
                  "sm:border-r border-[#D0D5DD] dark:border-gray-600 sm:pr-4"
              )}
            >
              <span className="text-muted-foreground">{item.label}</span>
              {item.value}
            </div>
          ))}
        </div>
      </div>

      <div className="w-full bg-white dark:bg-background sticky top-0 z-40">
        <div className="px-4 py-2">
          <div className="flex items-center gap-4 sm:gap-6 mb-4 border-b border-[#F2F4F7] dark:border-gray-700 overflow-x-auto scrollbar-none -mx-4 px-4">
            {tabs.map((tab) => {
              const isActive = activeTab === tab.id;
              return (
                <button
                  key={tab.id}
                  type="button"
                  disabled={tab.disabled}
                  onClick={() => !tab.disabled && onTabChange(tab.id)}
                  className={cn(
                    "flex items-center gap-2 pb-3 px-1 text-sm font-semibold transition-colors border-b-2 shrink-0 min-h-[44px]",
                    isActive
                      ? "text-[#804EEC] border-[#804EEC]"
                      : "text-[#667085] border-transparent hover:text-gray-900 dark:hover:text-gray-100",
                    tab.disabled && "opacity-40 cursor-not-allowed"
                  )}
                >
                  <span className="relative inline-flex">
                    <tab.icon className="w-4 h-4" />
                    {tab.hasUnread && (
                      <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-red-500" />
                    )}
                  </span>
                  <span>{tab.label}</span>
                  {tab.disabled && (
                    <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 leading-none">
                      Bientôt
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <div
        className={cn(
          "px-4 sm:px-6 pt-6 pb-8",
          isDiscussionView && "flex flex-col flex-1 min-h-0 !px-0 !pt-0 !pb-0"
        )}
      >
        {children}
      </div>
    </div>
  );
}
