'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { normalizeSld } from './domain-search-data';

// NOTE: Results are rendered below hero in `DomainSearchResults`.

export default function DomainSearch({
  isFa,
  locale,
  initialQuery,
}: {
  isFa: boolean;
  locale: string;
  initialQuery?: string;
}) {
  const router = useRouter();
  const [query, setQuery] = useState(() => initialQuery ?? '');

  const submit = () => {
    const base = normalizeSld(query);
    const url = base ? `/${locale}/domain?q=${encodeURIComponent(base)}` : `/${locale}/domain`;
    router.push(url);
    router.refresh();
  };

  return (
    <>
      {/* Search bar: button left + input right (as in screenshot) */}
      <div className="flex items-stretch gap-0 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-xl overflow-hidden shadow-[0_0_70px_rgba(59,130,246,0.10)] light:shadow-[0_18px_70px_rgba(2,6,23,0.08)]">
        <button
          type="button"
          onClick={submit}
          className="px-10 py-4 text-sm font-extrabold text-[#0a192f] bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] hover:opacity-90 transition-opacity min-w-[160px]"
        >
          {isFa ? 'جستجو' : 'Search'}
        </button>

        <div className="relative flex-1">
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') submit();
            }}
            placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'}
            className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 light:placeholder:text-slate-500/60 outline-none ${
              isFa ? 'pr-6 pl-6 text-right' : 'pl-6 pr-6 text-left'
            }`}
          />
        </div>
      </div>
    </>
  );
}
