"use client";

import { useState } from "react";
import { toast } from "sonner";
import { MoneyInput } from "@/components/money-input";
import { ResponsiveDialog } from "@/components/responsive-dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAccounts } from "@/features/in-kind/components/in-kind-section";
import { tr } from "@/i18n/tr";
import { ASSET_KEYS, ASSETS, formatAssetQuantity, type AssetKey } from "@/shared/assets";
import { todayIstanbul } from "@/shared/dates";
import { MOVEMENT_KINDS, type MovementKind } from "@/shared/portfolio";
import { addMovementAction, saveAssetAction } from "../actions";
import type { AssetView } from "../service";

const t = tr.assets;
type Errors = Record<string, string | undefined>;
const NONE = "__none__";

function Footer({ busy, formId, onClose }: { busy: boolean; formId: string; onClose: () => void }) {
  return (
    <>
      <Button variant="outline" type="button" onClick={onClose}>
        {tr.common.cancel}
      </Button>
      <Button type="submit" form={formId} disabled={busy}>
        {tr.common.save}
      </Button>
    </>
  );
}

/** Yeni varlık / varlığı düzenle. */
export function AssetFormDialog({
  item,
  onClose,
  onCreated,
}: {
  item: AssetView | null;
  onClose: () => void;
  onCreated?: (id: string) => void;
}) {
  const [v, setV] = useState({
    assetKey: (item?.assetKey ?? "gram_gold") as AssetKey,
    name: item?.name ?? "",
    note: item?.note ?? "",
    isPrivate: item?.isPrivate ?? false,
  });
  const [errors, setErrors] = useState<Errors>({});
  const [busy, setBusy] = useState(false);
  const set = <K extends keyof typeof v>(k: K, x: (typeof v)[K]) => setV((s) => ({ ...s, [k]: x }));
  const locked = Boolean(item?.movementCount);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    const r = await saveAssetAction(item?.id ?? null, {
      ...v,
      name: v.name.trim() || ASSETS[v.assetKey].label,
    });
    setBusy(false);
    if (r.ok) {
      toast.success(t.toast.saved);
      onClose();
      if (!item) onCreated?.((r.data as { id: string }).id);
    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
  }

  const f = t.fields;
  return (
    <ResponsiveDialog
      open
      onOpenChange={(o) => !o && onClose()}
      title={item ? t.editTitle : t.createTitle}
      footer={<Footer busy={busy} formId="asset-form" onClose={onClose} />}
    >
      <form id="asset-form" onSubmit={submit} noValidate>
        <FieldGroup>
          <Field data-invalid={Boolean(errors.assetKey)}>
            <FieldLabel htmlFor="as-key">{f.asset}</FieldLabel>
            <Select
              value={v.assetKey}
              onValueChange={(x) => set("assetKey", x as AssetKey)}
              disabled={locked}
            >
              <SelectTrigger id="as-key" className="w-full">
                <SelectValue>{ASSETS[v.assetKey].label}</SelectValue>
              </SelectTrigger>
              <SelectContent>
                {ASSET_KEYS.map((k) => (
                  <SelectItem key={k} value={k}>
                    {ASSETS[k].label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {errors.assetKey ? <FieldError>{errors.assetKey}</FieldError> : null}
          </Field>
          <Field data-invalid={Boolean(errors.name)}>
            <FieldLabel htmlFor="as-name">{f.name}</FieldLabel>
            <Input
              id="as-name"
              value={v.name}
              placeholder={ASSETS[v.assetKey].label}
              onChange={(e) => set("name", e.target.value)}
              aria-invalid={Boolean(errors.name)}
            />
            {errors.name ? <FieldError>{errors.name}</FieldError> : null}
          </Field>
          <Field>
            <FieldLabel htmlFor="as-note">{f.note}</FieldLabel>
            <Input id="as-note" value={v.note} onChange={(e) => set("note", e.target.value)} />
          </Field>
          <label className="flex items-start gap-2 text-sm">
            <Checkbox
              checked={v.isPrivate}
              onCheckedChange={(x) => set("isPrivate", x === true)}
              className="mt-0.5"
            />
            <span>
              {f.isPrivate}
              <span className="block text-xs text-muted-foreground">{f.isPrivateHint}</span>
            </span>
          </label>
          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
        </FieldGroup>
      </form>
    </ResponsiveDialog>
  );
}

/** Alım, gelen hediye, satış veya çıkış hareketi. */
export function MovementDialog({
  item,
  initialKind,
  onClose,
}: {
  item: AssetView;
  initialKind: MovementKind;
  onClose: () => void;
}) {
  const accounts = useAccounts();
  const [kind, setKind] = useState<MovementKind>(initialKind);
  const [v, setV] = useState({
    date: todayIstanbul(),
    quantity: "",
    amount: "",
    unitPrice: "",
    accountId: "",
    storage: item.storage,
    note: "",
  });
  const [errors, setErrors] = useState<Errors>({});
  const [busy, setBusy] = useState(false);
  const set = <K extends keyof typeof v>(k: K, x: (typeof v)[K]) => setV((s) => ({ ...s, [k]: x }));
  const withAccount = kind === "buy" || kind === "sell";
  const priced = kind !== "gift_out";
  const inflow = kind === "buy" || kind === "gift_in";

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    const r = await addMovementAction(item.id, {
      kind,
      date: v.date,
      quantity: v.quantity,
      amount: priced ? v.amount : "",
      unitPrice: priced ? v.unitPrice : "",
      accountId: withAccount ? v.accountId : "",
      storage: inflow ? v.storage : "",
      note: v.note,
    });
    setBusy(false);
    if (r.ok) {
      toast.success(t.toast.movement);
      onClose();
    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
  }

  const m = t.movement;
  const unit = ASSETS[item.assetKey].unit;
  return (
    <ResponsiveDialog
      open
      onOpenChange={(o) => !o && onClose()}
      title={m.title(t.kinds[kind], item.name)}
      description={m.held(formatAssetQuantity(item.assetKey, item.summary.quantity))}
      footer={<Footer busy={busy} formId="movement-form" onClose={onClose} />}
    >
      <form id="movement-form" onSubmit={submit} noValidate>
        <FieldGroup>
          <Tabs
            value={kind}
            onValueChange={(x) => {
              setKind(x as MovementKind);
              setErrors({});
            }}
          >
            <TabsList className="grid h-auto w-full grid-cols-2 sm:grid-cols-4">
              {MOVEMENT_KINDS.map((k) => (
                <TabsTrigger key={k} value={k}>
                  {t.kinds[k]}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
          <p className="-mt-2 text-xs text-muted-foreground">{t.kindHints[kind]}</p>
          <div className="grid grid-cols-2 gap-3">
            <Field data-invalid={Boolean(errors.quantity)}>
              <FieldLabel htmlFor="mv-qty">
                {m.quantity} ({unit})
              </FieldLabel>
              <Input
                id="mv-qty"
                inputMode="decimal"
                value={v.quantity}
                onChange={(e) => set("quantity", e.target.value)}
                className="text-right tabular-nums"
                aria-invalid={Boolean(errors.quantity)}
                autoFocus
              />
              {errors.quantity ? <FieldError>{errors.quantity}</FieldError> : null}
            </Field>
            <Field data-invalid={Boolean(errors.date)}>
              <FieldLabel htmlFor="mv-date">{m.date}</FieldLabel>
              <Input
                id="mv-date"
                type="date"
                value={v.date}
                max={todayIstanbul()}
                onChange={(e) => set("date", e.target.value)}
              />
              {errors.date ? <FieldError>{errors.date}</FieldError> : null}
            </Field>
          </div>
          {priced ? (
            <>
              <div className="grid grid-cols-2 gap-3">
                <Field data-invalid={Boolean(errors.amount)}>
                  <FieldLabel htmlFor="mv-amount">{m.amount}</FieldLabel>
                  <MoneyInput id="mv-amount" value={v.amount} onChange={(x) => set("amount", x)} />
                  {errors.amount ? <FieldError>{errors.amount}</FieldError> : null}
                </Field>
                <Field data-invalid={Boolean(errors.unitPrice)}>
                  <FieldLabel htmlFor="mv-unit">{m.unitPrice}</FieldLabel>
                  <MoneyInput
                    id="mv-unit"
                    value={v.unitPrice}
                    onChange={(x) => set("unitPrice", x)}
                  />
                  {errors.unitPrice ? <FieldError>{errors.unitPrice}</FieldError> : null}
                </Field>
              </div>
              <FieldDescription className="-mt-2">
                {kind === "gift_in" ? m.giftValueHint : m.priceHint}
              </FieldDescription>
            </>
          ) : null}
          {withAccount ? (
            <Field data-invalid={Boolean(errors.accountId)}>
              <FieldLabel htmlFor="mv-account">{m.account}</FieldLabel>
              <Select
                value={v.accountId || NONE}
                onValueChange={(x) => set("accountId", x === NONE ? "" : x)}
              >
                <SelectTrigger id="mv-account" className="w-full">
                  <SelectValue>
                    {accounts?.find((a) => a.id === v.accountId)?.name ?? m.accountNone}
                  </SelectValue>
                </SelectTrigger>
                <SelectContent className="max-h-72">
                  <SelectItem value={NONE}>{m.accountNone}</SelectItem>
                  {(accounts ?? []).map((a) => (
                    <SelectItem key={a.id} value={a.id}>
                      {a.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <FieldDescription>{m.accountHint}</FieldDescription>
              {errors.accountId ? <FieldError>{errors.accountId}</FieldError> : null}
            </Field>
          ) : null}
          {inflow ? (
            <Field>
              <FieldLabel htmlFor="mv-storage">{m.storage}</FieldLabel>
              <Input
                id="mv-storage"
                value={v.storage}
                placeholder={m.storagePlaceholder}
                onChange={(e) => set("storage", e.target.value)}
              />
            </Field>
          ) : null}
          <Field>
            <FieldLabel htmlFor="mv-note">{m.note}</FieldLabel>
            <Input id="mv-note" value={v.note} onChange={(e) => set("note", e.target.value)} />
          </Field>
          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
        </FieldGroup>
      </form>
    </ResponsiveDialog>
  );
}