"use client";

import { useMemo, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { columns } from "@/components/datatable/overallsummary/columns";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useOverallSummaryReport } from "@/hooks/useOverallSummaryReport";
import { OverallSummaryStatCards } from "@/components/reports/overallsummary/OverallSummaryStatCards";
import { calculateStats } from "@/utils/overall-summary-utils";
import { OverallSummaryReportActions } from "@/components/reports/overallsummary/OverallSummaryReportActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
} from "@/app/reports/constants";

export default function OverallSummary() {
  const {
    data,
    loading,
    error,
    lastRefreshedAt,
    loadData,
  } = useOverallSummaryReport();

  const stats = useMemo(() => calculateStats(data), [data]);

  const handleRefresh = useCallback(() => loadData(), [loadData]);

  const tableData = useMemo(
    () => (Array.isArray(data) ? data : []),
    [data]
  );

  if (loading && !data.length) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Overall Summary"
          description="Consolidated view of every holding across asset classes with up-to-date performance."
          breadcrumbs={[...BREADCRUMBS.overallSummary]}
          actions={
            <OverallSummaryReportActions
              isLoading={true}
              onRefresh={handleRefresh}
              lastRefreshedAt={lastRefreshedAt}
            />
          }
        />

        <div className="mt-10 flex h-64 items-center justify-center">
          <RefreshCw
            className="h-10 w-10 animate-spin"
            style={{ color: REPORT_PRIMARY }}
          />
        </div>
      </div>
    );
  }

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Overall Summary"
        description="Consolidated view of every holding across asset classes with up-to-date performance."
        breadcrumbs={[...BREADCRUMBS.overallSummary]}
        actions={
          <OverallSummaryReportActions
            isLoading={loading}
            onRefresh={handleRefresh}
            lastRefreshedAt={lastRefreshedAt}
          />
        }
      />

      {error && (
        <ErrorMessage
          error={error}
          onDismiss={() => {}}
          className="mt-6"
        />
      )}

      <OverallSummaryStatCards stats={stats} loading={loading} />

      <div className="mt-8 space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-slate-800">
            Report Detail
          </h2>
          <span className="text-xs font-medium text-slate-500">
            {loading
              ? "Loading latest data…"
              : `${stats.holdings.toLocaleString()} records`}
          </span>
        </div>
        <div className="rounded-lg">
          {loading && (
            <div className="flex items-center justify-center rounded-lg border border-slate-200 bg-white py-14 shadow-sm">
              <div className="flex items-center gap-2 text-sm font-medium text-slate-600">
                <RefreshCw
                  className="h-5 w-5 animate-spin"
                  style={{ color: REPORT_PRIMARY }}
                />
                Loading latest data…
              </div>
            </div>
          )}
          <DataTable columns={columns} data={tableData} />
        </div>
      </div>
    </div>
  );
}