import React, { useState } from 'react'
import NovaConfirmDialog from '../ui/NovaConfirmDialog'
import ProfileCoverEditor from './ProfileCoverEditor'

/**
 * ProfileHero
 * Cover banner + avatar + identity block + action buttons
 */
export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing, followerCount, heroBgUrl, countryName }) {
  const [following, setFollowing] = useState(viewerIsFollowing)
  const [count, setCount] = useState(followerCount)
  const [loading, setLoading] = useState(false)
  const [hovering, setHovering] = useState(false)
  const [editorOpen, setEditorOpen] = useState(false)
  const [coverUrl, setCoverUrl] = useState(user?.cover_url || heroBgUrl || null)
  const [coverPosition, setCoverPosition] = useState(Number.isFinite(user?.cover_position) ? user.cover_position : 50)
  const [confirmOpen, setConfirmOpen] = useState(false)
  const [pendingFollowState, setPendingFollowState] = useState(null)

  const uname = user.username || user.name || 'Unknown'
  const displayName = user.name || uname

  const joinDate = user.created_at
    ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
    : null

  const bio = profile?.bio || profile?.about || ''

  const persistFollowState = async (nextState) => {
    if (loading) return
    setLoading(true)
    try {
      const res = await fetch(`/@${uname.toLowerCase()}/follow`, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
          'Accept': 'application/json',
        },
      })
      if (res.ok) {
        const data = await res.json()
        setFollowing(data.following)
        setCount(data.follower_count)
      }
    } catch (_) {}
    setLoading(false)
  }

  const toggleFollow = async () => {
    const nextState = !following
    if (!nextState) {
      setPendingFollowState(nextState)
      setConfirmOpen(true)
      return
    }

    await persistFollowState(nextState)
  }

  const onConfirmUnfollow = async () => {
    if (pendingFollowState === null) return
    setConfirmOpen(false)
    await persistFollowState(pendingFollowState)
    setPendingFollowState(null)
  }

  const onCloseConfirm = () => {
    setConfirmOpen(false)
    setPendingFollowState(null)
  }

  return (
    <>
      <div className="max-w-6xl mx-auto px-4 pt-4">
        <div className="relative overflow-hidden rounded-2xl border border-white/10">
          <div
            className="w-full h-[180px] md:h-[220px] xl:h-[252px]"
            style={{
              background: coverUrl
                ? `url('${coverUrl}') center ${coverPosition}% / cover no-repeat`
                : 'linear-gradient(140deg, #0f1724 0%, #101a2a 45%, #0a1220 100%)',
              position: 'relative',
            }}
          >
            {isOwner && (
              <div className="absolute right-3 top-3 z-20">
                <button
                  type="button"
                  onClick={() => setEditorOpen(true)}
                  className="inline-flex items-center gap-2 rounded-lg border border-white/20 bg-black/40 px-3 py-2 text-xs font-medium text-white hover:bg-black/60"
                  aria-label="Edit cover image"
                >
                  <i className="fa-solid fa-image" />
                  Edit Cover
                </button>
              </div>
            )}

            <div
              className="absolute inset-0"
              style={{
                background: coverUrl
                  ? 'linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.62))'
                  : 'radial-gradient(ellipse at 16% 40%, rgba(77,163,255,.18) 0%, transparent 60%), radial-gradient(ellipse at 84% 22%, rgba(224,122,33,.12) 0%, transparent 54%)',
              }}
            />
            <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '32px' }} />
          </div>
        </div>

        <div className="relative -mt-14 md:-mt-16 pb-4 px-1">
          <div className="flex flex-col md:flex-row md:items-end gap-4 md:gap-5">
            <div className="mx-auto md:mx-0 shrink-0 z-10">
              <img
                src={user.avatar_url || '/default/avatar_default.webp'}
                alt={`${uname}'s avatar`}
                className="w-[104px] h-[104px] md:w-[116px] md:h-[116px] rounded-full object-cover border-2 border-white/15 shadow-[0_0_0_6px_rgba(15,23,36,0.95),0_10px_32px_rgba(0,0,0,0.6)]"
              />
            </div>

            <div className="flex-1 min-w-0 text-center md:text-left">
              <h1 className="text-[28px] md:text-[34px] font-bold text-white leading-tight tracking-tight">
                {displayName}
              </h1>
              <p className="text-slate-400 text-sm mt-0.5 font-mono">@{uname}</p>

              <div className="flex flex-wrap items-center justify-center md:justify-start gap-2.5 mt-2 text-xs text-slate-400">
                {countryName && (
                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                    {profile?.country_code && (
                      <img
                        src={`/gfx/flags/shiny/24/${encodeURIComponent(profile.country_code)}.png`}
                        alt={countryName}
                        className="w-4 h-auto rounded-sm"
                        onError={(e) => { e.target.style.display = 'none' }}
                      />
                    )}
                    {countryName}
                  </span>
                )}

                {joinDate && (
                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
                    <i className="fa-solid fa-calendar-days fa-fw opacity-70" />
                    Joined {joinDate}
                  </span>
                )}

                {profile?.website && (
                  <a
                    href={profile.website.startsWith('http') ? profile.website : `https://${profile.website}`}
                    target="_blank"
                    rel="nofollow noopener noreferrer"
                    className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 text-sky-300 hover:text-sky-200 hover:bg-white/10 transition-colors"
                  >
                    <i className="fa-solid fa-link fa-fw" />
                    {(() => {
                      try {
                        const url = profile.website.startsWith('http') ? profile.website : `https://${profile.website}`
                        return new URL(url).hostname
                      } catch {
                        return profile.website
                      }
                    })()}
                  </a>
                )}
              </div>

              {bio && (
                <p className="text-sm text-slate-300/90 mt-3 max-w-2xl leading-relaxed line-clamp-2 md:line-clamp-3 mx-auto md:mx-0">
                  {bio}
                </p>
              )}
            </div>

            <div className="shrink-0 flex items-center justify-center md:justify-end gap-2 pb-0.5">
              {isOwner ? (
                <>
                  <a
                    href="/dashboard/profile"
                    className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium border border-white/15 text-slate-300 hover:text-white hover:bg-white/5 transition-all"
                    aria-label="Edit profile"
                  >
                    <i className="fa-solid fa-pen fa-fw" />
                    Edit Profile
                  </a>
                  <a
                    href="/studio"
                    className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium bg-sky-600 hover:bg-sky-500 text-white transition-all shadow-lg shadow-sky-900/30"
                    aria-label="Open Studio"
                  >
                    <i className="fa-solid fa-wand-magic-sparkles fa-fw" />
                    Studio
                  </a>
                </>
              ) : (
                <>
                  <button
                    onClick={toggleFollow}
                    onMouseEnter={() => setHovering(true)}
                    onMouseLeave={() => setHovering(false)}
                    disabled={loading}
                    aria-label={following ? 'Unfollow' : 'Follow'}
                    className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium border transition-all ${
                      following
                        ? hovering
                          ? 'bg-red-500/10 border-red-400/40 text-red-400'
                          : 'bg-green-500/10 border-green-400/40 text-green-400'
                        : 'bg-sky-500/10 border-sky-400/40 text-sky-400 hover:bg-sky-500/20'
                    }`}
                  >
                    <i className={`fa-solid fa-fw ${
                      loading
                        ? 'fa-circle-notch fa-spin'
                        : following
                          ? hovering ? 'fa-user-minus' : 'fa-user-check'
                          : 'fa-user-plus'
                    }`} />
                    <span>{following ? (hovering ? 'Unfollow' : 'Following') : 'Follow'}</span>
                    <span className="text-xs opacity-70">{count.toLocaleString()}</span>
                  </button>

                  <button
                    onClick={() => {
                      if (navigator.share) {
                        navigator.share({ title: `${displayName} on Skinbase`, url: window.location.href })
                      } else {
                        navigator.clipboard.writeText(window.location.href)
                      }
                    }}
                    aria-label="Share profile"
                    className="p-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-all"
                  >
                    <i className="fa-solid fa-share-nodes fa-fw" />
                  </button>
                </>
              )}
            </div>
          </div>
        </div>
      </div>

      <ProfileCoverEditor
        isOpen={editorOpen}
        onClose={() => setEditorOpen(false)}
        coverUrl={coverUrl}
        coverPosition={coverPosition}
        onCoverUpdated={(nextUrl, nextPosition) => {
          setCoverUrl(nextUrl)
          setCoverPosition(nextPosition)
        }}
        onCoverRemoved={() => {
          setCoverUrl(null)
          setCoverPosition(50)
        }}
      />

      <NovaConfirmDialog
        open={confirmOpen}
        title="Unfollow creator?"
        message={`You will stop seeing updates from @${uname} in your following feed.`}
        confirmLabel="Unfollow"
        cancelLabel="Keep following"
        confirmTone="danger"
        onConfirm={onConfirmUnfollow}
        onClose={onCloseConfirm}
        busy={loading}
      />
    </>
  )
}