"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) {
  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.4 },
      fill: "tozeroy",
      fillcolor: "rgba(194,170,122,0.10)"
    }
  ];
  const layout: Partial<Layout> = {
    autosize: true,
    height: 360,
    margin: { l: 52, r: 18, t: 18, b: 38 },
    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 },
    yaxis: { showgrid: true, gridcolor: "#232934", tickprefix: "$", tickformat: ",.2f" }
  };

  if (!points.length) {
    return <div className="empty-panel">No price history available for this period.</div>;
  }

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