import { useMemo, useState } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
} from "recharts";
import { subDays } from "date-fns";
import { DatePicker } from "@/components/ui/date-picker";
import { useHistoricalMinMax, useDailyQuotes } from "@/lib/queries";
import { Link } from "@tanstack/react-router";
import { ArrowLeft } from "lucide-react";

const priceFormatter = new Intl.NumberFormat("es-AR", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

function formatDate(d: Date): string {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
}

function formatShortDate(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleDateString("es-AR", {
    day: "2-digit",
    month: "2-digit",
  });
}

export function BeloAnalysisPage() {
  const today = new Date();
  const defaultStart = subDays(today, 30);

  const [startDate, setStartDate] = useState<Date>(defaultStart);
  const [endDate, setEndDate] = useState<Date>(today);

  const startDateStr = formatDate(startDate);
  const endDateStr = formatDate(endDate);

  const { data: historical, isLoading: historicalLoading } = useHistoricalMinMax("BELO");
  const { data: daily, isLoading: dailyLoading } = useDailyQuotes("BELO", startDateStr, endDateStr);

  const chartData = useMemo(() => {
    if (!daily) return [];
    return daily.map((d) => ({
      date: formatShortDate(d.date),
      buy: d.buy,
    }));
  }, [daily]);

  const { yDomain, minBuyValue, maxBuyValue, avgBuyValue } = useMemo(() => {
    if (chartData.length === 0) return { yDomain: [0, 0] as [number, number], minBuyValue: 0, maxBuyValue: 0, avgBuyValue: 0 };
    let min = Infinity;
    let max = -Infinity;
    let sum = 0;
    for (const d of chartData) {
      if (d.buy < min) min = d.buy;
      if (d.buy > max) max = d.buy;
      sum += d.buy;
    }
    const range = max - min || 1;
    return {
      yDomain: [min - range * 0.1, max + range * 0.1] as [number, number],
      minBuyValue: min,
      maxBuyValue: max,
      avgBuyValue: sum / chartData.length,
    };
  }, [chartData]);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link
            to="/quotes/belo"
            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="size-4" />
            BELO
          </Link>
          <h1 className="text-2xl font-semibold">Análisis</h1>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <div className="rounded-lg border p-4">
          <p className="text-sm text-muted-foreground mb-2">Mínimo histórico (compra)</p>
          {historicalLoading ? (
            <p className="text-sm text-muted-foreground">Cargando...</p>
          ) : (
            <>
              <p className="text-2xl font-bold">
                ${priceFormatter.format(historical?.minBuy ?? 0)}
              </p>
              {historical?.minBuyDate && (
                <p className="text-xs text-muted-foreground mt-0.5">
                  {formatShortDate(historical.minBuyDate)}
                </p>
              )}
            </>
          )}
        </div>
        <div className="rounded-lg border p-4">
          <p className="text-sm text-muted-foreground mb-2">Máximo histórico (compra)</p>
          {historicalLoading ? (
            <p className="text-sm text-muted-foreground">Cargando...</p>
          ) : (
            <>
              <p className="text-2xl font-bold">
                ${priceFormatter.format(historical?.maxBuy ?? 0)}
              </p>
              {historical?.maxBuyDate && (
                <p className="text-xs text-muted-foreground mt-0.5">
                  {formatShortDate(historical.maxBuyDate)}
                </p>
              )}
            </>
          )}
        </div>
      </div>

      <div className="rounded-lg border p-4">
        <h2 className="text-sm font-medium mb-4">Evolución del precio de compra</h2>

        <div className="flex items-center gap-4 mb-4">
          <div className="flex flex-col gap-1">
            <label className="text-xs text-muted-foreground">Desde</label>
            <DatePicker value={startDate} onChange={(d) => d && setStartDate(d)} placeholder="Fecha inicio" />
          </div>
          <div className="flex flex-col gap-1">
            <label className="text-xs text-muted-foreground">Hasta</label>
            <DatePicker value={endDate} onChange={(d) => d && setEndDate(d)} placeholder="Fecha fin" />
          </div>
        </div>

        {dailyLoading ? (
          <div className="flex items-center justify-center h-64 text-muted-foreground">
            Cargando...
          </div>
        ) : chartData.length === 0 ? (
          <div className="flex items-center justify-center h-64 text-muted-foreground">
            Sin datos para este período
          </div>
        ) : (
          <>
            <div className="h-64">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                  <XAxis
                    dataKey="date"
                    tick={{ fontSize: 11 }}
                    className="text-muted-foreground"
                    interval="preserveStartEnd"
                  />
                  <YAxis
                    tick={{ fontSize: 11 }}
                    className="text-muted-foreground"
                    tickFormatter={(v: number) => `$${priceFormatter.format(v)}`}
                    width={80}
                    domain={yDomain}
                  />
                  <Tooltip
                    formatter={(value: unknown) => [
                      `$${priceFormatter.format(Number(value))}`,
                      "Compra",
                    ]}
                    labelFormatter={(label: unknown) => `Fecha: ${label}`}
                    contentStyle={{
                      backgroundColor: "var(--card)",
                      border: "1px solid var(--border)",
                      borderRadius: "var(--radius)",
                      fontSize: 13,
                    }}
                  />
                  <ReferenceLine
                    y={maxBuyValue}
                    stroke="var(--chart-1)"
                    strokeDasharray="4 4"
                    strokeWidth={1.5}
                    label={{
                      value: `Máx: $${priceFormatter.format(maxBuyValue)}`,
                      position: "right",
                      fontSize: 11,
                      fill: "var(--chart-1)",
                    }}
                  />
                  <ReferenceLine
                    y={minBuyValue}
                    stroke="var(--chart-2)"
                    strokeDasharray="4 4"
                    strokeWidth={1.5}
                    label={{
                      value: `Mín: $${priceFormatter.format(minBuyValue)}`,
                      position: "right",
                      fontSize: 11,
                      fill: "var(--chart-2)",
                    }}
                  />
                  <ReferenceLine
                    y={avgBuyValue}
                    stroke="var(--chart-3)"
                    strokeDasharray="4 4"
                    strokeWidth={1.5}
                    label={{
                      value: `Prom: $${priceFormatter.format(avgBuyValue)}`,
                      position: "right",
                      fontSize: 11,
                      fill: "var(--chart-3)",
                    }}
                  />
                  <Line
                    type="monotone"
                    dataKey="buy"
                    name="Compra"
                    stroke="var(--chart-1)"
                    strokeWidth={2}
                    dot={false}
                    activeDot={{ r: 4 }}
                    isAnimationActive={false}
                  />
                </LineChart>
              </ResponsiveContainer>
            </div>
            <div className="flex items-center justify-center gap-4 mt-3">
              <div className="flex items-center gap-1.5">
                <span className="size-2.5 rounded-full" style={{ backgroundColor: "var(--chart-1)" }} />
                <span className="text-xs text-muted-foreground">Compra</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="size-2.5 border-t-2 border-dashed" style={{ borderColor: "var(--chart-1)" }} />
                <span className="text-xs text-muted-foreground">Máx</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="size-2.5 border-t-2 border-dashed" style={{ borderColor: "var(--chart-2)" }} />
                <span className="text-xs text-muted-foreground">Mín</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="size-2.5 border-t-2 border-dashed" style={{ borderColor: "var(--chart-3)" }} />
                <span className="text-xs text-muted-foreground">Prom</span>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
