"use client";

import * as React from "react";
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 {
  assetAllocationBankOptions,
  assetAllocationClassOptions,
  assetAllocationClients,
  assetAllocationCurrencyOptions,
  assetAllocationTypeOptions,
  assetAllocationUsers,
  type AssetAllocationFilters,
} from "@/app/customer/[tenant]/reports/asset-allocation/_components/asset-allocation-report/schema";
import type { UserReportSettings } from "@/lib/report-user-settings";
import { customerUrl } from "@/lib/tenant";

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

export function SettingsPanelAssetAllocation({
  draft,
  onAllocationChange,
  onReset,
  tenant,
}: {
  draft: UserReportSettings;
  onAllocationChange: (next: AssetAllocationFilters) => void;
  onReset: () => void;
  tenant: string;
}) {
  const [bankSearch, setBankSearch] = React.useState("");
  const [currencySearch, setCurrencySearch] = React.useState("");
  const [classSearch, setClassSearch] = React.useState("");
  const [typeSearch, setTypeSearch] = React.useState("");

  const allocation = draft.assetAllocation;

  const toggleList = (
    key: "banks" | "currencies" | "assetClasses" | "assetTypes",
    item: string,
    checked: boolean,
  ) => {
    const list = allocation[key];
    const next = checked ? [...new Set([...list, item])] : list.filter((v) => v !== item);
    onAllocationChange({ ...allocation, [key]: next });
  };

  return (
    <div className="space-y-10">
      <SettingsSection title="Scope" description="Default user and client when the report loads.">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:max-w-4xl">
          <div className="space-y-2">
            <Label className="text-xs font-medium text-muted-foreground">User</Label>
            <Select value={allocation.user} onValueChange={(value) => onAllocationChange({ ...allocation, user: value })}>
              <SelectTrigger className="h-10 bg-background">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {assetAllocationUsers.map((u) => (
                  <SelectItem key={u} value={u}>
                    {u}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-muted-foreground">Client</Label>
            <Select
              value={allocation.client}
              onValueChange={(value) => onAllocationChange({ ...allocation, client: value })}
            >
              <SelectTrigger className="h-10 bg-background">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {assetAllocationClients.map((c) => (
                  <SelectItem key={c} value={c}>
                    {c}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </SettingsSection>

      <SettingsSection
        title="Filters"
        description="Banks, currencies, asset classes, and types applied when the report opens."
      >
        <div className="grid gap-4 sm:grid-cols-2 2xl:grid-cols-4">
          <SettingsCheckboxGroup
            title="Banks"
            search={bankSearch}
            onSearchChange={setBankSearch}
            items={assetAllocationBankOptions}
            selected={allocation.banks}
            onToggle={(item, checked) => toggleList("banks", item, checked)}
            onSelectAll={() => onAllocationChange({ ...allocation, banks: [...assetAllocationBankOptions] })}
            onSelectNone={() => onAllocationChange({ ...allocation, banks: [] })}
          />
          <SettingsCheckboxGroup
            title="Currencies"
            search={currencySearch}
            onSearchChange={setCurrencySearch}
            items={assetAllocationCurrencyOptions}
            selected={allocation.currencies}
            onToggle={(item, checked) => toggleList("currencies", item, checked)}
            onSelectAll={() => onAllocationChange({ ...allocation, currencies: [...assetAllocationCurrencyOptions] })}
            onSelectNone={() => onAllocationChange({ ...allocation, currencies: [] })}
          />
          <SettingsCheckboxGroup
            title="Asset classes"
            search={classSearch}
            onSearchChange={setClassSearch}
            items={assetAllocationClassOptions}
            selected={allocation.assetClasses}
            onToggle={(item, checked) => toggleList("assetClasses", item, checked)}
            onSelectAll={() => onAllocationChange({ ...allocation, assetClasses: [...assetAllocationClassOptions] })}
            onSelectNone={() => onAllocationChange({ ...allocation, assetClasses: [] })}
          />
          <SettingsCheckboxGroup
            title="Asset types"
            search={typeSearch}
            onSearchChange={setTypeSearch}
            items={assetAllocationTypeOptions}
            selected={allocation.assetTypes}
            onToggle={(item, checked) => toggleList("assetTypes", item, checked)}
            onSelectAll={() => onAllocationChange({ ...allocation, assetTypes: [...assetAllocationTypeOptions] })}
            onSelectNone={() => onAllocationChange({ ...allocation, assetTypes: [] })}
          />
        </div>
      </SettingsSection>

      <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-dashed border-border/80 bg-muted/15 px-5 py-4">
        <Button type="button" variant="ghost" size="sm" onClick={onReset}>
          Reset to defaults
        </Button>
        <Button variant="outline" size="sm" asChild>
          <Link href={customerUrl(tenant, "/reports/asset-allocation")}>Open Asset Allocation</Link>
        </Button>
      </div>
    </div>
  );
}