import type { DealDraft } from "../../models/DealDraft"

type Props = {
  data: DealDraft
  onChange: (data: DealDraft) => void
  onBack: () => void
  onSubmit: () => void
}

export default function DealDetailsStep({
  data,
  onChange,
  onBack,
  onSubmit,
}: Props) {
  const hasDetectedCompany = Boolean(data.sellerId)

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        onSubmit()
      }}
      className="max-w-2xl mx-auto flex flex-col gap-6"
    >
      {/* BAŞLIK */}
      <div>
        <h2 className="text-lg font-medium mb-1">
          Fırsat Detayları
        </h2>
        <p className="text-sm text-text-muted">
          Fırsata ait temel bilgileri aşağıdaki alanlara giriniz.
        </p>
      </div>

      {/* BAŞLIK */}
      <div className="flex flex-col gap-1">
        <label className="text-sm font-medium">
          Fırsat başlığı
        </label>
        <input
          type="text"
          placeholder="Örn: %40 indirimli spor ayakkabı"
          value={data.title}
          onChange={(e) =>
            onChange({ ...data, title: e.target.value })
          }
          className="border rounded-md px-3 py-2"
          required
        />
        <p className="text-xs text-text-muted">
          Kullanıcının ilk göreceği kısa ve net başlık.
        </p>
      </div>

      {/* AÇIKLAMA */}
      <div className="flex flex-col gap-1">
        <label className="text-sm font-medium">
          Açıklama
        </label>
        <textarea
          placeholder="İndirim koşulları, geçerlilik süresi veya ek bilgiler..."
          value={data.description ?? ""}
          onChange={(e) =>
            onChange({ ...data, description: e.target.value })
          }
          className="border rounded-md px-3 py-2 h-28 resize-none"
        />
        <p className="text-xs text-text-muted">
          İsteğe bağlıdır. Fırsat hakkında ek bilgi verebilirsiniz.
        </p>
      </div>

        {/* SATICI */}
        <div className="flex flex-col gap-1">
        <label className="text-sm font-medium">
            Satıcı bilgisi
        </label>

        {hasDetectedCompany ? (
            <>
            <input
                type="text"
                value={data.sellerName ?? ""}
                disabled
                className="border rounded-md px-3 py-2 bg-gray-100 text-gray-700 cursor-not-allowed"
            />
            <p className="text-xs text-text-muted">
                Satıcı bilgisi ürün bağlantısından otomatik olarak algılanmıştır.
            </p>
            </>
        ) : (
            <>
            <input
                type="text"
                placeholder="Satıcı adını giriniz"
                value={data.customCompany ?? ""}
                onChange={(e) =>
                onChange({
                    ...data,
                    customCompany: e.target.value,
                })
                }
                className="border rounded-md px-3 py-2"
            />
            <p className="text-xs text-text-muted">
                Satıcı bilgisi otomatik olarak algılanamazsa manuel olarak girilebilir.
            </p>
            </>
        )}
        </div>

      {/* GÖRSEL */}
      <div className="flex flex-col gap-1">
        <label className="text-sm font-medium">
          Görsel bağlantısı
        </label>
        <input
          type="url"
          placeholder="https://www.siteadi.com/gorsel.jpg"
          value={data.imageUrl ?? ""}
          onChange={(e) =>
            onChange({ ...data, imageUrl: e.target.value })
          }
          className="border rounded-md px-3 py-2"
        />
        <p className="text-xs text-text-muted">
          Ürünü temsil eden bir görsel bağlantısı ekleyebilirsiniz.
        </p>
      </div>

      {/* FİYAT */}
      <div className="flex flex-col gap-1">
        <label className="text-sm font-medium">
          Fiyat
        </label>
        <input
          type="number"
          placeholder="Örn: 999"
          value={data.price ?? ""}
          onChange={(e) =>
            onChange({
              ...data,
              price: e.target.value
                ? Number(e.target.value)
                : undefined,
            })
          }
          className="border rounded-md px-3 py-2"
        />
        <p className="text-xs text-text-muted">
          KDV dahil satış fiyatını giriniz.
        </p>
      </div>

      {/* BUTONLAR */}
      <div className="flex gap-3 pt-2">
        <button
          type="button"
          onClick={onBack}
          className="border px-4 py-2 rounded-md"
        >
          Geri
        </button>

        <button
          type="submit"
          className="bg-primary text-white px-6 py-2 rounded-md"
        >
          Gönder
        </button>
      </div>
    </form>
  )
}
