"use client";

import { useForm, Controller, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { budgetLineSchema, type BudgetLineInput } from "@/lib/validations/budget";
import { useAddBudgetLine, useUpdateBudgetLine, type BudgetLineWithSpending } from "@/hooks/use-budgets";
import { CategorySelect } from "@/components/shared/CategorySelect";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

interface Props {
  open: boolean;
  onClose: () => void;
  budgetId: string;
  existing?: BudgetLineWithSpending;
}

export function BudgetLineDialog({ open, onClose, budgetId, existing }: Props) {
  const add = useAddBudgetLine();
  const upd = useUpdateBudgetLine();
  const isEdit = !!existing;

  const {
    register,
    handleSubmit,
    control,
    setValue,
    formState: { errors, isSubmitting },
  } = useForm<BudgetLineInput>({
    resolver: zodResolver(budgetLineSchema),
    defaultValues: {
      categoryId: existing?.categoryId ?? "",
      allocatedCents: existing ? existing.allocatedCents : 0,
      alertAt80: existing?.alertAt80 ?? true,
      alertAt100: existing?.alertAt100 ?? true,
    },
  });

  const onSubmit: SubmitHandler<BudgetLineInput> = async (data) => {
    if (isEdit) {
      await upd.mutateAsync({ budgetId, lineId: existing!.id, data });
    } else {
      await add.mutateAsync({ budgetId, data });
    }
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="bg-slate-900 border-slate-700 text-white sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>{isEdit ? "Edit Envelope" : "Add Envelope"}</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="space-y-1">
            <Label className="text-slate-300">Category *</Label>
            <Controller
              name="categoryId"
              control={control}
              render={({ field }) => (
                <CategorySelect
                  value={field.value}
                  onChange={field.onChange}
                  typeFilter="EXPENSE"
                  placeholder="Select expense category"
                />
              )}
            />
            {errors.categoryId && <p className="text-xs text-red-400">{errors.categoryId.message}</p>}
          </div>

          <div className="space-y-1">
            <Label className="text-slate-300">Monthly Budget *</Label>
            <Input
              type="number"
              step="0.01"
              min="0.01"
              placeholder="0.00"
              defaultValue={existing ? existing.allocatedCents / 100 : ""}
              onChange={(e) =>
                setValue("allocatedCents", Math.round(parseFloat(e.target.value || "0") * 100))
              }
              className="bg-slate-800 border-slate-600 text-white"
            />
            {errors.allocatedCents && (
              <p className="text-xs text-red-400">{errors.allocatedCents.message}</p>
            )}
          </div>

          <div className="space-y-2">
            <Label className="text-slate-300">Alerts</Label>
            <label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
              <input type="checkbox" {...register("alertAt80")} className="accent-emerald-500" />
              Alert at 80% spent
            </label>
            <label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
              <input type="checkbox" {...register("alertAt100")} className="accent-emerald-500" />
              Alert at 100% spent
            </label>
          </div>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={onClose} className="text-slate-400 hover:text-white">
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={isSubmitting}
              className="bg-emerald-600 hover:bg-emerald-500 text-white"
            >
              {isEdit ? "Save" : "Add Envelope"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}