"use client";

import Link from "next/link";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

import { useAssetAnalyticsList } from "@/app/customer/[tenant]/reports/asset-analytics/_lib/use-asset-analytics-list";
import type { UserReportSettings } from "@/lib/report-user-settings";

import { SettingsSection } from "./settings-section";

export function SettingsPanelAssetAnalytics({
  draft,
  onChange,
  tenant,
}: {
  draft: UserReportSettings;
  onChange: (patch: Partial<Pick<UserReportSettings, "defaultAnalyticsTicker">>) => void;
  tenant: string;
}) {
  const { tickerOptions, isLoading } = useAssetAnalyticsList("", []);

  return (
    <div className="space-y-10">
      <SettingsSection
        title="Default ticker"
        description="Asset Analytics opens with this ticker loaded automatically — no search step required."
      >
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:max-w-3xl">
          <div className="space-y-2 sm:col-span-2">
            <Label className="text-xs font-medium text-muted-foreground">Ticker</Label>
            <Select
              value={draft.defaultAnalyticsTicker}
              onValueChange={(value) => onChange({ defaultAnalyticsTicker: value })}
            >
              <SelectTrigger className="h-10 bg-background">
                <SelectValue placeholder={isLoading ? "Loading tickers…" : "Select ticker"} />
              </SelectTrigger>
              <SelectContent>
                {tickerOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.name !== option.value ? `${option.name} (${option.value})` : option.value}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </SettingsSection>

      <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border/70 bg-muted/15 px-5 py-4">
        <div>
          <p className="font-medium text-sm">Preview report</p>
          <p className="mt-0.5 text-muted-foreground text-xs">Open Asset Analytics with the current default ticker.</p>
        </div>
        <Button variant="outline" size="sm" asChild>
          <Link href={`/customer/${tenant}/reports/asset-analytics`}>Open Asset Analytics</Link>
        </Button>
      </div>
    </div>
  );
}