import React from "react";
import { MetricCard } from "./MetricCard";
import { DetailedAnalytic } from "@/hooks/useAssetAnalyticsReport";
import { formatCurrency, formatNumberWithHtml } from "@/lib/asset-analytics-utils";

interface MetricsGridProps {
  asset: DetailedAnalytic;
}

export const MetricsGrid: React.FC<MetricsGridProps> = ({ asset }) => {
  return (
    <>
      {/* Metrics Grid - Row 1 */}
      <div className="mb-4 grid grid-cols-2 md:grid-cols-5 gap-4">
        <MetricCard
          label="Real Price"
          value={asset.purchase_price}
          currency={asset.purchase_value.currency}
        />
        <MetricCard
          label="Weightage Average Price"
          value={asset.weighted_average_days}
          currency={asset.purchase_value.currency}
        />
        <MetricCard
          label="Market Price"
          value={asset.market_price}
          currency={asset.market_value.currency}
        />
        <MetricCard
          label="Total Purchase Value"
          value={asset.purchase_value.base_currency_value}
          currency={asset.purchase_value.base_currency}
        />
        <MetricCard
          label="Total Market Value"
          value={asset.market_value.base_currency_value}
          currency={asset.market_value.base_currency}
        />
      </div>

      {/* Metrics Grid - Row 2 */}
      <div className="mb-4 grid grid-cols-2 md:grid-cols-5 gap-4">
        <MetricCard
          label="Total Market Value(EUR)"
          value={asset.market_value.base_currency_value}
        />
        <MetricCard
          label="Total Quantity"
          value={asset.quantity}
        />
        <MetricCard
          label="XIRR %age"
          value={asset.xir || "nan"}
        />
        <MetricCard
          label="Gain /Loss %age"
          value={`${asset.gain_loss.percentage}%`}
        />
        <MetricCard
          label="Unrealized Gain/Loss"
          value={asset.gain_loss.value}
        />
      </div>

      {/* Metrics Grid - Row 3 */}
      <div className="mb-4 grid grid-cols-2 md:grid-cols-5 gap-4">
        <MetricCard label="Total Derivatives" value="--" />
        <MetricCard label="Future Cashflows" value="--" />
        <MetricCard
          label="Asset Type"
          value={asset.asset_type_title || "--"}
        />
        <MetricCard
          label="Weighted Average Days Held"
          value={asset.xir || "nan"}
        />
        <MetricCard
          label="%age of Asset Class"
          value={`${asset.percentage_of_asset_class}%`}
        />
      </div>

      {/* Metrics Grid - Row 4 */}
      <div className="mb-4 grid grid-cols-2 md:grid-cols-4 gap-4">
        <MetricCard label="%age of Total Holding" value="0.00%" />
        <MetricCard label="1 Year Return" value="--" />
        <MetricCard label="Year to Date Return" value="--" />
        <MetricCard
          label="Interest / Dividend"
          value={asset.dividend.base_currency_value}
          currency={asset.market_value.base_currency}
        />
      </div>
    </>
  );
};