"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"

type FieldName = 'cost' | 'listPrice' | 'netPrice' | 'discount' | 'margin'

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

  const [calculatedValues, setCalculatedValues] = useState({...values})

  const handleInputChange = (field: FieldName, value: string) => {
    setValues(prev => ({ ...prev, [field]: value }))
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      const newValues = {...values}
      const cost = parseFloat(values.cost)
      const listPrice = parseFloat(values.listPrice)
      const margin = parseFloat(values.margin)

      if (!isNaN(cost) && !isNaN(margin)) {
        newValues.netPrice = (cost / (1 - margin)).toFixed(2)
        if (!isNaN(listPrice)) {
          newValues.discount = (1 - cost / (1 - margin) / listPrice).toFixed(2)
        }
      }

      setCalculatedValues(newValues)
    }, 500)

    return () => clearTimeout(timer)
  }, [values])

  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-1 md: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 FieldName]}
                onChange={(e) => handleInputChange(item.field as FieldName, e.target.value)}
              />
              {values[item.field as FieldName] !== calculatedValues[item.field as FieldName] && (
                <div className="text-sm text-muted-foreground">
                  Calculated: {calculatedValues[item.field as FieldName]}
                </div>
              )}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}