'use client'

import { Button } from '@langgenius/dify-ui/button'
import * as React from 'react'
import { useTranslation } from 'react-i18next'

type SetURLProps = {
  repoUrl: string
  onChange: (value: string) => void
  onNext: () => void
  onCancel: () => void
}

const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel }) => {
  const { t } = useTranslation()
  const inputRef = React.useRef<HTMLInputElement>(null)

  // Focus the input after the dropdown's focus-return animation settles.
  // Using rAF avoids racing the DropdownMenu FloatingFocusManager that returns
  // focus to the trigger on close.
  React.useEffect(() => {
    const frame = requestAnimationFrame(() => {
      inputRef.current?.focus()
    })
    return () => cancelAnimationFrame(frame)
  }, [])

  return (
    <>
      <label
        htmlFor="repoUrl"
        className="flex flex-col items-start justify-center self-stretch text-text-secondary"
      >
        <span className="system-sm-semibold">{t('installFromGitHub.gitHubRepo', { ns: 'plugin' })}</span>
      </label>
      <input
        ref={inputRef}
        type="url"
        id="repoUrl"
        name="repoUrl"
        value={repoUrl}
        onChange={e => onChange(e.target.value)}
        className="shadows-shadow-xs flex grow items-center gap-[2px] self-stretch
          overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2
          system-sm-regular text-ellipsis text-components-input-text-filled"
        placeholder="Please enter GitHub repo URL"
      />
      <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
        <Button
          variant="secondary"
          className="min-w-[72px]"
          onClick={onCancel}
        >
          {t('installModal.cancel', { ns: 'plugin' })}
        </Button>
        <Button
          variant="primary"
          className="min-w-[72px]"
          onClick={onNext}
          disabled={!repoUrl.trim()}
        >
          {t('installModal.next', { ns: 'plugin' })}
        </Button>
      </div>
    </>
  )
}

export default SetURL