import { defineRouteConfig } from "@medusajs/admin-sdk"
import { DocumentText, PlusMini, PencilSquare, Trash } from "@medusajs/icons"
import {
  Button,
  Container,
  Drawer,
  FocusModal,
  Heading,
  Input,
  Select,
  Table,
  Text,
  toast,
  usePrompt,
} from "@medusajs/ui"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useState } from "react"
import { sdk } from "../../lib/sdk"
import { useTranslation } from "react-i18next"

export const config = defineRouteConfig({
  label: "adminRoutes.formOptions.title",
  translationNs: "translation",
  icon: DocumentText,
})

const FORMS_CONFIG = [
  {
    formName: "Personalized Quote",
    fields: [
      { value: "industry_type", label: "Industry Type" },
      { value: "waste_volume", label: "Approximate Waste Volume" }
    ]
  },
  {
    formName: "Contact Form",
    fields: [
      { value: "inquiry_type", label: "Inquiry Type" }
    ]
  },
  {
    formName: "Waste Registration",
    fields: [
      { value: "company_role", label: "Company Role in Waste Chain" }
    ]
  },
  {
    formName: "Checkout & Transport",
    fields: [
      { value: "truck_type", label: "Truck Type" }
    ]
  }
]

const getFieldLabel = (typeValue: string) => {
  for (const form of FORMS_CONFIG) {
    const field = form.fields.find(f => f.value === typeValue)
    if (field) return field.label
  }
  return typeValue
}

export default function FormOptionsPage() {
  const { t } = useTranslation()
  const [selectedFormName, setSelectedFormName] = useState<string>(FORMS_CONFIG[0].formName)
  const activeForm = FORMS_CONFIG.find(f => f.formName === selectedFormName) || FORMS_CONFIG[0]

  const [selectedType, setSelectedType] = useState<string>(activeForm.fields[0].value)
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [editingOption, setEditingOption] = useState<any>(null)

  const queryClient = useQueryClient()
  const prompt = usePrompt()

  const handleFormChange = (newFormName: string) => {
    setSelectedFormName(newFormName)
    const newForm = FORMS_CONFIG.find(f => f.formName === newFormName)
    if (newForm) {
      setSelectedType(newForm.fields[0].value)
    }
  }

  const { data: optionsData, isLoading } = useQuery({
    queryFn: () => sdk.fetch(`/admin/form-options?type=${selectedType}`).then(res => res.json()),
    queryKey: ["form-options", selectedType],
  })

  const formOptions = optionsData?.form_options || []

  const deleteMutation = useMutation({
    mutationFn: (id: string) => sdk.fetch(`/admin/form-options/${id}`, { method: "DELETE" }).then(res => res.json()),
    onSuccess: () => {
      toast.success(t("adminRoutes.formOptions.toasts.optionDeleted"))
      queryClient.invalidateQueries({ queryKey: ["form-options", selectedType] })
    },
    onError: (error: any) => {
      toast.error(error.message || t("adminRoutes.formOptions.toasts.optionDeleteFailed"))
    }
  })

  const handleDelete = async (id: string) => {
    const res = await prompt({
      title: t("adminRoutes.formOptions.deleteDialog.title"),
      description: t("adminRoutes.formOptions.deleteDialog.description"),
    })
    if (res) {
      deleteMutation.mutate(id)
    }
  }

  return (
    <Container className="p-0">
      <div className="flex flex-col border-b">
        <div className="px-6 py-4 flex items-center justify-between">
          <div>
            <Heading level="h2">Form Options</Heading>
            <Text size="small" className="text-ui-fg-subtle">
              {t("adminRoutes.formOptions.subtitle")}
            </Text>
          </div>
          <Button size="small" variant="secondary" onClick={() => setIsCreateModalOpen(true)}>
            <PlusMini />
            {t("adminRoutes.formOptions.addOption")}
          </Button>
        </div>

        <div className="bg-ui-bg-subtle px-6 py-4 flex items-center gap-x-4 border-t border-ui-border-base">
          <div className="flex flex-col gap-y-1">
            <Text size="small" weight="plus" className="text-ui-fg-subtle">{t("adminRoutes.formOptions.formName")}</Text>
            <Select value={selectedFormName} onValueChange={handleFormChange}>
              <Select.Trigger className="w-[250px] bg-ui-bg-base">
                <Select.Value placeholder={t("adminRoutes.formOptions.selectForm")} />
              </Select.Trigger>
              <Select.Content>
                {FORMS_CONFIG.map((form) => (
                  <Select.Item key={form.formName} value={form.formName}>
                    {form.formName}
                  </Select.Item>
                ))}
              </Select.Content>
            </Select>
          </div>

          <div className="flex flex-col gap-y-1">
            <Text size="small" weight="plus" className="text-ui-fg-subtle">{t("adminRoutes.formOptions.formField")}</Text>
            <Select value={selectedType} onValueChange={setSelectedType}>
              <Select.Trigger className="w-[250px] bg-ui-bg-base">
                <Select.Value placeholder={t("adminRoutes.formOptions.selectField")} />
              </Select.Trigger>
              <Select.Content>
                {activeForm.fields.map((field) => (
                  <Select.Item key={field.value} value={field.value}>
                    {field.label}
                  </Select.Item>
                ))}
              </Select.Content>
            </Select>
          </div>
        </div>
      </div>

      <div className="px-6 py-4">
        <Table>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>{t("adminRoutes.formOptions.columns.label")}</Table.HeaderCell>
              <Table.HeaderCell>{t("adminRoutes.formOptions.columns.value")}</Table.HeaderCell>
              <Table.HeaderCell>{t("adminRoutes.formOptions.columns.actions")}</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {isLoading ? (
              <Table.Row>
                <Table.Cell className="text-center">
                  {t("adminRoutes.common.loading")}
                </Table.Cell>
                <Table.Cell />
                <Table.Cell />
              </Table.Row>
            ) : formOptions.length === 0 ? (
              <Table.Row>
                <Table.Cell className="text-center">
                  {t("adminRoutes.formOptions.empty")}
                </Table.Cell>
                <Table.Cell />
                <Table.Cell />
              </Table.Row>
            ) : (
              formOptions.map((opt: any) => (
                <Table.Row key={opt.id}>
                  <Table.Cell>{opt.label}</Table.Cell>
                  <Table.Cell>{opt.value}</Table.Cell>
                  <Table.Cell>
                    <div className="flex items-center gap-x-2">
                      <Button size="small" variant="transparent" onClick={() => setEditingOption(opt)}>
                        <PencilSquare />
                      </Button>
                      <Button size="small" variant="transparent" onClick={() => handleDelete(opt.id)}>
                        <Trash className="text-ui-fg-error" />
                      </Button>
                    </div>
                  </Table.Cell>
                </Table.Row>
              ))
            )}
          </Table.Body>
        </Table>
      </div>

      <CreateOptionModal
        open={isCreateModalOpen}
        onOpenChange={setIsCreateModalOpen}
        type={selectedType}
        formName={selectedFormName}
        fieldLabel={getFieldLabel(selectedType)}
      />

      {editingOption && (
        <EditOptionDrawer
          open={!!editingOption}
          onOpenChange={(open) => !open && setEditingOption(null)}
          option={editingOption}
        />
      )}
    </Container>
  )
}

function CreateOptionModal({ 
  open, 
  onOpenChange, 
  type,
  formName,
  fieldLabel
}: { 
  open: boolean, 
  onOpenChange: (open: boolean) => void, 
  type: string,
  formName: string,
  fieldLabel: string
}) {
  const { t } = useTranslation()
  const [label, setLabel] = useState("")
  const [value, setValue] = useState("")

  const queryClient = useQueryClient()

  const createMutation = useMutation({
    mutationFn: (data: any) => sdk.fetch(`/admin/form-options`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    }).then(res => res.json()),
    onSuccess: () => {
      toast.success(t("adminRoutes.formOptions.toasts.optionCreated"))
      queryClient.invalidateQueries({ queryKey: ["form-options", type] })
      onOpenChange(false)
      setLabel("")
      setValue("")
    },
    onError: (error: any) => {
      toast.error(error.message || t("adminRoutes.formOptions.toasts.optionCreateFailed"))
    }
  })

  const handleSubmit = () => {
    if (!label || !value) {
      toast.error(t("adminRoutes.formOptions.toasts.labelValueRequired"))
      return
    }
    createMutation.mutate({ type, label, value })
  }

  return (
    <FocusModal open={open} onOpenChange={onOpenChange}>
      <FocusModal.Content>
        <FocusModal.Header>
          <div className="flex items-center justify-end w-full px-4">
            <Button 
              variant="primary" 
              size="small"
              onClick={handleSubmit} 
              isLoading={createMutation.isPending}
            >
              {t("adminRoutes.formOptions.saveOption")}
            </Button>
          </div>
        </FocusModal.Header>
        <FocusModal.Body className="flex flex-col items-center py-16">
          <div className="flex w-full max-w-lg flex-col gap-y-8">
            <div className="flex flex-col gap-y-2">
              <Heading>{t("adminRoutes.formOptions.addNewOption")}</Heading>
              <div className="bg-ui-bg-subtle border border-ui-border-base rounded-md p-4 flex flex-col gap-y-2 mt-2">
                <div className="flex items-center justify-between">
                  <Text size="small" className="text-ui-fg-subtle">{t("adminRoutes.formOptions.form")}:</Text>
                  <Text size="small" weight="plus">{formName}</Text>
                </div>
                <div className="flex items-center justify-between">
                  <Text size="small" className="text-ui-fg-subtle">{t("adminRoutes.formOptions.section")}:</Text>
                  <Text size="small" weight="plus">{fieldLabel}</Text>
                </div>
              </div>
            </div>
            <div className="flex flex-col gap-y-4">
              <div className="flex flex-col gap-y-2">
                <Text size="small" weight="plus">{t("adminRoutes.formOptions.labelRequired")}</Text>
                <Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder={t("adminRoutes.formOptions.placeholders.label")} />
              </div>
              <div className="flex flex-col gap-y-2">
                <Text size="small" weight="plus">{t("adminRoutes.formOptions.valueRequired")}</Text>
                <Input value={value} onChange={(e) => setValue(e.target.value)} placeholder={t("adminRoutes.formOptions.placeholders.value")} />
                <Text size="small" className="text-ui-fg-subtle">{t("adminRoutes.formOptions.valueHint")}</Text>
              </div>
            </div>
          </div>
        </FocusModal.Body>
      </FocusModal.Content>
    </FocusModal>
  )
}

function EditOptionDrawer({ open, onOpenChange, option }: { open: boolean, onOpenChange: (open: boolean) => void, option: any }) {
  const { t } = useTranslation()
  const [label, setLabel] = useState(option.label)
  const [value, setValue] = useState(option.value)

  const queryClient = useQueryClient()

  const updateMutation = useMutation({
    mutationFn: (data: any) => sdk.fetch(`/admin/form-options/${option.id}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    }).then(res => res.json()),
    onSuccess: () => {
      toast.success(t("adminRoutes.formOptions.toasts.optionUpdated"))
      queryClient.invalidateQueries({ queryKey: ["form-options", option.type] })
      onOpenChange(false)
    },
    onError: (error: any) => {
      toast.error(error.message || t("adminRoutes.formOptions.toasts.optionUpdateFailed"))
    }
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!label || !value) {
      toast.error(t("adminRoutes.formOptions.toasts.labelValueRequired"))
      return
    }
    updateMutation.mutate({ label, value })
  }

  return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <Drawer.Content>
        <Drawer.Header>
          <Drawer.Title>{t("adminRoutes.formOptions.editOption")}</Drawer.Title>
        </Drawer.Header>
        <Drawer.Body className="p-4 flex flex-col gap-y-4">
          <div className="flex flex-col gap-y-2">
            <Text size="small" weight="plus">{t("adminRoutes.formOptions.labelRequired")}</Text>
            <Input value={label} onChange={(e) => setLabel(e.target.value)} />
          </div>
          <div className="flex flex-col gap-y-2">
            <Text size="small" weight="plus">{t("adminRoutes.formOptions.valueRequired")}</Text>
            <Input value={value} onChange={(e) => setValue(e.target.value)} />
          </div>
        </Drawer.Body>
        <Drawer.Footer>
          <Drawer.Close asChild>
            <Button variant="secondary">{t("adminRoutes.common.cancel")}</Button>
          </Drawer.Close>
          <Button onClick={handleSubmit} isLoading={updateMutation.isPending}>{t("adminRoutes.common.save")}</Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer>
  )
}