import React, { useState, useCallback } from 'react'
import axios from 'axios'
import PostCard        from '../../Feed/PostCard'
import PostComposer    from '../../Feed/PostComposer'
import PostCardSkeleton from '../../Feed/PostCardSkeleton'
import FeedSidebar     from '../../Feed/FeedSidebar'

function formatCompactNumber(value) {
  return Number(value ?? 0).toLocaleString()
}

function EmptyPostsState({ isOwner, username }) {
  return (
    <div className="flex flex-col items-center justify-center rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-20 text-center">
      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-3xl border border-white/10 bg-white/[0.04] text-slate-500">
        <i className="fa-regular fa-newspaper text-2xl" />
      </div>
      <p className="mb-1 text-lg font-semibold text-white">No posts yet</p>
      {isOwner ? (
        <p className="max-w-sm text-sm leading-relaxed text-slate-400">
          Share works in progress, announce releases, or add a bit of personality beyond the gallery.
        </p>
      ) : (
        <p className="max-w-sm text-sm leading-relaxed text-slate-400">@{username} has not published any profile posts yet.</p>
      )}
    </div>
  )
}

function ErrorPostsState({ onRetry }) {
  return (
    <div className="rounded-[28px] border border-rose-400/20 bg-rose-400/10 px-6 py-12 text-center">
      <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-rose-300/20 bg-rose-500/10 text-rose-200">
        <i className="fa-solid fa-triangle-exclamation text-lg" />
      </div>
      <h3 className="mt-4 text-lg font-semibold text-white">Posts could not be loaded</h3>
      <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-rose-100/80">
        The profile shell loaded, but the posts feed request failed. Retry without leaving the page.
      </p>
      <button
        type="button"
        onClick={onRetry}
        className="mt-5 inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-white/10 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/15"
      >
        <i className="fa-solid fa-rotate-right" />
        Retry loading posts
      </button>
    </div>
  )
}

/**
 * TabPosts
 * Profile Posts tab — shows the user's post feed with optional composer (for owner).
 *
 * Props:
 *   username          string
 *   isOwner           boolean
 *   authUser          object|null  { id, username, name, avatar }
 *   user              object       full user from ProfileController
 *   profile           object
 *   stats             object|null
 *   followerCount     number
 *   recentFollowers   array
 *   socialLinks       object
 *   countryName       string|null
 *   onTabChange       function(tab)
 */
export default function TabPosts({
  username,
  isOwner,
  authUser,
  user,
  profile,
  stats,
  followerCount,
  recentFollowers,
  suggestedUsers,
  socialLinks,
  countryName,
  profileUrl,
  onTabChange,
}) {
  const [posts,    setPosts]    = useState([])
  const [loading,  setLoading]  = useState(true)
  const [page,     setPage]     = useState(1)
  const [hasMore,  setHasMore]  = useState(false)
  const [loaded,   setLoaded]   = useState(false)
  const [error,    setError]    = useState(false)

  React.useEffect(() => {
    fetchFeed(1)
  }, [username])

  const fetchFeed = async (p = 1) => {
    setLoading(true)
    setError(false)
    try {
      const { data } = await axios.get(`/api/posts/profile/${username}`, { params: { page: p } })
      setPosts((prev) => p === 1 ? data.data : [...prev, ...data.data])
      setHasMore(data.meta.current_page < data.meta.last_page)
      setPage(p)
    } catch {
      setError(true)
    } finally {
      setLoading(false)
      setLoaded(true)
    }
  }

  const handlePosted = useCallback((newPost) => {
    setPosts((prev) => [newPost, ...prev])
  }, [])

  const handleDeleted = useCallback((postId) => {
    setPosts((prev) => prev.filter((p) => p.id !== postId))
  }, [])

  const summaryCards = [
    { label: 'Followers', value: formatCompactNumber(followerCount), icon: 'fa-user-group' },
    { label: 'Uploads', value: formatCompactNumber(stats?.uploads_count ?? 0), icon: 'fa-image' },
    { label: 'Awards', value: formatCompactNumber(stats?.awards_received_count ?? 0), icon: 'fa-trophy' },
    { label: 'Location', value: countryName || 'Unknown', icon: 'fa-location-dot' },
  ]

  return (
    <div className="py-6">
      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.06))] p-6 shadow-[0_20px_60px_rgba(2,6,23,0.24)]">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div className="max-w-3xl">
              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile posts</p>
              <h2 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-white">
                Updates, thoughts, and shared work from @{username}
              </h2>
              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
                This stream adds the human layer to the profile: quick notes, shared artwork posts, and announcements that do not belong inside the gallery grid.
              </p>
            </div>

            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={() => onTabChange?.('artworks')}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.1]"
              >
                <i className="fa-solid fa-images fa-fw" />
                View artworks
              </button>
              <button
                type="button"
                onClick={() => onTabChange?.('about')}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
              >
                <i className="fa-solid fa-id-card fa-fw" />
                About creator
              </button>
              {profileUrl ? (
                <a
                  href={profileUrl}
                  className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
                >
                  <i className="fa-solid fa-user fa-fw" />
                  Canonical profile
                </a>
              ) : null}
            </div>
          </div>
        </section>

        <section className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-2">
          {summaryCards.map((card) => (
            <div
              key={card.label}
              className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
            >
              <div className="flex items-center justify-between gap-3">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{card.label}</div>
                <i className={`fa-solid ${card.icon} text-slate-500`} />
              </div>
              <div className="mt-3 text-xl font-semibold tracking-tight text-white">{card.value}</div>
            </div>
          ))}
        </section>
      </div>

      <div className="mt-6 grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div className="min-w-0 space-y-4">
        {isOwner && authUser && (
          <PostComposer user={authUser} onPosted={handlePosted} />
        )}

        {!loaded && loading && (
          <div className="space-y-4">
            {[1, 2, 3].map((i) => <PostCardSkeleton key={i} />)}
          </div>
        )}

        {loaded && error && posts.length === 0 && (
          <ErrorPostsState onRetry={() => fetchFeed(1)} />
        )}

        {loaded && !loading && !error && posts.length === 0 && (
          <EmptyPostsState isOwner={isOwner} username={username} />
        )}

        {posts.length > 0 && (
          <div className="space-y-4">
            {posts.map((post) => (
              <PostCard
                key={post.id}
                post={post}
                isLoggedIn={!!authUser}
                viewerUsername={authUser?.username ?? null}
                onDelete={handleDeleted}
              />
            ))}
          </div>
        )}

        {loaded && hasMore && (
          <div className="flex justify-center py-4">
            <button
              onClick={() => fetchFeed(page + 1)}
              disabled={loading}
              className="rounded-2xl border border-white/10 bg-white/[0.04] px-6 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.08] disabled:opacity-50"
            >
              {loading ? (
                <><i className="fa-solid fa-spinner fa-spin mr-2" />Loading…</>
              ) : 'Load more posts'}
            </button>
          </div>
        )}
        </div>

        <aside className="hidden xl:block xl:sticky xl:top-24">
          <FeedSidebar
            user={user}
            profile={profile}
            stats={stats}
            followerCount={followerCount}
            recentFollowers={recentFollowers}
            suggestedUsers={suggestedUsers}
            socialLinks={socialLinks}
            countryName={countryName}
            isLoggedIn={!!authUser}
            onTabChange={onTabChange}
          />
        </aside>
      </div>
    </div>
  )
}