"use client";

import { MoodDescriptionList } from "@/features/reports/components/mood-description-list";
import { MoodTrendChart } from "@/features/reports/components/mood-trend-chart";
import { ReportsHeader } from "@/features/reports/components/reports-header";
import { reportsDict } from "@/features/reports/dict";
import { useMoodReportLast30Days } from "@/features/reports/hooks/use-mood-report";
import { formatRating } from "@/features/reports/utils/mood-chart-data";
import { panelDict } from "@/features/panel/dict";
import { toPersianDigits } from "@/lib/to-english-digits";

export function ReportsPageContent() {
  const { points, summary, descriptionEntries, isLoading } =
    useMoodReportLast30Days();

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 pb-28 md:pb-6">
      <ReportsHeader />

      <div className="space-y-1 px-4 sm:px-6">
        <p className="text-sm text-muted-foreground">{reportsDict.subtitle}</p>
      </div>

      {isLoading ? (
        <p className="px-4 text-sm text-muted-foreground sm:px-6">{panelDict.loading}</p>
      ) : (
        <div className="flex flex-col gap-4 px-4 sm:px-6">
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div className="rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
              <p className="text-sm text-muted-foreground">{reportsDict.averageDayRating}</p>
              <p className="mt-2 text-2xl font-bold text-card-foreground">
                {formatRating(summary.averageDayRating)}
              </p>
            </div>

            <div className="rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
              <p className="text-sm text-muted-foreground">{reportsDict.loggedDays}</p>
              <p className="mt-2 text-2xl font-bold text-card-foreground">
                {toPersianDigits(summary.loggedDays)}
              </p>
              <p className="mt-1 text-xs text-muted-foreground">
                {reportsDict.outOfDays.replace(
                  "{total}",
                  toPersianDigits(summary.totalDays),
                )}
              </p>
            </div>
          </div>

          <section className="rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
            <div className="mb-4 space-y-1">
              <h2 className="text-base font-semibold text-card-foreground">
                {reportsDict.moodSectionTitle}
              </h2>
              <p className="text-sm text-muted-foreground">
                {reportsDict.moodSectionSubtitle}
              </p>
            </div>

            {summary.loggedDays === 0 ? (
              <p className="py-10 text-center text-sm text-muted-foreground">
                {reportsDict.empty}
              </p>
            ) : (
              <>
                <MoodTrendChart points={points} />
                <MoodDescriptionList entries={descriptionEntries} />
              </>
            )}
          </section>
        </div>
      )}
    </div>
  );
}