"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { FormField } from "@/components/ui/form-field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";
import { Typography } from "@/components/ui/typography";
import { useUpdateProviderStatus } from "@/hooks/providers/useUpdateProviderStatus";
import { useTranslation } from "@/hooks/useTranslation";
import {
  commissionRateSchema,
  type CommissionRateFormValues,
} from "@/lib/validations/provider.schema";
import type { ProviderStatus } from "@/types/provider";

interface CommissionRateDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  providerId: string;
  /** Current status — must be resent, the endpoint requires it */
  providerStatus: ProviderStatus;
  currentRate: number | null;
}

/**
 * Sets the per-provider platform commission rate.
 *
 * Shares `PUT /providers/admin/:id/status` with the status actions, so the
 * provider's CURRENT status is resent unchanged alongside the new rate —
 * `status` is a required field on that DTO. The rate is a percentage (0–100),
 * not a fraction, and once set it can only be changed, never cleared back to
 * the platform default (the endpoint rejects null).
 */
export function CommissionRateDialog({
  open,
  onOpenChange,
  providerId,
  providerStatus,
  currentRate,
}: CommissionRateDialogProps) {
  const { t } = useTranslation();

  const form = useForm<CommissionRateFormValues>({
    resolver: zodResolver(commissionRateSchema),
    defaultValues: {
      customCommissionRate: currentRate === null ? "" : String(currentRate),
    },
  });

  const updateStatus = useUpdateProviderStatus(providerId, {
    onSuccess: () => onOpenChange(false),
  });

  // Re-seed the field whenever the dialog reopens — the stored rate may have
  // changed since this component first mounted.
  React.useEffect(() => {
    if (open) {
      form.reset({
        customCommissionRate: currentRate === null ? "" : String(currentRate),
      });
    }
  }, [open, currentRate, form]);

  function onSubmit(values: CommissionRateFormValues) {
    updateStatus.mutate({
      status: providerStatus,
      customCommissionRate: Number(values.customCommissionRate),
    });
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("providers.commission.title")}</DialogTitle>
          <DialogDescription>
            {t("providers.commission.description")}
          </DialogDescription>
        </DialogHeader>

        <form
          className="flex min-h-0 flex-1 flex-col gap-5"
          onSubmit={form.handleSubmit(onSubmit)}
        >
          <DialogBody className="flex flex-col gap-5">
            <FormField
              control={form.control}
              name="customCommissionRate"
              label={t("providers.commission.label")}
              render={({ field, hasError, id }) => (
                <InputGroup>
                  <InputGroupInput
                    id={id}
                    inputMode="decimal"
                    dir="ltr"
                    placeholder={t("providers.commission.placeholder")}
                    aria-invalid={hasError}
                    {...field}
                  />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>%</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              )}
            />

            <Typography as="p" variant="caption" color="secondary">
              {t("providers.commission.cannotClear")}
            </Typography>
          </DialogBody>

          <DialogFooter>
            <Button
              type="button"
              variant="secondary"
              onClick={() => onOpenChange(false)}
            >
              {t("common.cancel")}
            </Button>
            <Button type="submit" loading={updateStatus.isPending}>
              {t("providers.commission.save")}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}