import { Button } from "@xtablo/ui/components/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@xtablo/ui/components/dialog";
import { FieldDescription } from "@xtablo/ui/components/field";
import { Input } from "@xtablo/ui/components/input";
import { Label } from "@xtablo/ui/components/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@xtablo/ui/components/select";
import { Textarea } from "@xtablo/ui/components/textarea";
import { useTranslation } from "react-i18next";
import { EventTypeConfig } from "../hooks/event-types";

export function EventTypeModal({
  isModalOpen,
  setIsModalOpen,
  editingEventType,
  formData,
  setFormData,
  handleSaveEventType,
}: {
  isModalOpen: boolean;
  setIsModalOpen: (isOpen: boolean) => void;
  editingEventType: EventTypeConfig | null;
  formData: EventTypeConfig;
  setFormData: (formData: EventTypeConfig) => void;
  handleSaveEventType: () => void;
}) {
  const { t } = useTranslation("components");

  return (
    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
      <DialogContent className="max-w-xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {editingEventType ? t("eventTypeModal.title.edit") : t("eventTypeModal.title.create")}
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-6">
          {/* Basic Information Section */}
          <div className="space-y-2">
            <div className="space-y-2">
              <Label>
                {t("eventTypeModal.labels.name")}{" "}
                <span className="text-destructive">{t("eventTypeModal.required")}</span>
              </Label>
              <Input
                type="text"
                value={formData.name || ""}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
              />
            </div>

            <div className="space-y-2">
              <Label>{t("eventTypeModal.labels.description")}</Label>
              <Textarea
                value={formData.description || ""}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={2}
                required
                placeholder={t("eventTypeModal.placeholders.description")}
              />
            </div>
          </div>

          {/* Timing Configuration Section */}
          <div className="space-y-2">
            <Label>{t("eventTypeModal.sections.timing")}</Label>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>
                  {t("eventTypeModal.labels.duration")}{" "}
                  <span className="text-destructive">{t("eventTypeModal.required")}</span>
                </Label>
                <Input
                  type="number"
                  value={formData.duration || 60}
                  onChange={(e) => setFormData({ ...formData, duration: Number(e.target.value) })}
                  min={15}
                  max={480}
                  step={15}
                />
              </div>

              <div className="space-y-2">
                <Label>{t("eventTypeModal.labels.bufferTime")}</Label>
                <Input
                  type="number"
                  value={formData.bufferTime || 0}
                  onChange={(e) => setFormData({ ...formData, bufferTime: Number(e.target.value) })}
                  min={0}
                  max={60}
                  step={5}
                />
                <FieldDescription>{t("eventTypeModal.descriptions.bufferTime")}</FieldDescription>
              </div>
            </div>
          </div>

          {/* Booking Limits Section */}
          <div className="space-y-2">
            <h4 className="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
              {t("eventTypeModal.sections.bookingLimits")}
            </h4>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>{t("eventTypeModal.labels.maxBookingsPerDay")}</Label>
                <Input
                  type="number"
                  value={formData.maxBookingsPerDay || 8}
                  onChange={(e) =>
                    setFormData({ ...formData, maxBookingsPerDay: Number(e.target.value) })
                  }
                  min={1}
                  max={50}
                />
              </div>

              <div className="flex flex-col gap-2">
                <Label>{t("eventTypeModal.labels.minAdvanceBooking")}</Label>
                <div className="flex flex-row gap-2">
                  <Input
                    type="number"
                    value={formData.minAdvanceBooking?.value || 0}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        minAdvanceBooking: {
                          value: Number(e.target.value),
                          unit: formData.minAdvanceBooking?.unit || "minutes",
                        },
                      })
                    }
                    min={0}
                    max={168}
                  />
                  <Select
                    value={String(formData.minAdvanceBooking?.unit || "minutes")}
                    onValueChange={(value) => {
                      setFormData({
                        ...formData,
                        minAdvanceBooking: {
                          value: formData.minAdvanceBooking?.value || 0,
                          unit: value as "minutes" | "hours" | "days",
                        },
                      });
                    }}
                  >
                    <SelectTrigger
                      className="min-w-[110px]"
                      aria-label={t("eventTypeModal.descriptions.minAdvanceBooking")}
                    >
                      <SelectValue placeholder="..." />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="minutes">{t("eventTypeModal.units.minutes")}</SelectItem>
                      <SelectItem value="hours">{t("eventTypeModal.units.hours")}</SelectItem>
                      <SelectItem value="days">{t("eventTypeModal.units.days")}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <FieldDescription>
                  {t("eventTypeModal.descriptions.minAdvanceBooking")}
                </FieldDescription>
              </div>
            </div>
          </div>

          {/* Pricing Section
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
            Tarification (optionnel)
          </h3>

          <NumberField
            value={formData.price || 0}
            onChange={(value) => setFormData({ ...formData, price: value })}
            minValue={0}
            maxValue={10000}
            step={5}
            formatOptions={{
              style: "currency",
              currency: "EUR",
            }}
          >
            <Label>Prix (€)</Label>
            <Description>
              Prix de ce type d&apos;appel. Laissez à 0 pour gratuit.
            </Description>
          </NumberField>
        </div> */}

          {/* Settings Section */}
          {/* <div className="space-y-4">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
            Paramètres
          </h3>

          <div className="space-y-4">
            <div className="flex items-start space-x-3">
              <Checkbox
                isSelected={formData.isActive || false}
                onChange={(isActive) => setFormData({ ...formData, isActive })}
              >
                <div>
                  <div className="font-medium">Type d&apos;appel actif</div>
                  <div className="text-sm text-gray-500 dark:text-gray-400">
                    Les clients peuvent réserver ce type d&apos;appel
                  </div>
                </div>
              </Checkbox>
            </div>

            <div className="flex items-start space-x-3">
              <Checkbox
                isSelected={formData.requiresApproval || false}
                onChange={(requiresApproval) =>
                  setFormData({ ...formData, requiresApproval })
                }
              >
                <div>
                  <div className="font-medium">
                    Nécessite une approbation manuelle
                  </div>
                  <div className="text-sm text-gray-500 dark:text-gray-400">
                    Vous devrez approuver chaque réservation avant confirmation
                  </div>
                </div>
              </Checkbox>
            </div>
          </div>
        </div> */}
        </div>

        {/* Action Buttons */}
        <DialogFooter>
          <Button variant="outline" onClick={() => setIsModalOpen(false)}>
            {t("eventTypeModal.buttons.cancel")}
          </Button>
          <Button
            variant="default"
            onClick={handleSaveEventType}
            disabled={!formData.name?.trim() || !formData.duration}
            className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white"
          >
            {editingEventType
              ? t("eventTypeModal.buttons.edit")
              : t("eventTypeModal.buttons.create")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
