import { useEffect, useState } from 'react'
import { useCounterStore } from '../store/counter'
import { API_BASE_URL } from '../lib/api'
import { SkeletonCard } from '../components/Skeleton'

export default function HomePage() {
  const { count, increment, decrement, reset } = useCounterStore()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Simulate loading to show the skeleton placeholder.
    const timer = setTimeout(() => setIsLoading(false), 1000)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="space-y-8">
      <div className="card p-8">
        <h2 className="text-2xl font-bold mb-4">Welcome to <<project_name>></h2>
        <p className="text-gray-600 dark:text-gray-400 mb-6">
          This is a React template scaffolded with Vite, Tailwind CSS, Zustand, and React Router.
          Get started by editing{' '}
          <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm">
            src/pages/HomePage.tsx
          </code>
          .
        </p>

        <div className="flex items-center gap-3">
          <button className="btn-secondary" onClick={decrement} aria-label="Decrement">
            -
          </button>
          <span className="text-lg font-semibold tabular-nums min-w-[3ch] text-center">
            {count}
          </span>
          <button className="btn-primary" onClick={increment} aria-label="Increment">
            +
          </button>
          <button className="btn-outline" onClick={reset}>
            Reset
          </button>
        </div>

        <p className="mt-6 text-sm text-gray-500 dark:text-gray-400">
          API base URL (from{' '}
          <code className="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">.env</code>):{' '}
          <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{API_BASE_URL}</code>
        </p>
      </div>

      <div>
        <h3 className="text-lg font-semibold mb-4">Skeleton Example</h3>
        {isLoading ? (
          <SkeletonCard />
        ) : (
          <div className="p-6 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-md animate-fade-in">
            Content loaded successfully. The skeleton loader gives users visual feedback while data
            is fetching.
          </div>
        )}
      </div>
    </div>
  )
}
