import {
  ArrowRight,
  BadgeCheck,
  Banknote,
  Handshake,
  Search,
  ShieldCheck,
} from 'lucide-react'
import { useState, type FormEvent } from 'react'
import { Link, useNavigate } from 'react-router-dom'

import { AppShell } from '@/components/layout/AppShell'
import { Badge, Button, Card } from '@/components/ui'
import { FaqSection } from '@/features/marketplace/FaqSection'
import { useCategories } from '@/features/marketplace/queries'

/**
 * The marketplace landing page.
 *
 * The brief asks that a visitor immediately understands: find a domain, buy it,
 * sell yours, manage everything in one place. So the search field is the first
 * thing on the page, the four trust guarantees are stated above the fold rather
 * than buried in a help centre, and both sides of the marketplace are addressed
 * before any marketing copy.
 */
export function HomePage() {
  const navigate = useNavigate()
  const [query, setQuery] = useState('')
  const { data: categories } = useCategories({ featured: true })

  const handleSearch = (event: FormEvent) => {
    event.preventDefault()

    const trimmed = query.trim()
    navigate(trimmed === '' ? '/domains' : `/domains?q=${encodeURIComponent(trimmed)}`)
  }

  return (
    <AppShell>
      {/* ---------------------------------------------------------------- */}
      {/* Search                                                            */}
      {/* ---------------------------------------------------------------- */}
      <section className="border-b border-border-subtle">
        <div className="container-page py-16 sm:py-20 lg:py-28">
          <div className="mx-auto max-w-3xl text-center">
            <Badge tone="accent" icon={<ShieldCheck aria-hidden className="size-3.5" />}>
              Verified ownership on every listing
            </Badge>

            <h1 className="mt-6 text-4xl font-semibold tracking-[-0.03em] text-text-primary sm:text-5xl lg:text-[3.5rem] lg:leading-[1.05]">
              Find the domain your business deserves
            </h1>

            <p className="mx-auto mt-5 max-w-xl text-base text-text-secondary sm:text-lg">
              Buy and sell domain names with verified ownership, secure payment and transfers we
              confirm before anyone is paid.
            </p>

            <form onSubmit={handleSearch} className="mx-auto mt-9 max-w-2xl" role="search">
              <label htmlFor="home-search" className="sr-only">
                Search for a domain name
              </label>

              <div className="flex flex-col gap-2.5 sm:flex-row">
                <div className="relative flex-1">
                  <Search
                    aria-hidden
                    className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-text-muted"
                  />
                  <input
                    id="home-search"
                    type="search"
                    value={query}
                    onChange={(event) => setQuery(event.target.value)}
                    placeholder="Find your perfect domain…"
                    autoComplete="off"
                    className="h-14 w-full rounded-lg border border-border-control bg-surface pr-4 pl-12 text-base text-text-primary shadow-xs transition-colors duration-150 placeholder:text-text-muted hover:border-border-strong focus:border-border-accent focus:outline-none"
                  />
                </div>

                <Button type="submit" size="lg" className="h-14 sm:w-36">
                  Search
                </Button>
              </div>

              <p className="mt-3 text-sm text-text-muted">
                Try{' '}
                {['coffee.com', 'coffeehub.io', 'coffee.ai'].map((example, index) => (
                  <span key={example}>
                    {index > 0 && ', '}
                    <button
                      type="button"
                      onClick={() => setQuery(example)}
                      className="underline decoration-border-strong underline-offset-2 hover:text-text-secondary"
                    >
                      {example}
                    </button>
                  </span>
                ))}
              </p>
            </form>
          </div>
        </div>
      </section>

      {/* ---------------------------------------------------------------- */}
      {/* Trust                                                             */}
      {/* ---------------------------------------------------------------- */}
      <section aria-labelledby="trust-heading" className="border-b border-border-subtle">
        <div className="container-page py-14">
          <h2 id="trust-heading" className="sr-only">
            How Domainsansar protects both sides
          </h2>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {[
              {
                Icon: BadgeCheck,
                title: 'Ownership is proved',
                body: 'Every seller proves control of a domain by DNS record or registrar check before it can be listed.',
              },
              {
                Icon: ShieldCheck,
                title: 'Payment held securely',
                body: 'Funds are held by a licensed payment provider from checkout until the transfer is confirmed.',
              },
              {
                Icon: Handshake,
                title: 'Transfers we verify',
                body: 'A sale completes when we independently confirm the domain moved — not when a seller says so.',
              },
              {
                Icon: Banknote,
                title: 'Fees shown up front',
                body: 'The full total, including every marketplace fee, is displayed before you pay anything.',
              },
            ].map(({ Icon, title, body }) => (
              <div key={title}>
                <div
                  aria-hidden
                  className="flex size-10 items-center justify-center rounded-lg border border-border-subtle bg-surface-sunken text-text-accent"
                >
                  <Icon className="size-5" />
                </div>
                <h3 className="mt-4 text-sm font-semibold text-text-primary">{title}</h3>
                <p className="mt-1.5 text-sm text-text-secondary">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------------------------------------------------------- */}
      {/* Categories                                                        */}
      {/* ---------------------------------------------------------------- */}
      {categories !== undefined && categories.length > 0 && (
        <section aria-labelledby="categories-heading" className="border-b border-border-subtle">
          <div className="container-page py-14">
            <div className="flex items-end justify-between gap-4">
              <div>
                <h2
                  id="categories-heading"
                  className="text-xl font-semibold tracking-[-0.02em] text-text-primary"
                >
                  Browse by category
                </h2>
                <p className="mt-1.5 text-sm text-text-secondary">
                  Curated groupings across the marketplace.
                </p>
              </div>

              <Link
                to="/categories"
                className="hidden shrink-0 items-center gap-1 text-sm font-medium text-text-accent underline underline-offset-4 sm:inline-flex"
              >
                All categories
                <ArrowRight aria-hidden className="size-3.5" />
              </Link>
            </div>

            <div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
              {categories.slice(0, 8).map((category) => (
                <Link key={category.slug} to={`/domains?category=${category.slug}`}>
                  <Card interactive className="h-full px-4 py-3.5">
                    <p className="text-sm font-medium text-text-primary">{category.name}</p>
                    {category.description !== null && (
                      <p className="mt-1 line-clamp-2 text-xs text-text-secondary">
                        {category.description}
                      </p>
                    )}
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ---------------------------------------------------------------- */}
      {/* Both sides of the marketplace                                     */}
      {/* ---------------------------------------------------------------- */}
      <section aria-labelledby="paths-heading" className="container-page py-16">
        <h2 id="paths-heading" className="sr-only">
          Buying and selling on Domainsansar
        </h2>

        <div className="grid gap-6 lg:grid-cols-2">
          {[
            {
              eyebrow: 'For buyers',
              title: 'Search, negotiate, own',
              steps: [
                'Search and filter by TLD, price, length and category',
                'Buy now, or open a negotiation with an offer',
                'Pay securely and track the transfer to completion',
              ],
              cta: { to: '/domains', label: 'Browse domains' },
              variant: 'primary' as const,
            },
            {
              eyebrow: 'For sellers',
              title: 'Verify, list, get paid',
              steps: [
                'Prove ownership with a single DNS record',
                'Set a price, a minimum offer, or accept offers only',
                'Get paid once the transfer is confirmed complete',
              ],
              cta: { to: '/sell', label: 'Start selling' },
              variant: 'secondary' as const,
            },
          ].map((path) => (
            <Card key={path.eyebrow} elevation="raised" className="flex flex-col p-7">
              <p className="text-xs font-semibold tracking-wide text-text-accent uppercase">
                {path.eyebrow}
              </p>

              <h3 className="mt-2 text-2xl font-semibold tracking-[-0.02em] text-text-primary">
                {path.title}
              </h3>

              <ol className="mt-5 flex flex-1 flex-col gap-3">
                {path.steps.map((step, index) => (
                  <li key={step} className="flex gap-3 text-sm text-text-secondary">
                    <span
                      aria-hidden
                      data-numeric
                      className="flex size-5 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface-sunken text-xs font-medium text-text-muted"
                    >
                      {index + 1}
                    </span>
                    {step}
                  </li>
                ))}
              </ol>

              <div className="mt-7">
                <Link to={path.cta.to}>
                  <Button variant={path.variant} size="lg" fullWidth>
                    {path.cta.label}
                  </Button>
                </Link>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* ---------------------------------------------------------------- */}
      {/* Questions                                                         */}
      {/* ---------------------------------------------------------------- */}
      <FaqSection />
    </AppShell>
  )
}