import { useState } from "react";
import { PlusIcon } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import { useAuth } from "@/shared/context/AuthContext";
import { useUnitContext } from "@/shared/context/UnitContext";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/common/ui/dialog";
import { Input } from "@/shared/common/ui/input";
import { Label } from "@/shared/common/ui/label";
import { Textarea } from "@/shared/common/ui/textarea";
import { useServiceCategoryMutations } from "../../hooks/useServiceCategory";
import { ServiceCategoryList } from "./ServiceCategoryList";

export const ServiceCategoryPage = () => {
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const { user } = useAuth();

  // Form state
  const [formData, setFormData] = useState({
    slug: "",
    name: { am: "", en: "" },
    description: { am: "", en: "" },
  });

  const organizationId =
    user?.employee?.length && user.employee.length > 0
      ? user.employee[0].organizationId
      : undefined;

  const unitContext = useUnitContext();
  const unitsQuery = unitContext?.getList(organizationId!, {
    take: 300,
    skip: 0,
  });

  const { create } = useServiceCategoryMutations();

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!organizationId) return;

    create.mutate(
      {
        ...formData,
        organizationId: organizationId,
      },
      {
        onSuccess: () => {
          setIsCreateOpen(false);
          setFormData({
            slug: "",
            name: { am: "", en: "" },
            description: { am: "", en: "" },
          });
        },
      }
    );
  };

  const extraToolbar = (
    <div className="flex gap-2">
      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
        <DialogTrigger asChild>
          <Button className="bg-gradient-to-r from-purple-500 to-violet-600 text-white">
            <PlusIcon className="h-4 w-4 mr-2" />
            Create Service Category
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Create Service Category</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleCreate} className="space-y-4">
            <div>
              <Label>Slug</Label>
              <Input
                value={formData.slug}
                onChange={(e) =>
                  setFormData({ ...formData, slug: e.target.value })
                }
                required
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Name (English)</Label>
                <Input
                  value={formData.name.en}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      name: { ...formData.name, en: e.target.value },
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>Name (Amharic)</Label>
                <Input
                  value={formData.name.am}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      name: { ...formData.name, am: e.target.value },
                    })
                  }
                  required
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Description (English)</Label>
                <Textarea
                  value={formData.description.en}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      description: {
                        ...formData.description,
                        en: e.target.value,
                      },
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>Description (Amharic)</Label>
                <Textarea
                  value={formData.description.am}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      description: {
                        ...formData.description,
                        am: e.target.value,
                      },
                    })
                  }
                  required
                />
              </div>
            </div>
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => setIsCreateOpen(false)}
              >
                Cancel
              </Button>
              <Button type="submit" disabled={create.isPending}>
                {create.isPending ? "Creating..." : "Create"}
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );

  if (!organizationId) {
    return (
      <div className="p-6 space-y-4">
        <p className="text-destructive font-semibold">No organization found</p>
      </div>
    );
  }

  return (
    <ServiceCategoryList
      organizationId={organizationId}
      extraToolbar={extraToolbar}
    />
  );
};
