"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { useTranslation } from "react-i18next"

type PriceData = {
  id: number;
  type: string;
  product: string;
  productCode: string;
  price: number;
  currency: string;
  spread1?: number;
  currency1?: string;
  spread2?: number;
  currency2?: string;
  calculated?: {
    price1: number;
    price2: number;
    price3: number;
  };
  carryPrice?: number;
  carryPriceCurrency?: string;
  carry?: number;
  carryCurrency?: string;
  matifEuronextExchange?: string;
  matifPrice?: number;
  matifCurrency?: string;
  provisionalPrice?: number;
  provisionalCurrency?: string;
  collateralPrice?: number;
  collateralCurrency?: string;
  deposit?: number;
  depositCurrency?: string;
  additionalMentions?: string;
}

export default function PriceDetailPage() {
  const params = useParams()
  const [price, setPrice] = useState<PriceData | null>(null)
  const { t } = useTranslation()

  useEffect(() => {
    fetch("/price/api/pricedata")
      .then(res => res.json())
      .then(data => {
        const priceData = data.find((item: PriceData) => item.id === Number(params.id))
        setPrice(priceData)
        console.log(priceData)
      })
  }, [params.id])

  if (!price) return null

  return (
    <SidebarProvider style={{ "--sidebar-width": "calc(var(--spacing) * 72)", "--header-height": "calc(var(--spacing) * 12)" } as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title="price.title" />
        <div className="flex flex-1 flex-col">
          <div className="@container/main flex flex-1 flex-col gap-2">
            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
              <div className="flex justify-between items-center px-4 lg:px-6">
                <h2 className="text-2xl font-bold">{`${price.product} - ${price.type}`}</h2>
              </div>
              <div className="px-4 lg:px-6">
                <div className="grid grid-cols-3 gap-4 mb-6">
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">Product Code</span>
                    <Input value={price.productCode} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">Product Price</span>
                    <Input value={price.price} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">Product Currency</span>
                    <Input value={price.currency} readOnly />
                  </div>
                </div>
                {price.type === "Fixed" && (
                  <div className="space-y-4">
                   
                    <div className="grid grid-cols-2 gap-4">
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Spread1</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.spread1 || 12} 
                            onChange={e => {
                              const basePrice = Number(price.price || 0);
                              const spread1 = Number(e.target.value || 12);
                              const spread2 = Number(price.spread2 || 20);
                              const calculated = {
                                price1: basePrice,
                                price2: basePrice - spread1,
                                price3: basePrice - spread2
                              };
                              setPrice({ 
                                ...price, 
                                spread1: Number(e.target.value),
                                calculated
                              });
                            }} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.currency1 || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              currency1: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR/to</SelectItem>
                              <SelectItem value="USD">USD/to</SelectItem>
                              <SelectItem value="RON">RON/to</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Spread2</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.spread2 || 20} 
                            onChange={e => {
                              const basePrice = Number(price.price || 0);
                              const spread1 = Number(price.spread1 || 12);
                              const spread2 = Number(e.target.value || 20);
                              const calculated = {
                                price1: basePrice,
                                price2: basePrice - spread1,
                                price3: basePrice - spread2
                              };
                              setPrice({ 
                                ...price, 
                                spread2: Number(e.target.value),
                                calculated
                              });
                            }} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.currency2 || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              currency2: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR/to</SelectItem>
                              <SelectItem value="USD">USD/to</SelectItem>
                              <SelectItem value="RON">RON/to</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>
                    <div className="grid grid-cols-3 gap-4 mt-4">
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Price1 (Base Price)</span>
                        <Input value={price.price || 0} readOnly />
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Price2 (Price - Spread1)</span>
                        <Input value={price.calculated?.price2 || 0} readOnly />
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Price3 (Price - Spread2)</span>
                        <Input value={price.calculated?.price3 || 0} readOnly />
                      </div>
                    </div>
                  </div>
                )}
                {price.type === "Carry" && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Price</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.carryPrice || 187} 
                            onChange={e => setPrice({ 
                              ...price, 
                              carryPrice: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.carryPriceCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              carryPriceCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR/to</SelectItem>
                              <SelectItem value="USD">USD/to</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Carry</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.carry || 2} 
                            onChange={e => setPrice({ 
                              ...price, 
                              carry: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.carryCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              carryCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR/to</SelectItem>
                              <SelectItem value="USD">USD/to</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
                {price.type === "Matif" && (
                  <div className="space-y-4">
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Matif Euronext Exchange</span>
                      <Select 
                        value={price.matifEuronextExchange || "march-25"} 
                        onValueChange={val => setPrice({ 
                          ...price, 
                          matifEuronextExchange: val 
                        })}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="march-25">March 2025</SelectItem>
                          <SelectItem value="september-25">September 2025</SelectItem>
                          <SelectItem value="december-25">December 2025</SelectItem>
                          <SelectItem value="march-26">March 2026</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Matif Price</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.matifPrice || 29.50} 
                            onChange={e => setPrice({ 
                              ...price, 
                              matifPrice: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.matifCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              matifCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR</SelectItem>
                              <SelectItem value="USD">USD</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Provisional Price</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.provisionalPrice || 187.00} 
                            onChange={e => setPrice({ 
                              ...price, 
                              provisionalPrice: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.provisionalCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              provisionalCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR</SelectItem>
                              <SelectItem value="USD">USD</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Collateral</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.collateralPrice || 170.40} 
                            onChange={e => setPrice({ 
                              ...price, 
                              collateralPrice: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.collateralCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              collateralCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR</SelectItem>
                              <SelectItem value="USD">USD</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Deposit</span>
                        <div className="flex gap-2">
                          <Input 
                            value={price.deposit || 20} 
                            onChange={e => setPrice({ 
                              ...price, 
                              deposit: Number(e.target.value)
                            })} 
                            className="w-1/2" 
                          />
                          <Select 
                            value={price.depositCurrency || "EUR"} 
                            onValueChange={val => setPrice({ 
                              ...price, 
                              depositCurrency: val 
                            })}
                          >
                            <SelectTrigger className="w-1/2">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="EUR">EUR</SelectItem>
                              <SelectItem value="USD">USD</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Additional Mentions</span>
                      <textarea 
                        value={price.additionalMentions || ""} 
                        onChange={e => setPrice({ 
                          ...price, 
                          additionalMentions: e.target.value 
                        })} 
                        className="border rounded p-2 min-h-[80px] w-full"
                      />
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}