"use client";

import React, { useMemo, useState, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
import { useAssetAllocationReport } from "@/hooks/useAssetAllocationReport";
import { ByAssetView } from "@/components/reports/assetallocation/ByAssetView";
import { ByBankView } from "@/components/reports/assetallocation/ByBankView";
import {
  getModuleKeysByName,
  getAssetClasses,
  createValueFor,
  createPctOverallForAsset,
  createGetBankPieData,
  createOverallPieData,
} from "@/lib/asset-allocation-utils";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
  REPORT_PRIMARY_HOVER,
} from "@/app/reports/constants";

const VARIANT_OPTIONS = [
  { id: "default", label: "Default", value: "default" },
  { id: "macro", label: "Macro", value: "macro" },
  { id: "bridge", label: "Bridge", value: "bridge" },
] as const;

export default function AssetAllocationReport() {
  const {
    data,
    loading,
    error,
    filters,
    setFilters,
    filterOptions,
    fetchReport,
  } = useAssetAllocationReport();

  const [showFilters, setShowFilters] = useState(false);

  const bankOrder = useMemo(() => {
    if (!data?.bank_total) return [];
    return Object.keys(data.bank_total).filter((k) => data.bank_total![k] !== 0);
  }, [data]);

  const moduleKeysByName = useMemo(() => getModuleKeysByName(data), [data]);
  const assetClasses = useMemo(
    () => getAssetClasses(data, moduleKeysByName),
    [data, moduleKeysByName]
  );
  const valueFor = useMemo(
    () => createValueFor(data, moduleKeysByName),
    [data, moduleKeysByName]
  );
  const pctOverallForAsset = useMemo(
    () => createPctOverallForAsset(data, bankOrder, valueFor),
    [data, bankOrder, valueFor]
  );
  const getBankPieData = useMemo(
    () => createGetBankPieData(data, bankOrder),
    [data, bankOrder]
  );
  const overallPieData = useMemo(
    () => createOverallPieData(data, bankOrder),
    [data, bankOrder]
  );

  const banksList = useMemo(() => {
    if (filterOptions?.banks_with_status) return filterOptions.banks_with_status;
    const banksSource = data?.all_banks || data?.banks;
    if (banksSource && typeof banksSource === "object") {
      return Object.entries(banksSource).map(([bankId, bankName]) => ({
        bank_id: bankId,
        bank_name: bankName as string,
        active: true,
      }));
    }
    return [];
  }, [filterOptions, data]);

  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (filters.variantType && filters.variantType !== "default") count++;
    const totalBanks = banksList.length;
    if (
      totalBanks > 0 &&
      filters.bank_ids.length > 0 &&
      filters.bank_ids.length < totalBanks
    )
      count++;
    return count;
  }, [filters.variantType, filters.bank_ids.length, banksList.length]);

  const handleApplyFilters = useCallback(() => {
    fetchReport(filters);
    setShowFilters(false);
  }, [fetchReport, filters]);

  const handleResetFilters = useCallback(() => {
    const allBankIds = banksList.map((b) => b.bank_id);
    const next = {
      variantType: "default",
      by_bank: false,
      bank_ids: allBankIds,
    };
    setFilters(next);
    fetchReport(next);
  }, [banksList, setFilters, fetchReport]);

  if (loading) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Asset Allocation Report"
          description="Loading…"
          breadcrumbs={[...BREADCRUMBS.assetAllocation]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw
            className="h-8 w-8 animate-spin"
            style={{ color: REPORT_PRIMARY }}
          />
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Asset Allocation Report"
          breadcrumbs={[...BREADCRUMBS.assetAllocation]}
        />
        <div className="py-10 text-center text-red-600">{error}</div>
      </div>
    );
  }

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Asset Allocation Report"
        breadcrumbs={[...BREADCRUMBS.assetAllocation]}
        actions={
          <div className="flex items-center gap-2">
            {banksList.length > 0 && (
              <button
                type="button"
                onClick={() => setShowFilters(!showFilters)}
                className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition-all duration-200 ${
                  showFilters
                    ? "text-white"
                    : "bg-white text-slate-700 hover:text-white"
                }`}
                style={{
                  borderColor: showFilters ? REPORT_PRIMARY : `${REPORT_PRIMARY}66`,
                  backgroundColor: showFilters ? REPORT_PRIMARY : undefined,
                }}
                onMouseEnter={(e) => {
                  if (!showFilters) {
                    e.currentTarget.style.backgroundColor = REPORT_PRIMARY;
                  }
                }}
                onMouseLeave={(e) => {
                  if (!showFilters) {
                    e.currentTarget.style.backgroundColor = "";
                  }
                }}
              >
                <svg
                  className="h-4 w-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                  />
                </svg>
                Filters {activeFilterCount > 0 && `(${activeFilterCount})`}
              </button>
            )}
            <button
              type="button"
              onClick={() => fetchReport()}
              className="inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-semibold text-white transition-colors"
              style={{
                backgroundColor: REPORT_PRIMARY,
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = REPORT_PRIMARY_HOVER;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = REPORT_PRIMARY;
              }}
            >
              <RefreshCw className="h-3.5 w-3.5" />
              Refresh
            </button>
          </div>
        }
      />

      {banksList.length > 0 && showFilters && (
        <ReportFilters
          filters={[
            {
              type: "select",
              label: "Variant Type",
              placeholder: "Select variant type",
              options: [...VARIANT_OPTIONS],
              value: filters.variantType,
              onChange: (value) =>
                setFilters({ ...filters, variantType: value }),
            },
            {
              type: "search-multi-select",
              label: "Banks",
              placeholder: "All Banks",
              options: banksList.map((bank) => ({
                id: bank.bank_id,
                label: bank.bank_name,
                value: bank.bank_id,
              })),
              value: filters.bank_ids,
              onChange: (value) =>
                setFilters((prev) => ({ ...prev, bank_ids: value })),
            },
          ]}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={activeFilterCount}
        />
      )}

      <div className="mb-4 flex gap-2">
        <button
          type="button"
          onClick={() => setFilters((prev) => ({ ...prev, by_bank: false }))}
          className={`rounded-lg border px-4 py-2 text-sm font-semibold transition ${
            !filters.by_bank
              ? "text-white"
              : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
          }`}
          style={
            !filters.by_bank
              ? { backgroundColor: REPORT_PRIMARY }
              : undefined
          }
        >
          By Asset Class
        </button>
        <button
          type="button"
          onClick={() => setFilters((prev) => ({ ...prev, by_bank: true }))}
          className={`rounded-lg border px-4 py-2 text-sm font-semibold transition ${
            filters.by_bank
              ? "text-white"
              : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
          }`}
          style={
            filters.by_bank ? { backgroundColor: REPORT_PRIMARY } : undefined
          }
        >
          By Bank
        </button>
      </div>

      {filters.by_bank ? (
        <ByBankView
          data={data}
          bankOrder={bankOrder}
          assetClasses={assetClasses}
          valueFor={valueFor}
          pctOverallForAsset={pctOverallForAsset}
          overallPieData={overallPieData}
          getBankPieData={getBankPieData}
        />
      ) : (
        <ByAssetView
          data={data}
          bankOrder={bankOrder}
          assetClasses={assetClasses}
          valueFor={valueFor}
          pctOverallForAsset={pctOverallForAsset}
          overallPieData={overallPieData}
          getBankPieData={getBankPieData}
        />
      )}
    </div>
  );
}