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) {
  const [isOffline, setIsOffline] = useState(false)

  useEffect(() => {
    if (!isOffline && url === "") onChange("https://")
  }, [isOffline, url, onChange])

  return (
    <form onSubmit={onSubmit} className="max-w-3xl mx-auto px-4">
      <div className="rounded-3xl border border-border bg-surface shadow-lg p-5 sm:p-6">
        {/* Başlık */}
        <div className="mb-5">
          <h2 className="text-lg font-semibold text-text">Fırsat Türü</h2>
          <p className="text-sm text-text-muted mt-1">
            Satış türünü seçin. Online ise ürün linkini ekleyin.
          </p>
        </div>

        {/* Segmented control */}
        <div className="rounded-2xl border border-border bg-background p-1 flex gap-1">
          <button
            type="button"
            onClick={() => {
              setIsOffline(false)
              onChange("https://")
            }}
            className={[
              "flex-1 rounded-xl px-4 py-3 text-sm font-semibold transition border",
              !isOffline
                ? "bg-primary-soft text-primary border-primary/40"
                : "bg-transparent text-text-muted border-transparent hover:bg-surface-2 hover:text-text",
            ].join(" ")}
          >
            Online satış
            <div className={!isOffline ? "text-xs font-medium text-text-muted mt-1" : "text-xs font-medium text-text-muted mt-1"}>
              Link mevcut
            </div>
          </button>

          <button
            type="button"
            onClick={() => {
              setIsOffline(true)
              onChange("")
            }}
            className={[
              "flex-1 rounded-xl px-4 py-3 text-sm font-semibold transition border",
              isOffline
                ? "bg-primary-soft text-primary border-primary/40"
                : "bg-transparent text-text-muted border-transparent hover:bg-surface-2 hover:text-text",
            ].join(" ")}
          >
            Mağaza içi
            <div className="text-xs font-medium text-text-muted mt-1">Link yok</div>
          </button>
        </div>

        {/* Link input */}
        {!isOffline && (
          <div className="mt-5">
            <label className="block text-sm font-semibold text-text">
              Ürün bağlantısı
            </label>
            <p className="text-xs text-text-muted mt-1">
              Linki yapıştırın, sistem satıcıyı otomatik algılayabilir.
            </p>

            <input
              type="url"
              value={url}
              onChange={(e) => onChange(e.target.value)}
              placeholder="https://www.siteadi.com/urun"
              required
              className="mt-3 w-full rounded-xl border border-border bg-surface-2 px-3 py-2 text-sm text-text placeholder:text-text-muted outline-none focus:ring-2 focus:ring-[var(--color-primary-ring)]"
            />
          </div>
        )}

        {/* Offline hint */}
        {isOffline && (
          <div className="mt-5 rounded-2xl border border-border bg-surface-2 p-4">
            <div className="text-sm font-semibold text-text">
              Mağaza içi satış seçildi
            </div>
            <div className="text-xs text-text-muted mt-1">
              Bir sonraki adımda satıcı ve detayları manuel gireceksiniz.
            </div>
          </div>
        )}

        {/* Submit */}
        <div className="mt-6">
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-xl bg-primary px-4 py-3 font-semibold text-[color:var(--color-on-primary)] transition hover:bg-primary-hover disabled:opacity-60 disabled:cursor-not-allowed"
          >
            {loading ? "Kontrol ediliyor..." : "Devam et"}
          </button>

          <div className="text-xs text-text-muted mt-3">
            Devam ederek fırsat ekleme adımına geçersiniz.
          </div>
        </div>
      </div>
    </form>
  )
}
