import React from 'react'
import { usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'

function ArtworkGrid({ artworks }) {
  if (!Array.isArray(artworks) || artworks.length === 0) {
    return <p className="mt-4 text-sm text-slate-400">No linked artworks yet.</p>
  }

  return (
    <div className="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      {artworks.map((artwork) => (
        <a key={artwork.id} href={artwork.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20">
          {artwork.thumb ? <img src={artwork.thumb} alt={artwork.title} className="aspect-[4/3] w-full object-cover" /> : null}
          <div className="p-4">
            <h3 className="text-base font-semibold text-white">{artwork.title}</h3>
            <p className="mt-1 text-sm text-slate-400">{artwork.author || 'Artwork'}</p>
          </div>
        </a>
      ))}
    </div>
  )
}

export default function GroupProjectShow() {
  const { props } = usePage()
  const group = props.group || {}
  const project = props.project || {}

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
      <SeoHead seo={props.seo || {}} title={`${project.title || group.name} - Skinbase`} description={project.summary || project.description || group.headline || 'Group project'} />
      <div className="mx-auto max-w-6xl space-y-8">
        <section className="overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.03]">
          {project.cover_url ? <img src={project.cover_url} alt={project.title} className="h-56 w-full object-cover" /> : <div className="h-40 bg-white/[0.03]" />}
          <div className="p-6">
            <div className="flex flex-wrap items-center gap-3">
              <a href={group.urls?.public} className="text-sm font-semibold text-sky-200">{group.name}</a>
              <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{project.status}</span>
              <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{project.visibility}</span>
            </div>
            <h1 className="mt-4 text-4xl font-semibold text-white">{project.title}</h1>
            {project.summary ? <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-300">{project.summary}</p> : null}
            <div className="mt-5 flex flex-wrap gap-4 text-xs text-slate-400">
              {project.start_date ? <span>Started {new Date(project.start_date).toLocaleDateString()}</span> : null}
              {project.target_date ? <span>Target {new Date(project.target_date).toLocaleDateString()}</span> : null}
              {project.released_at ? <span>Released {new Date(project.released_at).toLocaleDateString()}</span> : null}
              {project.lead?.name || project.lead?.username ? <span>Lead: {project.lead?.name || project.lead?.username}</span> : null}
            </div>
          </div>
        </section>

        <div className="grid gap-8 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
          <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
            <h2 className="text-2xl font-semibold text-white">Overview</h2>
            <p className="mt-4 text-sm leading-7 text-slate-300">{project.description || 'No long-form description yet.'}</p>
            {Array.isArray(project.milestones) && project.milestones.length > 0 ? <div className="mt-6 space-y-3">{project.milestones.map((milestone) => <div key={milestone.id} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><div className="flex items-center justify-between gap-3"><div className="font-semibold text-white">{milestone.title}</div><span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{milestone.status}</span></div>{milestone.summary ? <p className="mt-2 text-sm text-slate-400">{milestone.summary}</p> : null}{milestone.owner?.name || milestone.owner?.username ? <div className="mt-2 text-xs text-slate-500">Owner: {milestone.owner?.name || milestone.owner?.username}</div> : null}</div>)}</div> : null}
            <ArtworkGrid artworks={project.artworks} />
          </section>

          <div className="space-y-8">
            <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
              <h2 className="text-2xl font-semibold text-white">Pipeline</h2>
              <div className="mt-4 text-sm leading-7 text-slate-300">This project currently has {project.counts?.milestones || 0} milestones and is linked to {project.release_count || project.counts?.releases || 0} releases.</div>
            </section>
            {Array.isArray(project.assets) && project.assets.length > 0 ? (
              <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                <h2 className="text-2xl font-semibold text-white">Assets</h2>
                <div className="mt-4 space-y-3">
                  {project.assets.map((asset) => (
                    <a key={asset.id} href={asset.download_url} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white">
                      <div className="font-semibold">{asset.title}</div>
                      <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-400">{asset.category} • {asset.visibility}</div>
                    </a>
                  ))}
                </div>
              </section>
            ) : null}

            {Array.isArray(project.team) && project.team.length > 0 ? (
              <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                <h2 className="text-2xl font-semibold text-white">Team</h2>
                <div className="mt-4 space-y-3">
                  {project.team.map((member) => (
                    <div key={member.id} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white">
                      <div className="font-semibold">{member.name || member.username}</div>
                      <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-400">{member.role_label || (member.is_lead ? 'Lead' : 'Contributor')}</div>
                    </div>
                  ))}
                </div>
              </section>
            ) : null}

            {project.pinned_post ? (
              <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
                <h2 className="text-2xl font-semibold text-white">Pinned update</h2>
                <a href={project.pinned_post.url} className="mt-4 inline-block text-sm font-semibold text-sky-200">{project.pinned_post.title}</a>
              </section>
            ) : null}
          </div>
        </div>
      </div>
    </main>
  )
}