"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { FullPageSpinner } from "@/components/ui/full-page-spinner";
import { Progress } from "@/components/ui/progress";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  useDeleteImportSession,
  useImportSessionResults,
  useImportSessionStats,
  usePauseImportSession,
  useResumeImportSession,
} from "@/lib/hooks/useImportSessions";
import { useTranslation } from "@/lib/i18n/client";
import { formatDistanceToNow } from "date-fns";
import {
  AlertCircle,
  ArrowLeft,
  CheckCircle2,
  Clock,
  ExternalLink,
  FileText,
  Globe,
  Loader2,
  Paperclip,
  Pause,
  Play,
  Trash2,
  Upload,
} from "lucide-react";
import { useInView } from "react-intersection-observer";

import type { ZImportSessionStatus } from "@karakeep/shared/types/importSessions";
import { switchCase } from "@karakeep/shared/utils/switch";

type FilterType =
  | "all"
  | "accepted"
  | "rejected"
  | "skipped_duplicate"
  | "pending";

type SimpleTFunction = (
  key: string,
  options?: Record<string, unknown>,
) => string;

interface ImportSessionResultItem {
  id: string;
  title: string | null;
  url: string | null;
  content: string | null;
  type: string;
  status: string;
  result: string | null;
  resultReason: string | null;
  resultBookmarkId: string | null;
}

function getStatusColor(status: string) {
  switch (status) {
    case "staging":
      return "bg-purple-500/10 text-purple-700 dark:text-purple-400";
    case "pending":
      return "bg-muted text-muted-foreground";
    case "running":
      return "bg-blue-500/10 text-blue-700 dark:text-blue-400";
    case "paused":
      return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
    case "completed":
      return "bg-green-500/10 text-green-700 dark:text-green-400";
    case "failed":
      return "bg-destructive/10 text-destructive";
    default:
      return "bg-muted text-muted-foreground";
  }
}

function getStatusIcon(status: string) {
  switch (status) {
    case "staging":
      return <Upload className="h-4 w-4" />;
    case "pending":
      return <Clock className="h-4 w-4" />;
    case "running":
      return <Loader2 className="h-4 w-4 animate-spin" />;
    case "paused":
      return <Pause className="h-4 w-4" />;
    case "completed":
      return <CheckCircle2 className="h-4 w-4" />;
    case "failed":
      return <AlertCircle className="h-4 w-4" />;
    default:
      return <Clock className="h-4 w-4" />;
  }
}

function getResultBadge(
  status: string,
  result: string | null,
  t: (key: string) => string,
) {
  if (status === "pending") {
    return (
      <Badge
        variant="secondary"
        className="bg-muted text-muted-foreground hover:bg-muted"
      >
        <Clock className="mr-1 h-3 w-3" />
        {t("settings.import_sessions.detail.result_pending")}
      </Badge>
    );
  }
  if (status === "processing") {
    return (
      <Badge
        variant="secondary"
        className="bg-blue-500/10 text-blue-700 hover:bg-blue-500/10 dark:text-blue-400"
      >
        <Loader2 className="mr-1 h-3 w-3 animate-spin" />
        {t("settings.import_sessions.detail.result_processing")}
      </Badge>
    );
  }
  switch (result) {
    case "accepted":
      return (
        <Badge
          variant="secondary"
          className="bg-green-500/10 text-green-700 hover:bg-green-500/10 dark:text-green-400"
        >
          <CheckCircle2 className="mr-1 h-3 w-3" />
          {t("settings.import_sessions.detail.result_accepted")}
        </Badge>
      );
    case "rejected":
      return (
        <Badge
          variant="secondary"
          className="bg-destructive/10 text-destructive hover:bg-destructive/10"
        >
          <AlertCircle className="mr-1 h-3 w-3" />
          {t("settings.import_sessions.detail.result_rejected")}
        </Badge>
      );
    case "skipped_duplicate":
      return (
        <Badge
          variant="secondary"
          className="bg-amber-500/10 text-amber-700 hover:bg-amber-500/10 dark:text-amber-400"
        >
          {t("settings.import_sessions.detail.result_skipped_duplicate")}
        </Badge>
      );
    default:
      return (
        <Badge variant="secondary" className="bg-muted hover:bg-muted">
          —
        </Badge>
      );
  }
}

function getTypeIcon(type: string) {
  switch (type) {
    case "link":
      return <Globe className="h-3 w-3" />;
    case "text":
      return <FileText className="h-3 w-3" />;
    case "asset":
      return <Paperclip className="h-3 w-3" />;
    default:
      return null;
  }
}

function getTypeLabel(type: string, t: SimpleTFunction) {
  switch (type) {
    case "link":
      return t("common.bookmark_types.link");
    case "text":
      return t("common.bookmark_types.text");
    case "asset":
      return t("common.bookmark_types.media");
    default:
      return type;
  }
}

function getTitleDisplay(
  item: {
    title: string | null;
    url: string | null;
    content: string | null;
    type: string;
  },
  noTitleLabel: string,
) {
  if (item.title) {
    return item.title;
  }
  if (item.type === "text" && item.content) {
    return item.content.length > 80
      ? item.content.substring(0, 80) + "…"
      : item.content;
  }
  if (item.url) {
    try {
      const url = new URL(item.url);
      const display = url.hostname + url.pathname;
      return display.length > 60 ? display.substring(0, 60) + "…" : display;
    } catch {
      return item.url.length > 60 ? item.url.substring(0, 60) + "…" : item.url;
    }
  }
  return noTitleLabel;
}

export default function ImportSessionDetail({
  sessionId,
}: {
  sessionId: string;
}) {
  const { t: tRaw } = useTranslation();
  const t = tRaw as SimpleTFunction;
  const router = useRouter();
  const [filter, setFilter] = useState<FilterType>("all");

  const { data: stats, isLoading: isStatsLoading } =
    useImportSessionStats(sessionId);
  const {
    data: resultsData,
    isLoading: isResultsLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useImportSessionResults(sessionId, filter);

  const deleteSession = useDeleteImportSession();
  const pauseSession = usePauseImportSession();
  const resumeSession = useResumeImportSession();

  const { ref: loadMoreRef, inView: loadMoreInView } = useInView();

  useEffect(() => {
    if (loadMoreInView && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [fetchNextPage, hasNextPage, isFetchingNextPage, loadMoreInView]);

  if (isStatsLoading) {
    return <FullPageSpinner />;
  }

  if (!stats) {
    return null;
  }

  const items: ImportSessionResultItem[] =
    resultsData?.pages.flatMap((page) => page.items) ?? [];

  const progress =
    stats.totalBookmarks > 0
      ? ((stats.completedBookmarks + stats.failedBookmarks) /
          stats.totalBookmarks) *
        100
      : 0;

  const canDelete =
    stats.status === "completed" ||
    stats.status === "failed" ||
    stats.status === "paused";
  const canPause = stats.status === "pending" || stats.status === "running";
  const canResume = stats.status === "paused";

  const statusLabels = (s: ZImportSessionStatus) =>
    switchCase(s, {
      staging: t("settings.import_sessions.status.staging"),
      pending: t("settings.import_sessions.status.pending"),
      running: t("settings.import_sessions.status.running"),
      paused: t("settings.import_sessions.status.paused"),
      completed: t("settings.import_sessions.status.completed"),
      failed: t("settings.import_sessions.status.failed"),
    });

  const handleDelete = () => {
    deleteSession.mutateAsync({ importSessionId: sessionId }).then(() => {
      router.push("/settings/import");
    });
  };

  return (
    <div className="flex flex-col gap-6">
      {/* Back link */}
      <Link
        href="/settings/import"
        className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" />
        {t("settings.import_sessions.detail.back_to_import")}
      </Link>

      {/* Header */}
      <div className="rounded-md border bg-background p-4">
        <div className="flex flex-col gap-4">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <h2 className="text-lg font-medium">{stats.name}</h2>
              <p className="mt-1 text-sm text-muted-foreground">
                {t("settings.import_sessions.created_at", {
                  time: formatDistanceToNow(stats.createdAt, {
                    addSuffix: true,
                  }),
                })}
              </p>
            </div>
            <Badge
              className={`${getStatusColor(stats.status)} hover:bg-inherit`}
            >
              {getStatusIcon(stats.status)}
              <span className="ml-1 capitalize">
                {statusLabels(stats.status)}
              </span>
            </Badge>
          </div>

          {/* Progress bar + stats */}
          {stats.totalBookmarks > 0 && (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-sm font-medium text-muted-foreground">
                  {t("settings.import_sessions.progress")}
                </h4>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">
                    {stats.completedBookmarks + stats.failedBookmarks} /{" "}
                    {stats.totalBookmarks}
                  </span>
                  <Badge variant="outline" className="text-xs">
                    {Math.round(progress)}%
                  </Badge>
                </div>
              </div>
              <Progress value={progress} className="h-3" />
              <div className="flex flex-wrap gap-2">
                {stats.completedBookmarks > 0 && (
                  <Badge
                    variant="secondary"
                    className="bg-green-500/10 text-green-700 hover:bg-green-500/10 dark:text-green-400"
                  >
                    <CheckCircle2 className="mr-1.5 h-3 w-3" />
                    {t("settings.import_sessions.badges.completed", {
                      count: stats.completedBookmarks,
                    })}
                  </Badge>
                )}
                {stats.failedBookmarks > 0 && (
                  <Badge
                    variant="secondary"
                    className="bg-destructive/10 text-destructive hover:bg-destructive/10"
                  >
                    <AlertCircle className="mr-1.5 h-3 w-3" />
                    {t("settings.import_sessions.badges.failed", {
                      count: stats.failedBookmarks,
                    })}
                  </Badge>
                )}
                {stats.pendingBookmarks > 0 && (
                  <Badge
                    variant="secondary"
                    className="bg-amber-500/10 text-amber-700 hover:bg-amber-500/10 dark:text-amber-400"
                  >
                    <Clock className="mr-1.5 h-3 w-3" />
                    {t("settings.import_sessions.badges.pending", {
                      count: stats.pendingBookmarks,
                    })}
                  </Badge>
                )}
                {stats.processingBookmarks > 0 && (
                  <Badge
                    variant="secondary"
                    className="bg-blue-500/10 text-blue-700 hover:bg-blue-500/10 dark:text-blue-400"
                  >
                    <Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
                    {t("settings.import_sessions.badges.processing", {
                      count: stats.processingBookmarks,
                    })}
                  </Badge>
                )}
              </div>
            </div>
          )}

          {/* Message */}
          {stats.message && (
            <div className="rounded-lg border bg-muted/50 p-3 text-sm text-muted-foreground dark:bg-muted/20">
              {stats.message}
            </div>
          )}

          {/* Action buttons */}
          <div className="flex items-center justify-end">
            <div className="flex items-center gap-2">
              {canPause && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() =>
                    pauseSession.mutate({ importSessionId: sessionId })
                  }
                  disabled={pauseSession.isPending}
                >
                  <Pause className="mr-1 h-4 w-4" />
                  {t("settings.import_sessions.pause_session")}
                </Button>
              )}
              {canResume && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() =>
                    resumeSession.mutate({ importSessionId: sessionId })
                  }
                  disabled={resumeSession.isPending}
                >
                  <Play className="mr-1 h-4 w-4" />
                  {t("settings.import_sessions.resume_session")}
                </Button>
              )}
              {canDelete && (
                <ActionConfirmingDialog
                  title={t("settings.import_sessions.delete_dialog_title")}
                  description={
                    <div>
                      {t("settings.import_sessions.delete_dialog_description", {
                        name: stats.name,
                      })}
                    </div>
                  }
                  actionButton={(setDialogOpen) => (
                    <Button
                      variant="destructive"
                      onClick={() => {
                        handleDelete();
                        setDialogOpen(false);
                      }}
                      disabled={deleteSession.isPending}
                    >
                      {t("settings.import_sessions.delete_session")}
                    </Button>
                  )}
                >
                  <Button
                    variant="destructive"
                    size="sm"
                    disabled={deleteSession.isPending}
                  >
                    <Trash2 className="mr-1 h-4 w-4" />
                    {t("actions.delete")}
                  </Button>
                </ActionConfirmingDialog>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Filter tabs + Results table */}
      <div className="rounded-md border bg-background p-4">
        <Tabs
          value={filter}
          onValueChange={(v) => setFilter(v as FilterType)}
          className="w-full"
        >
          <TabsList className="mb-4 flex w-full flex-wrap">
            <TabsTrigger value="all">
              {t("settings.import_sessions.detail.filter_all")}
            </TabsTrigger>
            <TabsTrigger value="accepted">
              {t("settings.import_sessions.detail.filter_accepted")}
            </TabsTrigger>
            <TabsTrigger value="rejected">
              {t("settings.import_sessions.detail.filter_rejected")}
            </TabsTrigger>
            <TabsTrigger value="skipped_duplicate">
              {t("settings.import_sessions.detail.filter_duplicates")}
            </TabsTrigger>
            <TabsTrigger value="pending">
              {t("settings.import_sessions.detail.filter_pending")}
            </TabsTrigger>
          </TabsList>
        </Tabs>

        {isResultsLoading ? (
          <FullPageSpinner />
        ) : items.length === 0 ? (
          <p className="rounded-md bg-muted p-4 text-center text-sm text-muted-foreground">
            {t("settings.import_sessions.detail.no_results")}
          </p>
        ) : (
          <div className="flex flex-col gap-2">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>
                    {t("settings.import_sessions.detail.table_title")}
                  </TableHead>
                  <TableHead className="w-[80px]">
                    {t("settings.import_sessions.detail.table_type")}
                  </TableHead>
                  <TableHead className="w-[120px]">
                    {t("settings.import_sessions.detail.table_result")}
                  </TableHead>
                  <TableHead>
                    {t("settings.import_sessions.detail.table_reason")}
                  </TableHead>
                  <TableHead className="w-[100px]">
                    {t("settings.import_sessions.detail.table_bookmark")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="max-w-[300px] truncate font-medium">
                      {getTitleDisplay(
                        item,
                        t("settings.import_sessions.detail.no_title"),
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className="flex w-fit items-center gap-1 text-xs"
                      >
                        {getTypeIcon(item.type)}
                        {getTypeLabel(item.type, t)}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      {getResultBadge(item.status, item.result, t)}
                    </TableCell>
                    <TableCell className="max-w-[200px] truncate text-sm text-muted-foreground">
                      {item.resultReason || "—"}
                    </TableCell>
                    <TableCell>
                      {item.resultBookmarkId ? (
                        <Link
                          href={`/dashboard/preview/${item.resultBookmarkId}`}
                          className="flex items-center gap-1 text-sm text-primary hover:text-primary/80"
                          prefetch={false}
                        >
                          <ExternalLink className="h-3 w-3" />
                          {t("settings.import_sessions.detail.view_bookmark")}
                        </Link>
                      ) : (
                        <span className="text-sm text-muted-foreground">—</span>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            {hasNextPage && (
              <div className="flex justify-center">
                <ActionButton
                  ref={loadMoreRef}
                  ignoreDemoMode={true}
                  loading={isFetchingNextPage}
                  onClick={() => fetchNextPage()}
                  variant="ghost"
                >
                  {t("settings.import_sessions.detail.load_more")}
                </ActionButton>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}