'use client'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
import { useCallback } from 'react'

export function ArticleFilters() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()

  // Read current filter values directly from the URL — no local state mirror
  const category = searchParams.get('category') ?? 'all'
  const sort = searchParams.get('sort') ?? 'latest'
  const page = Number(searchParams.get('page') ?? '1')

  // Write new values back to the URL — this becomes the source of truth
  const updateFilter = useCallback(
    (key: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString())
      if (value === '' || value === 'all') {
        params.delete(key)
      } else {
        params.set(key, value)
      }
      // Reset page when filter changes
      if (key !== 'page') params.delete('page')
      router.push(`${pathname}?${params.toString()}`, { scroll: false })
    },
    [searchParams, router, pathname]
  )

  return (
    <div>
      <select
        value={category}
        onChange={(e) => updateFilter('category', e.target.value)}
      >
        <option value="all">All</option>
        <option value="frontend">Frontend</option>
        <option value="backend">Backend</option>
      </select>

      <select
        value={sort}
        onChange={(e) => updateFilter('sort', e.target.value)}
      >
        <option value="latest">Latest</option>
        <option value="popular">Popular</option>
      </select>
    </div>
  )
}

// This component derives its display directly from URL params — no state at all
export function ArticleGrid({ articles }: { articles: Article[] }) {
  const searchParams = useSearchParams()
  const category = searchParams.get('category') ?? 'all'
  const sort = searchParams.get('sort') ?? 'latest'

  const filtered = useMemo(() => {
    return articles
      .filter((a) => category === 'all' || a.category === category)
      .sort((a, b) => sort === 'popular'
        ? b.views - a.views
        : new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
      )
  }, [articles, category, sort])

  return <>{filtered.map((a) => <ArticleCard key={a.slug} article={a} />)}</>
}

// Fully controlled — React is the source of truth
function ControlledInput() {
  const [value, setValue] = useState('')
  return <input value={value} onChange={(e) => setValue(e.target.value)} />
}

// Fully uncontrolled — the DOM is the source of truth
function UncontrolledInput() {
  const ref = useRef<HTMLInputElement>(null)
  const handleSubmit = () => console.log(ref.current?.value)
  return <input ref={ref} defaultValue="" />
}

// A 20-field form where every field is controlled:
function LargeForm() {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  // ... 18 more useState calls

  // Every keystroke in ANY field:
  // 1. Fires onChange
  // 2. Calls the setState for that field
  // 3. React schedules a re-render of LargeForm
  // 4. All 20 fields re-render (even the 19 that didn't change)
  // 5. All child components (labels, error messages, buttons) re-render
}

import { useForm, SubmitHandler } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: 'Passwords do not match',
  path: ['confirmPassword'],
})

type FormValues = z.infer<typeof schema>

function SignupForm() {
  const {
    register,       // connects a DOM input to RHF's tracking
    handleSubmit,   // wraps your onSubmit with validation
    formState: { errors, isSubmitting, isDirty },
    reset,
    watch,          // subscribe to a field's value reactively (use sparingly)
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '', confirmPassword: '' },
  })

  const onSubmit: SubmitHandler<FormValues> = async (data) => {
    await createAccount(data)
    reset()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input {...register('email')} placeholder="Email" />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <div>
        <input {...register('password')} type="password" placeholder="Password" />
        {errors.password && <span>{errors.password.message}</span>}
      </div>

      <div>
        <input {...register('confirmPassword')} type="password" placeholder="Confirm" />
        {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
      </div>

      <button type="submit" disabled={isSubmitting || !isDirty}>
        {isSubmitting ? 'Creating account...' : 'Sign up'}
      </button>
    </form>
  )
}