"use client";

import {
  CircleCheckIcon,
  FileUpIcon,
  HistoryIcon,
  ShieldCheckIcon,
  UserPlusIcon,
  XCircleIcon,
} from "lucide-react";
import type { ReactNode } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import type { ProviderDetail } from "@/types/provider";

import {
  buildActivityTimeline,
  type ActivityEntry,
  type ActivityKind,
} from "./lib/provider-activity";
import { formatDateTime } from "./lib/format";

const ACTIVITY_ICONS: Record<ActivityKind, ReactNode> = {
  registered: <HistoryIcon />,
  verified: <ShieldCheckIcon />,
  documentUploaded: <FileUpIcon />,
  documentApproved: <CircleCheckIcon />,
  documentRejected: <XCircleIcon />,
  memberJoined: <UserPlusIcon />,
};

/**
 * Activity history derived from the record timestamps the API exposes.
 *
 * There is no audit-log endpoint, so account status changes (who suspended
 * whom, and when) cannot be shown here — that needs a backend audit trail.
 */
export function ProviderActivityTab({
  provider,
}: {
  provider: ProviderDetail;
}) {
  const { t } = useTranslation();
  const entries = buildActivityTimeline(provider);

  if (entries.length === 0) {
    return (
      <Card>
        <CardContent>
          <EmptyState
            icon={<HistoryIcon />}
            title={t("providers.detail.activity.emptyTitle")}
            description={t("providers.detail.activity.emptyDescription")}
          />
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("providers.detail.activity.title")}</CardTitle>
        <CardDescription>
          {t("providers.detail.activity.description")}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {entries.map((entry) => (
          <ActivityRow key={entry.id} entry={entry} />
        ))}
      </CardContent>
    </Card>
  );
}

function ActivityRow({ entry }: { entry: ActivityEntry }) {
  const { t, language } = useTranslation();

  // Document names are themselves dictionary keys, so resolve them before
  // interpolating into the activity sentence.
  const params = entry.params?.documentType
    ? { document: t(`providers.documentType.${entry.params.documentType}`) }
    : entry.params;

  return (
    <div className="flex items-start gap-3">
      <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-information-light text-primary-blue [&_svg]:size-4">
        {ACTIVITY_ICONS[entry.kind]}
      </span>
      <div className="flex min-w-0 flex-col gap-1">
        <Typography as="span" variant="body">
          {t(`providers.detail.activity.${entry.kind}`, params)}
        </Typography>
        <Typography as="span" variant="caption" color="secondary">
          {formatDateTime(entry.at, language)}
        </Typography>
      </div>
    </div>
  );
}