"use client"
import { useRef, useState } from "react"
import { Link2, Loader2, Upload } from "lucide-react"

interface Props {
  loading?: boolean
  onSubmitUrl: (url: string) => void
  onUploadFile: (file: File) => void
}

export function UrlInput({ loading, onSubmitUrl, onUploadFile }: Props) {
  const [url, setUrl] = useState("")
  const [dragOver, setDragOver] = useState(false)
  const fileRef = useRef<HTMLInputElement>(null)

  const pickFile = () => fileRef.current?.click()

  const handleFiles = (files: FileList | null) => {
    if (!files || files.length === 0) return
    const f = files[0]
    if (!f.type.startsWith("video/") && !/\.(mp4|mov|webm|mkv|m4v)$/i.test(f.name)) {
      // sonner is in page; keep simple here
      console.warn("not a video file:", f.name)
      return
    }
    onUploadFile(f)
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        const trimmed = url.trim()
        if (trimmed) onSubmitUrl(trimmed)
      }}
      onDragOver={(e) => {
        e.preventDefault()
        if (!loading) setDragOver(true)
      }}
      onDragLeave={() => setDragOver(false)}
      onDrop={(e) => {
        e.preventDefault()
        setDragOver(false)
        if (loading) return
        handleFiles(e.dataTransfer.files)
      }}
      className="relative w-full"
    >
      <div
        className={`glass-card flex items-center gap-3 px-5 py-4 transition ${
          dragOver ? "ring-2 ring-white/40 bg-white/[0.08]" : ""
        }`}
      >
        <Link2 className="h-5 w-5 shrink-0 text-white/40" />
        <input
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder={dragOver ? "松开以上传视频" : "粘贴 TikTok 链接，或拖入 / 上传本地视频"}
          className="w-full bg-transparent text-white placeholder:text-white/30 outline-none text-[15px]"
          disabled={loading}
        />
        {/* 上传按钮 */}
        <button
          type="button"
          onClick={pickFile}
          disabled={loading}
          className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-white/15 bg-white/5 hover:bg-white/10 px-3 py-2 text-xs text-white/80 disabled:opacity-40 disabled:cursor-not-allowed transition"
          title="上传本地视频"
        >
          <Upload className="h-3.5 w-3.5" />
          上传
        </button>
        {/* 提交按钮 */}
        <button
          type="submit"
          disabled={loading || !url.trim()}
          className="shrink-0 rounded-md bg-white text-black px-4 py-2 text-sm font-medium hover:bg-white/90 disabled:opacity-40 disabled:cursor-not-allowed transition inline-flex items-center gap-2"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          {loading ? "处理中" : "提交"}
        </button>
        <input
          ref={fileRef}
          type="file"
          accept="video/mp4,video/quicktime,video/webm,video/x-matroska,.mp4,.mov,.webm,.mkv,.m4v"
          className="hidden"
          onChange={(e) => handleFiles(e.target.files)}
        />
      </div>
      <div className="mt-2 text-[11px] text-white/30 px-1">
        支持：TikTok 链接 · 拖入视频文件 · 点击上传 · 格式 mp4 / mov / webm / mkv / m4v
      </div>
    </form>
  )
}