"use client"

import { useState, useEffect } from 'react'
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Component() {
  const [values, setValues] = useState({
    cost: 100,
    listPrice: 200,
    netPrice: 150,
    discount: 0.25,
    margin: 0.33
  })

  const calculateValues = (updatedField: keyof typeof values, newValue: number) => {
    let newValues = { ...values, [updatedField]: newValue }

    switch (updatedField) {
      case 'cost':
        newValues.netPrice = newValue / (1 - newValues.margin)
        newValues.discount = 1 - (newValues.netPrice / newValues.listPrice)
        break
      case 'listPrice':
        newValues.discount = 1 - (newValues.netPrice / newValue)
        break
      case 'netPrice':
        newValues.cost = newValue * (1 - newValues.margin)
        newValues.discount = 1 - (newValue / newValues.listPrice)
        break
      case 'discount':
        newValues.netPrice = newValues.listPrice * (1 - newValue)
        newValues.cost = newValues.netPrice * (1 - newValues.margin)
        break
      case 'margin':
        newValues.netPrice = newValues.cost / (1 - newValue)
        newValues.discount = 1 - (newValues.netPrice / newValues.listPrice)
        break
    }

    setValues(newValues)
  }

  const handleInputChange = (field: keyof typeof values, value: string) => {
    const numValue = parseFloat(value)
    if (!isNaN(numValue)) {
      calculateValues(field, numValue)
    }
  }

  // Calculate all values on mount to ensure consistency
  useEffect(() => {
    calculateValues('cost', values.cost)
    calculateValues('listPrice', values.listPrice)
    calculateValues('netPrice', values.netPrice)
    calculateValues('discount', values.discount)
    calculateValues('margin', values.margin)
  }, [])

  return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle className="text-2xl font-bold text-center">Interactive Pricing Calculator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-5 gap-4">
          {[
            { label: "Cost", field: "cost" },
            { label: "List Price", field: "listPrice" },
            { label: "Net Price", field: "netPrice" },
            { label: "Discount", field: "discount" },
            { label: "% Margin", field: "margin" },
          ].map((item) => (
            <div key={item.field} className="flex flex-col space-y-1.5">
              <Label htmlFor={item.field}>{item.label}</Label>
              <Input
                id={item.field}
                value={values[item.field as keyof typeof values].toFixed(2)}  // toFixed only for display
                onChange={(e) => handleInputChange(item.field as keyof typeof values, e.target.value)}
                type="number"
                step="any"
              />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}