import { useEffect } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { queryClient } from "@/client/rpc-client";

export function InitialDataLoader() {
  const { data: treatments } = useQuery(
    queryClient.treatments.list.queryOptions()
  );

  const { mutate: createTreatment } = useMutation(
    queryClient.treatments.create.mutationOptions()
  );

  useEffect(() => {
    // Only initialize if no treatments exist
    if (treatments && treatments.length === 0) {
      const sampleTreatments = [
        {
          name: "Classic Manicure",
          description: "Traditional nail care with cuticle treatment, shaping, and polish application",
          duration: 45,
          price: 3500, // $35.00
          category: "Manicure"
        },
        {
          name: "Gel Manicure",
          description: "Long-lasting gel polish that cures under UV light for chip-free wear",
          duration: 60,
          price: 4500, // $45.00
          category: "Manicure"
        },
        {
          name: "Classic Pedicure",
          description: "Foot soak, exfoliation, nail care, and polish application",
          duration: 60,
          price: 4000, // $40.00
          category: "Pedicure"
        },
        {
          name: "French Manicure",
          description: "Elegant white tips with natural base for a timeless look",
          duration: 50,
          price: 4000, // $40.00
          category: "Manicure"
        },
        {
          name: "Nail Art Design",
          description: "Custom nail art with intricate designs and decorations",
          duration: 90,
          price: 6500, // $65.00
          category: "Nail Art"
        },
        {
          name: "Acrylic Extensions",
          description: "Full set of acrylic nail extensions with shape and length customization",
          duration: 120,
          price: 8000, // $80.00
          category: "Extensions"
        }
      ];

      sampleTreatments.forEach(treatment => {
        createTreatment(treatment);
      });
    }
  }, [treatments, createTreatment]);

  return null; // This component doesn't render anything
}