import Link from 'next/link';
import { Compass, Hash } from 'lucide-react';
import type { Locale } from '@/i18n/config';
import { INTL_LOCALE } from '@/i18n/config';
import { chakraMeta } from '@/lib/aura/chakraMeta';
import type { ChakraType } from '@/lib/aura/types';
import type { Service } from '@/lib/reports/services';
import type { ReportSummary } from '@/lib/reports/types';
import { DeleteReportButton } from './DeleteReportButton';

/** One saved report in the account area: photo ring, title, services, date, delete. */
export function ReportCard({
  report,
  locale,
  sessionLabel,
  serviceNames,
}: {
  report: ReportSummary;
  locale: Locale;
  sessionLabel: (name: string) => string;
  serviceNames: Record<Service, string>;
}) {
  const m = report.dominantChakra ? chakraMeta(locale)[report.dominantChakra as ChakraType] : undefined;
  const color = m?.color ?? '#5B6CFF';
  const date = new Intl.DateTimeFormat(INTL_LOCALE[locale], { day: 'numeric', month: 'long', year: 'numeric' }).format(
    new Date(report.createdAt),
  );
  const title = m?.archetype ?? report.services.map((s) => serviceNames[s]).join(' · ');
  const Icon = report.services.includes('bazi') ? Compass : Hash;
  return (
    <li className="group relative flex items-center gap-4 rounded-card bg-surface p-4 shadow-card ring-1 ring-line/70 transition-shadow hover:shadow-card-hover">
      <span
        className="relative size-14 shrink-0 overflow-hidden rounded-full p-[2px]"
        style={{ background: `conic-gradient(${color}, #fff0, ${color})` }}
      >
        {report.photo ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={report.photo} alt="" className="size-full rounded-full object-cover" />
        ) : (
          <span className="flex size-full items-center justify-center rounded-full bg-canvas text-accent">
            <Icon className="size-5" aria-hidden />
          </span>
        )}
      </span>
      <Link href={`/laporan/${report.id}`} className="min-w-0 flex-1 after:absolute after:inset-0">
        <span className="block truncate text-[15px] font-semibold text-ink">{title}</span>
        <span className="mt-0.5 block truncate text-[13px] text-muted">
          {date}
          {report.eventName && ` · ${sessionLabel(report.eventName)}`}
        </span>
        <span className="mt-1.5 flex flex-wrap gap-1">
          {report.services.map((s) => (
            <span key={s} className="rounded-full bg-canvas px-2 py-0.5 text-[10px] font-medium text-ink-soft ring-1 ring-line">
              {serviceNames[s]}
            </span>
          ))}
        </span>
      </Link>
      <span className="relative z-10">
        <DeleteReportButton id={report.id} name={title} />
      </span>
    </li>
  );
}