import React, { useEffect, useState } from "react"

type Props = {
  url: string
  loading: boolean
  onChange: (url: string) => void
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
}

export default function DealLinkStep({
  url,
  loading,
  onChange,
  onSubmit,
}: Props) {
  // 👉 Varsayılan: ONLINE
  const [isOffline, setIsOffline] = useState(false)

  // Online seçiliyse ve url boşsa, otomatik https:// koy
  useEffect(() => {
    if (!isOffline && url === "") {
      onChange("https://")
    }
  }, [isOffline, url, onChange])

  return (
    <form
      onSubmit={onSubmit}
      className="space-y-6"
    >
      {/* Başlık */}
      <div>
        <h2 className="text-lg font-medium mb-1">
          Fırsat Türü
        </h2>
        <p className="text-sm text-text-muted">
        </p>
      </div>

      {/* Online / Offline seçimi */}
      <div className="flex gap-3">
        <button
          type="button"
          onClick={() => {
            setIsOffline(false)
            onChange("https://")
          }}
          className={`flex-1 border rounded-md px-4 py-3 text-sm transition
            ${
              !isOffline
                ? "border-primary bg-primary/10 text-primary"
                : "border-white/10 hover:border-white/30"
            }
          `}
        >
          Online satış (link mevcut)
        </button>

        <button
          type="button"
          onClick={() => {
            setIsOffline(true)
            onChange("")
          }}
          className={`flex-1 border rounded-md px-4 py-3 text-sm transition
            ${
              isOffline
                ? "border-primary bg-primary/10 text-primary"
                : "border-white/10 hover:border-white/30"
            }
          `}
        >
          Mağaza içi satış
        </button>
      </div>

      {/* Link input (sadece online) */}
      {!isOffline && (
        <div className="space-y-1">
          <label className="block text-sm text-text-muted">
            Ürün bağlantısı
          </label>
          <input
            type="url"
            value={url}
            onChange={(e) => onChange(e.target.value)}
            placeholder="https://www.siteadi.com/urun"
            required
            className="w-full rounded-md border border-white/10 bg-background px-3 py-2 text-sm
                       focus:outline-none focus:ring-2 focus:ring-primary/40"
          />
        </div>
      )}

      {/* Submit */}
      <div className="pt-2">
        <button
          type="submit"
          disabled={loading}
          className="w-full bg-primary hover:bg-primary-hover text-black font-medium
                     px-4 py-2 rounded-md transition disabled:opacity-60"
        >
          {loading ? "Kontrol ediliyor..." : "Devam et"}
        </button>
      </div>
    </form>
  )
}
