"use client";

import dynamic from "next/dynamic";
import type { Data, Layout } from "plotly.js";
import type { HistoryPoint } from "@/types/api";

const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });

type Props = {
  symbol: string;
  points: HistoryPoint[];
};

export function PriceChart({ symbol, points }: Props) {
  if (!points.length) {
    return <div className="psm-card-empty">No price history available for this range.</div>;
  }

  const x = points.map((point) => point.date);
  const y = points.map((point) => point.close ?? null);
  const data: Data[] = [
    {
      x,
      y,
      type: "scatter",
      mode: "lines",
      name: symbol,
      line: { color: "#C2AA7A", width: 2.5 },
      fill: "tozeroy",
      fillcolor: "rgba(194,170,122,0.08)",
      hovertemplate: "%{x}<br>$%{y:.2f}<extra></extra>"
    }
  ];

  const layout: Partial<Layout> = {
    autosize: true,
    height: 360,
    margin: { l: 52, r: 24, t: 20, b: 42 },
    paper_bgcolor: "rgba(0,0,0,0)",
    plot_bgcolor: "rgba(0,0,0,0)",
    hovermode: "x unified",
    font: { family: "IBM Plex Mono, monospace", color: "#8E8676" },
    xaxis: {
      showgrid: false,
      zeroline: false,
      color: "#8E8676"
    },
    yaxis: {
      showgrid: true,
      gridcolor: "#232934",
      color: "#8E8676",
      tickprefix: "$",
      tickformat: ",.2f"
    }
  };

  return <Plot data={data} layout={layout} config={{ displayModeBar: false, responsive: true }} className="chart" useResizeHandler />;
}