import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { FolderOpen, Inbox } from "lucide-react";
import EmptyState from "../shared/EmptyState";
import ImportFolderStructure from "./ImportFolderStructure";

/** Where the user guide explains how to export a CSV from each bank (#355). */
export const CSV_EXPORT_GUIDE_PATH = "/settings/users#import-export";

export interface ImportEmptyStateProps {
  /**
   * Last segment of the import folder path, never the full path; null when no
   * import folder is configured. With a folder, the empty state speaks of its
   * content (#384: one prop, no separate `hasFolder` to disagree with it).
   */
  folderName: string | null;
  onBrowse: () => void;
  onCreateSample: () => void;
  onRefresh: () => void;
  /** The sample folders are being written: the primary button is disabled. */
  isCreatingSample: boolean;
  /**
   * Highlight the primary action for the getting-started card (#398): "Choose
   * a folder" without a folder, "Create a sample folder" with one.
   */
  onboardingTarget?: boolean;
}

/**
 * Last segment of a filesystem path, whichever separator the OS used, with
 * trailing separators ignored (`C:\Users\max\Relevés\` → `Relevés`). The full
 * path is already shown by the folder card; the empty state only names it.
 */
export function folderNameFromPath(path: string): string {
  const segments = path.split(/[\\/]+/).filter((s) => s.length > 0);
  return segments.length > 0 ? segments[segments.length - 1] : path;
}

/**
 * Empty state of the import page (#356), replacing the empty `SourceList` in
 * both of its situations: no import folder yet (choose one), or a folder with
 * no account sub-folder (create the sample folders, or refresh after dropping
 * files). Both variants show the expected structure of the folder (#422) and
 * link to the bank CSV export guide. Pure: no hook besides `useTranslation`,
 * so it is tested by direct call.
 */
export default function ImportEmptyState({
  folderName,
  onBrowse,
  onCreateSample,
  onRefresh,
  isCreatingSample,
  onboardingTarget,
}: ImportEmptyStateProps) {
  const { t } = useTranslation();

  const details = (
    <>
      <ImportFolderStructure />
      <p className="mt-4 text-center">
        <Link
          to={CSV_EXPORT_GUIDE_PATH}
          className="text-sm text-[var(--primary)] hover:underline"
        >
          {t("import.empty.guideLink")}
        </Link>
      </p>
    </>
  );

  if (folderName === null) {
    return (
      <EmptyState
        icon={<FolderOpen size={40} />}
        title={t("import.empty.noFolder.title")}
        description={t("import.empty.noFolder.description")}
        primaryAction={{ label: t("import.empty.noFolder.cta"), onClick: onBrowse, onboardingTarget }}
      >
        {details}
      </EmptyState>
    );
  }

  return (
    <EmptyState
      icon={<Inbox size={40} />}
      title={t("import.empty.noSources.title")}
      description={t("import.empty.noSources.description", { folderName })}
      primaryAction={{
        label: t("import.empty.createSample"),
        onClick: onCreateSample,
        disabled: isCreatingSample,
        onboardingTarget,
      }}
      secondaryAction={{ label: t("import.empty.refresh"), onClick: onRefresh }}
    >
      {details}
    </EmptyState>
  );
}