import React, { useState } from 'react'
import FollowButton from '../social/FollowButton'

const AVATAR_FALLBACK = 'https://files.skinbase.org/default/missing_sq.webp'

export default function ArtworkAuthor({ artwork, presentSq }) {
  const [following, setFollowing] = useState(Boolean(artwork?.viewer?.is_following_author))
  const [followersCount, setFollowersCount] = useState(Number(artwork?.user?.followers_count || 0))
  const user = artwork?.user || {}
  const isOwnArtwork = Number(artwork?.viewer?.id || 0) > 0 && Number(artwork?.viewer?.id) === Number(user.id || 0)
  const authorName = user.name || user.username || 'Artist'
  const profileUrl = user.profile_url || (user.username ? `/@${user.username}` : '#')
  const avatar = user.avatar_url || presentSq?.url || AVATAR_FALLBACK

  return (
    <>
      <section className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
        <h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Author</h2>

        <div className="mt-4 flex items-center gap-4">
          <img
            src={avatar}
            alt={authorName}
            className="h-14 w-14 rounded-full border border-nova-600 object-cover bg-nova-900/50 shadow-md shadow-deep/30"
            loading="lazy"
            decoding="async"
            onError={(event) => {
              event.currentTarget.src = AVATAR_FALLBACK
            }}
          />

          <div className="min-w-0">
            <a href={profileUrl} className="block truncate text-base font-semibold text-white hover:text-accent">
              {authorName}
            </a>
            {user.username && <p className="truncate text-xs text-soft">@{user.username}</p>}
            <p className="mt-1 text-xs text-soft">{followersCount.toLocaleString()} followers</p>
          </div>
        </div>

        <div className={`mt-4 grid gap-3 ${isOwnArtwork ? 'grid-cols-1' : 'grid-cols-2'}`}>
          <a
            href={profileUrl}
            className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-nova-600 px-3 py-2 text-sm text-white hover:bg-nova-800 transition"
          >
            <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
            </svg>
            Profile
          </a>
          {!isOwnArtwork ? (
            <FollowButton
              username={user.username}
              initialFollowing={following}
              initialCount={followersCount}
              showCount={false}
              className="min-h-11"
              sizeClassName="px-3 py-2 text-sm"
              onChange={({ following: nextFollowing, followersCount: nextFollowersCount }) => {
                setFollowing(nextFollowing)
                setFollowersCount(nextFollowersCount)
              }}
            />
          ) : null}
        </div>
      </section>
    </>
  )
}