import { cn } from "@xtablo/shared";
import type { UserTablo } from "@xtablo/shared-types";
import { Button } from "@xtablo/ui/components/button";
import {
  CalendarIcon,
  FolderIcon,
  KanbanIcon,
  LayoutDashboardIcon,
  ListChecksIcon,
  MapIcon,
  MessageCircleIcon,
} from "lucide-react";
import { Link } from "react-router-dom";
import {
  TabloDetailsShell,
  type TabloDetailsShellMetadataItem,
  type TabloDetailsShellTab,
} from "../TabloDetailsShell";
import type { SingleTabloTabId } from "./shared";

const TABS: TabloDetailsShellTab[] = [
  { id: "overview", label: "Aperçu", icon: LayoutDashboardIcon },
  { id: "etapes", label: "Étapes", icon: ListChecksIcon },
  { id: "tasks", label: "Tâches", icon: KanbanIcon },
  { id: "files", label: "Fichiers", icon: FolderIcon },
  { id: "discussion", label: "Discussion", icon: MessageCircleIcon },
  { id: "events", label: "Événements", icon: CalendarIcon },
  { id: "roadmap", label: "Roadmap", icon: MapIcon },
];

type DiscussionAction =
  | {
      kind: "link";
      to: string;
    }
  | {
      kind: "button";
      onClick: () => void;
    };

interface SingleTabloViewProps {
  tablo: Pick<UserTablo, "name" | "created_at" | "status">;
  roleLabel: string;
  statusLabel: string;
  statusBadgeClass: string;
  progress: {
    startedPercentage: number;
    donePercentage: number;
  };
  activeTab: SingleTabloTabId;
  onTabChange: (tabId: SingleTabloTabId) => void;
  hasUnreadDiscussion?: boolean;
  discussionAction?: DiscussionAction;
  canInviteMembers?: boolean;
  onOpenInviteDialog?: () => void;
  children: React.ReactNode;
}

export function SingleTabloView({
  tablo,
  roleLabel,
  statusLabel,
  statusBadgeClass,
  progress,
  activeTab,
  onTabChange,
  hasUnreadDiscussion = false,
  discussionAction,
  canInviteMembers = false,
  onOpenInviteDialog,
  children,
}: SingleTabloViewProps) {
  const metadata: TabloDetailsShellMetadataItem[] = [
    {
      key: "role",
      label: "Rôle",
      value: <span className="text-foreground font-medium">{roleLabel}</span>,
    },
    {
      key: "created-at",
      label: "Créé le",
      value: (
        <span className="text-foreground">
          {new Intl.DateTimeFormat("fr-FR", {
            year: "numeric",
            month: "short",
            day: "2-digit",
          }).format(new Date(tablo.created_at))}
        </span>
      ),
    },
    {
      key: "status",
      label: "Statut",
      value: (
        <span className={cn("px-3 py-1 rounded-full text-xs font-medium", statusBadgeClass)}>
          {statusLabel}
        </span>
      ),
    },
    {
      key: "progress",
      label: "Progression",
      value: (
        <>
          <div className="relative w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
            <div
              className="absolute inset-y-0 left-0 bg-blue-500/40"
              style={{ width: `${progress.startedPercentage}%` }}
            />
            <div
              className="absolute inset-y-0 left-0 bg-green-500"
              style={{ width: `${progress.donePercentage}%` }}
            />
          </div>
          <span className="text-foreground font-medium">{progress.donePercentage}%</span>
        </>
      ),
    },
  ];

  const tabs = TABS.map((tab) =>
    tab.id === "discussion" ? { ...tab, hasUnread: hasUnreadDiscussion } : tab
  );

  const discussionButton =
    discussionAction?.kind === "link" ? (
      <Button
        asChild
        className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
      >
        <Link to={discussionAction.to}>
          <MessageCircleIcon className="w-5 h-5" />
          Discussion
        </Link>
      </Button>
    ) : discussionAction?.kind === "button" ? (
      <Button
        type="button"
        onClick={discussionAction.onClick}
        className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
      >
        <MessageCircleIcon className="w-5 h-5" />
        Discussion
      </Button>
    ) : null;

  const inviteButton =
    canInviteMembers && onOpenInviteDialog ? (
      <Button
        type="button"
        variant="outline"
        onClick={onOpenInviteDialog}
        className="border border-[#804EEC] text-[#804EEC] hover:bg-[#804EEC]/10 font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
      >
        Inviter
      </Button>
    ) : null;

  const headerActions =
    discussionButton || inviteButton ? (
      <>
        {discussionButton}
        {inviteButton}
      </>
    ) : undefined;

  return (
    <TabloDetailsShell
      tablo={tablo}
      metadata={metadata}
      tabs={tabs}
      activeTab={activeTab}
      onTabChange={(tabId) => onTabChange(tabId as SingleTabloTabId)}
      isDiscussionView={activeTab === "discussion"}
      headerActions={headerActions}
    >
      {children}
    </TabloDetailsShell>
  );
}
