import React, { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useDebounce } from './useDebounce'; // assuming the debounce hook is in the same directory

const PriceCalculator = () => {
  const fixedCost = 100;
  const fixedListPrice = fixedCost * 4;

  const [discount, setDiscount] = useState(0);
  const [margin, setMargin] = useState(75);
  const [netPrice, setNetPrice] = useState(fixedListPrice);

  // Debounced values
  const debouncedDiscount = useDebounce(discount, 500);
  const debouncedMargin = useDebounce(margin, 500);
  const debouncedNetPrice = useDebounce(netPrice, 500);

  const calculateNetPrice = (disc) => {
    return fixedListPrice * (1 - disc / 100);
  };

  const calculateDiscount = (net) => {
    return ((fixedListPrice - net) / fixedListPrice) * 100;
  };

  const calculateMargin = (net) => {
    return ((net - fixedCost) / net) * 100;
  };

  const handleDiscountChange = (value) => {
    const newDiscount = Number(value);
    setDiscount(newDiscount);
    const newNetPrice = calculateNetPrice(newDiscount);
    setNetPrice(newNetPrice);
    setMargin(calculateMargin(newNetPrice));
  };

  const handleMarginChange = (value) => {
    const newMargin = Number(value);
    setMargin(newMargin);
    const newNetPrice = fixedCost / (1 - newMargin / 100);
    setNetPrice(newNetPrice);
    setDiscount(calculateDiscount(newNetPrice));
  };

  const handleNetPriceChange = (value) => {
    const newNetPrice = Number(value);
    setNetPrice(newNetPrice);
    setDiscount(calculateDiscount(newNetPrice));
    setMargin(calculateMargin(newNetPrice));
  };

  return (
    <div className="space-y-4 p-4">
      <div>
        <Label htmlFor="cost">Cost (Fixed)</Label>
        <Input
          id="cost"
          type="number"
          value={fixedCost.toFixed(2)}
          readOnly
        />
      </div>
      <div>
        <Label htmlFor="listPrice">List Price (Fixed at 4x Cost)</Label>
        <Input
          id="listPrice"
          type="number"
          value={fixedListPrice.toFixed(2)}
          readOnly
        />
      </div>
      <div>
        <Label htmlFor="discount">Discount (%)</Label>
        <Input
          id="discount"
          type="number"
          value={discount.toFixed(2)}
          onChange={(e) => handleDiscountChange(e.target.value)}
        />
      </div>
      <div>
        <Label htmlFor="margin">Margin (%)</Label>
        <Input
          id="margin"
          type="number"
          value={margin.toFixed(2)}
          onChange={(e) => handleMarginChange(e.target.value)}
        />
      </div>
      <div>
        <Label htmlFor="netPrice">Net Price</Label>
        <Input
          id="netPrice"
          type="number"
          value={netPrice.toFixed(2)}
          onChange={(e) => handleNetPriceChange(e.target.value)}
        />
      </div>
    </div>
  );
};

export default PriceCalculator;