"use client";

import { useLocale } from "@/components/providers/locale-provider";
import type { DashboardActivity, DashboardAgeBucket } from "@/types/dashboard";

type MovementFeedProps = {
  receiptAcceptance: string;
  receiptAcceptanceCopy: string;
  lotAgeDistribution: DashboardAgeBucket[];
  recentActivity: DashboardActivity[];
};

const toneClassMap = {
  moss: "bg-moss",
  teal: "bg-teal-700/80",
  danger: "bg-red-500"
} as const;

export function MovementFeed({
  receiptAcceptance,
  receiptAcceptanceCopy,
  lotAgeDistribution,
  recentActivity
}: MovementFeedProps) {
  const { locale, dict } = useLocale();

  return (
    <section className="space-y-6">
      <article className="ops-card-dark p-6">
        <p className="text-[11px] font-bold uppercase tracking-[0.05em] text-white/70">
          {dict.dashboard.receiptAcceptance}
        </p>
        <p className="mt-5 text-5xl font-semibold tracking-tight text-white">{receiptAcceptance}</p>
        <p className="mt-3 max-w-xs text-[14px] leading-7 text-white/70">
          {receiptAcceptanceCopy}
        </p>
      </article>

      <article className="ops-card p-5">
        <h2 className="ops-title">{dict.dashboard.lotAgeDistribution}</h2>
        <div className="mt-5 space-y-4">
          {lotAgeDistribution.map((item) => (
            <div key={item.label}>
              <div className="mb-1 flex items-center justify-between text-[13px]">
                <span className="font-medium text-slate-600">{item.label}</span>
                <span className="font-semibold text-ink">{item.percentage}%</span>
              </div>
              <div className="h-2 rounded-full bg-slate-100">
                <div
                  className={`h-2 rounded-full ${toneClassMap[item.tone]}`}
                  style={{ width: `${item.percentage}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </article>

      <section className="ops-card p-5">
        <h2 className="ops-title">{dict.dashboard.recentActivity}</h2>
        <div className="mt-4 space-y-3">
          {recentActivity.map((item) => (
            <div
              key={item.id}
              className="rounded border border-line/60 bg-slate-50 px-4 py-4 text-[13px] leading-6 text-slate-600"
            >
              <div className="font-medium text-ink">{item.summary}</div>
              <div className="mt-1 text-xs text-slate-500">
                {new Date(item.occurredAt).toLocaleString(locale === "id" ? "id-ID" : "en-US")}
              </div>
            </div>
          ))}
        </div>
      </section>
    </section>
  );
}
