import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Container, Heading, Input, Button, Text, toast } from "@medusajs/ui"
import { useState, useEffect } from "react"
import type { DetailWidgetProps, AdminProduct } from "@medusajs/framework/types"
import { sdk } from "../lib/sdk"
import { useTranslation } from "react-i18next"
import { normalizeValue, isContentEqual, deepClone } from "../lib/cms-utils"

// FIX: Destructure `data` from the V2 widget props and rename it to `product`
const RecommendedApplicationsWidget = ({
  data: product
}: DetailWidgetProps<AdminProduct>) => {
  const { t } = useTranslation()
  const [applications, setApplications] = useState<string[]>([])
  const [lastSaved, setLastSaved] = useState<string[] | null>(null)
  const [isSaving, setIsSaving] = useState(false)

  useEffect(() => {
    if (product?.metadata?.recommended_applications) {
      const existingApps = product.metadata.recommended_applications;
      if (Array.isArray(existingApps)) {
        const next = existingApps.map(String)
        setApplications(next);
        setLastSaved(normalizeValue(next))
      }
    } else {
      setApplications([])
      setLastSaved([])
    }
  }, [product])

  const handleAddRow = () => {
    setApplications([...applications, ""])
  }

  const handleRemoveRow = (index: number) => {
    const newApps = applications.filter((_, i) => i !== index)
    setApplications(newApps)
  }

  const handleChange = (index: number, newValue: string) => {
    const newApps = [...applications]
    newApps[index] = newValue
    setApplications(newApps)
  }

  const handleSave = async () => {
    // Safety check
    if (!product || !product.id) {
      toast.error(t("biomketProduct.recommendedApps.productMissing"))
      return
    }

    setIsSaving(true)

    const validApplications = applications.filter(app => app.trim() !== "")

    // Safely merge with existing metadata
    const updatedMetadata = {
      ...(product.metadata || {}),
      recommended_applications: validApplications
    }

    try {
      const response = await sdk.fetch(
        `/admin/products/${product.id}`,
        {
          method: "POST", // IMPORTANT
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            metadata: updatedMetadata,
          }),
        }
      )

      if (response.ok) {
        toast.success(t("biomketProduct.recommendedApps.saveSuccess"))
        setLastSaved(normalizeValue(applications))
        return
      }

      const message = await response.text()
      throw new Error(message || t("biomketProduct.recommendedApps.saveError"))
    } catch (error) {
      console.error(error)
      toast.error(
        error instanceof Error
          ? error.message
          : t("biomketProduct.recommendedApps.saveError")
      )
    } finally {
      setIsSaving(false)
    }
  }

  return (
    <Container className="p-6 ">
      <div className="flex items-center justify-between mb-6">
        <Heading level="h2">{t("biomketProduct.recommendedApps.title")}</Heading>
        <Button variant="secondary" size="small" onClick={handleAddRow}>
          {t("biomketProduct.recommendedApps.addRow")}
        </Button>
      </div>

      <div className="flex flex-col gap-4">
        {applications.length === 0 ? (
          <Text className="text-gray-500">{t("biomketProduct.recommendedApps.empty")}</Text>
        ) : (
          applications.map((app, index) => (
            <div key={index} className="flex items-center gap-4">
              <Input
                placeholder={t("biomketProduct.recommendedApps.placeholder")}
                value={app}
                onChange={(e) => handleChange(index, e.target.value)}
                className="flex-1 w-[600px] "
              />
              <Button
                variant="danger"
                size="small"
                onClick={() => handleRemoveRow(index)}
              >
                {t("biomketProduct.common.delete")}
              </Button>
            </div>
          ))
        )}
      </div>

      <div className="mt-6 flex justify-end">
        <Button 
          variant="primary" 
          onClick={handleSave} 
          isLoading={isSaving}
          disabled={lastSaved !== null && isContentEqual(applications, lastSaved)}
        >
          {t("biomketProduct.recommendedApps.save")}
        </Button>
      </div>
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.after",
})

export default RecommendedApplicationsWidget