"use client";

import type { ChangeEvent } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

type ObservationDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  observationText: string;
  onObservationTextChange: (v: string) => void;
  observationInternal: boolean;
  onObservationInternalChange: (v: boolean) => void;
  isSaving: boolean;
  onSave: () => void | Promise<void>;
};

export function ObservationDialog({
  open,
  onOpenChange,
  observationText,
  onObservationTextChange,
  observationInternal,
  onObservationInternalChange,
  isSaving,
  onSave,
}: ObservationDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="rounded-xl sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Agregar observación</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-2">
          <div className="space-y-2">
            <Label htmlFor="observation-text">Comentario</Label>
            <Textarea
              id="observation-text"
              className="rounded-xl min-h-[100px]"
              placeholder="Escribe la observación..."
              value={observationText}
              onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                onObservationTextChange(e.target.value)
              }
            />
          </div>
          <div className="flex items-center gap-2">
            <input
              checked={observationInternal}
              className="h-4 w-4 rounded border border-slate-300 text-blue-600 focus:ring-blue-500"
              id="observation-internal"
              type="checkbox"
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                onObservationInternalChange(e.target.checked)
              }
            />
            <Label className="cursor-pointer font-normal" htmlFor="observation-internal">
              Comentario interno
            </Label>
          </div>
        </div>
        <DialogFooter className="gap-2 sm:gap-0">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700"
            disabled={isSaving}
            type="button"
            onClick={() => void onSave()}
          >
            Guardar
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}