"use client";

import type { HabitLog } from "@/features/habits/types";
import { HabitCardMenu } from "@/features/habits/components/habit-card-menu";
import { habitsDict } from "@/features/habits/dict";
import { formatLogLocalDate } from "@/features/habits/utils/habit-helpers";

type HabitLogCardProps = {
  log: HabitLog;
  unit?: string | null;
  onEdit: (log: HabitLog) => void;
  onDelete: (log: HabitLog) => void;
};

const statusClasses: Record<HabitLog["status"], string> = {
  COMPLETED: "bg-[#2EC4B6]/15 text-[#2EC4B6]",
  PARTIAL: "bg-[#FF8C42]/15 text-[#FF8C42]",
  SKIPPED: "bg-muted text-muted-foreground",
};

export function HabitLogCard({ log, unit, onEdit, onDelete }: HabitLogCardProps) {
  const statusLabel = habitsDict.logStatuses[log.status];

  return (
    <article className="rounded-[1.75rem] bg-card px-4 py-4 shadow-soft-sm sm:px-5">
      <div className="flex items-start gap-3">
        <div className="min-w-0 flex-1">
          <div className="mb-2 flex flex-wrap items-center gap-2">
            <span
              className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${statusClasses[log.status]}`}
            >
              {statusLabel}
            </span>
            <span className="text-sm font-medium text-foreground">
              {formatLogLocalDate(log.localDate)}
            </span>
          </div>

          {log.value != null ? (
            <p className="text-sm text-muted-foreground">
              {habitsDict.logValueLabel}:{" "}
              <span className="font-medium text-foreground" dir="ltr">
                {log.value.toLocaleString("fa-IR")}
                {unit ? ` ${unit}` : ""}
              </span>
            </p>
          ) : null}

          {log.note ? (
            <p className="mt-2 text-sm text-muted-foreground">{log.note}</p>
          ) : null}
        </div>

        <HabitCardMenu
          onEdit={() => onEdit(log)}
          onDelete={() => onDelete(log)}
        />
      </div>
    </article>
  );
}