import { Clock3, History, Sparkles } from "lucide-react";

import type { WorkspaceLogItem } from "../../api/logs";
import { API_BASE_URL } from "../../config/constants";
import { useTranslation } from "../../hooks/useTranslation";
import { Button } from "../ui/button";

const eventBadgeStyles: Record<string, string> = {
  create: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
  update: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
  delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
  restore: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
  archive: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
  unarchive: "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300",
  activate: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300",
  deactivate: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
};

const sectionBadgeStyles: Record<string, string> = {
  workspace: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
  workspace_members: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
  clients: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
  projects: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
  project_members: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
  tags: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
  time_entries: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
  rates: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
  report_exports: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300",
};

const resolveImageUrl = (value?: string | null) => {
  if (!value) return null;
  if (/^https?:\/\//i.test(value)) return value;
  return `${API_BASE_URL.replace(/\/+$/, "")}/${value.replace(/^\/+/, "")}`;
};

export function LogsFeed({
  items,
  total,
  hasMore,
  isLoading,
  isLoadingMore,
  selectedId,
  onOpen,
  onLoadMore,
}: {
  items: WorkspaceLogItem[];
  total: number;
  hasMore: boolean;
  isLoading: boolean;
  isLoadingMore: boolean;
  selectedId: number | null;
  onOpen: (id: number) => void;
  onLoadMore: () => void;
}) {
  const { t, lang } = useTranslation();

  const formatTimestamp = (value: string) =>
    new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(new Date(value));

  const buildSummary = (item: WorkspaceLogItem) => {
    const actor = item.actor?.full_name || t.logs?.unknownActor || "Unknown actor";
    const eventLabel = t.logs?.events?.[item.event] || item.event;
    const sectionLabel = t.logs?.sections?.[item.section] || item.section;
    const target = item.target?.name || "-";
    if (typeof t.logs?.summary === "function") {
      return t.logs.summary(actor, eventLabel, sectionLabel, target);
    }
    return `${actor} ${eventLabel.toLowerCase()} ${target} in ${sectionLabel.toLowerCase()}`;
  };

  const getInitials = (item: WorkspaceLogItem) => {
    const label = item.actor?.full_name || t.logs?.unknownActor || "?";
    return label.trim().charAt(0).toUpperCase();
  };

  if (isLoading) {
    return (
      <div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
        {t.logs?.loading || "Loading logs..."}
      </div>
    );
  }

  if (!items.length) {
    return (
      <div className="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900">
        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
          <History className="h-5 w-5" />
        </div>
        <p className="text-base font-semibold text-slate-900 dark:text-white">
          {t.logs?.empty || "No activity logs found"}
        </p>
        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
          {t.logs?.emptyHint || "Adjust your filters or wait for new workspace activity."}
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
          <div>
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
              {t.logs?.resultsCount?.(total) || `${total} results`}
            </h2>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              {t.logs?.detailsHint || "Select an activity item to inspect the exact field changes."}
            </p>
          </div>
          <div className="hidden items-center gap-2 rounded-2xl bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:bg-slate-800 dark:text-slate-300 sm:flex">
            <Sparkles className="h-4 w-4" />
            <span>{items.length}/{total}</span>
          </div>
        </div>

        <div className="divide-y divide-slate-100 dark:divide-slate-800">
          {items.map((item) => {
            const avatarUrl = resolveImageUrl(item.actor?.profile_picture);
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => onOpen(item.id)}
                className={`flex w-full flex-col gap-3 px-5 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-slate-800/70 ${
                  selectedId === item.id ? "bg-sky-50 dark:bg-sky-950/20" : ""
                }`}
              >
                <div className="flex items-start gap-3">
                  <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-slate-200 text-sm font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                    {avatarUrl ? (
                      <img src={avatarUrl} alt={item.actor?.full_name || "Actor"} className="h-full w-full object-cover" />
                    ) : (
                      <span>{getInitials(item)}</span>
                    )}
                  </div>

                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
                        {buildSummary(item)}
                      </p>
                      <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${sectionBadgeStyles[item.section] || sectionBadgeStyles.workspace}`}>
                        {t.logs?.sections?.[item.section] || item.section}
                      </span>
                      <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${eventBadgeStyles[item.event] || eventBadgeStyles.update}`}>
                        {t.logs?.events?.[item.event] || item.event}
                      </span>
                    </div>

                    <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400">
                      <span className="truncate">{item.target?.name}</span>
                      <span className="inline-flex items-center gap-1">
                        <Clock3 className="h-3.5 w-3.5" />
                        {formatTimestamp(item.timestamp)}
                      </span>
                    </div>

                    {item.preview_changes.length ? (
                      <div className="mt-3 flex flex-wrap gap-2">
                        {item.preview_changes.map((change) => (
                          <span
                            key={`${item.id}-${change.field}`}
                            className="inline-flex max-w-full truncate rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300"
                            title={change.summary}
                          >
                            {change.summary}
                          </span>
                        ))}
                      </div>
                    ) : null}
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {hasMore ? (
        <div className="flex justify-center">
          <Button
            type="button"
            variant="outline"
            onClick={onLoadMore}
            disabled={isLoadingMore}
            className="rounded-2xl px-5"
          >
            {isLoadingMore ? t.loading || "Loading..." : t.logs?.loadMore || "Load more"}
          </Button>
        </div>
      ) : null}
    </div>
  );
}