"use client";

import * as React from "react";
import { Save } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { loadDashboardAssetWidgetSettings, updateDashboardAssetWidgetSettings } from "../../../_lib/dashboard-widgets-api";
import type { DashboardTopGainersWidget } from "../../../_lib/dashboard-widgets-server-api";
import type { WidgetConfigPanelProps } from "../types";

const PERIOD_OPTIONS = [
  { value: "1d", label: "1 Day" },
  { value: "1w", label: "1 Week" },
  { value: "1m", label: "1 Month" },
  { value: "3m", label: "3 Months" },
  { value: "6m", label: "6 Months" },
  { value: "1y", label: "1 Year" },
] as const;

function resolvePeriod(widget: DashboardTopGainersWidget | null): string {
  const period = widget?.period?.trim().toLowerCase();
  const match = PERIOD_OPTIONS.find((option) => option.value === period);
  return match?.value ?? "1d";
}

export function TopGainersConfigPanel({
  tenant,
  widget,
  mode = "edit",
  onClose,
  onWidgetsChanged,
}: WidgetConfigPanelProps) {
  const isCreate = mode === "create" || !widget;
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [busy, setBusy] = React.useState(false);
  const [period, setPeriod] = React.useState("1d");
  const [widgetId, setWidgetId] = React.useState<number>(widget?.widget_id ?? 0);

  React.useEffect(() => {
    let cancelled = false;
    void (async () => {
      setLoading(true);
      setError(null);
      try {
        const data = await loadDashboardAssetWidgetSettings(tenant);
        if (cancelled) return;
        const match =
          widget != null
            ? (data.top_gainers_widgets ?? []).find(
                (entry) => Number(entry.widget_id) === Number(widget.widget_id),
              ) ?? null
            : (data.top_gainers_widgets?.[0] ?? null);
        setWidgetId(match?.widget_id ?? widget?.widget_id ?? data.top_gainers_widgets?.[0]?.widget_id ?? 0);
        setPeriod(resolvePeriod(match));
      } catch (loadError) {
        if (!cancelled) {
          setError(loadError instanceof Error ? loadError.message : "Top Gainers settings could not be loaded.");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [tenant, widget]);

  async function save(operation: "top-gainers-create" | "top-gainers-save") {
    if (operation === "top-gainers-save" && !(widgetId > 0)) {
      toast.error("A valid Top Gainers widget is required.");
      return;
    }
    setBusy(true);
    try {
      await updateDashboardAssetWidgetSettings(tenant, {
        operation,
        widgetId: operation === "top-gainers-create" ? "new" : widgetId,
        period,
      });
      toast.success(isCreate ? "Top Gainers widget added" : "Top Gainers widget saved");
      onWidgetsChanged?.();
      onClose();
    } catch (saveError) {
      toast.error(saveError instanceof Error ? saveError.message : "Top Gainers widget could not be saved.");
    } finally {
      setBusy(false);
    }
  }

  if (loading) return <p className="text-muted-foreground text-sm">Loading configuration…</p>;
  if (error) return <p className="text-destructive text-sm">{error}</p>;

  return (
    <div className="overflow-hidden rounded-lg border bg-card">
      <div className="space-y-2 p-4">
        <Label htmlFor="tgl-period">Period</Label>
        <Select value={period} onValueChange={setPeriod}>
          <SelectTrigger id="tgl-period">
            <SelectValue placeholder="Select period" />
          </SelectTrigger>
          <SelectContent>
            {PERIOD_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-muted-foreground text-xs">
          Rankings use the latest market price versus the selected historical period from market snapshots.
        </p>
      </div>

      <div className="flex justify-end border-t p-3">
        <Button
          type="button"
          size="sm"
          className="gap-2"
          disabled={busy}
          onClick={() => void save(isCreate ? "top-gainers-create" : "top-gainers-save")}
        >
          <Save className="size-4" />
          {busy ? "Saving…" : isCreate ? "Add Widget" : "Save Widget"}
        </Button>
      </div>
    </div>
  );
}