import React from 'react'
import GroupBadgePill from './GroupBadgePill'
import { cx, formatCompactNumber } from './groupStyles'

export default function GroupDiscoveryCard({ group, className = '', compact = false }) {
  if (!group) return null

  const primarySummary = group.headline || group.bio_excerpt || 'Collaborative publishing identity on Skinbase.'

  return (
    <a
      href={group.urls?.public || '/groups'}
      className={cx(
        'group block overflow-hidden rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-5 shadow-[0_24px_70px_rgba(2,6,23,0.34)] transition duration-200 hover:-translate-y-1 hover:border-white/20',
        className,
      )}
    >
      <div className="flex items-start gap-4">
        <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
          {group.avatar_url ? (
            <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" />
          ) : (
            <i className="fa-solid fa-people-group text-slate-300" />
          )}
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="truncate text-lg font-semibold text-white">{group.name}</h3>
            {group.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
            {group.is_verified ? <GroupBadgePill label="Verified" tone="sky" /> : null}
          </div>
          <p className="mt-2 text-sm leading-6 text-slate-300">{primarySummary}</p>
          {group.owner?.username || group.owner?.name ? (
            <p className="mt-2 text-xs uppercase tracking-[0.16em] text-slate-500">
              Led by {group.owner?.username || group.owner?.name}
            </p>
          ) : null}
        </div>
      </div>

      <div className="mt-5 flex flex-wrap gap-2">
        {(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, compact ? 2 : 3).map((signal) => (
          <GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
        ))}
        {(Array.isArray(group.badges) ? group.badges : []).slice(0, compact ? 1 : 2).map((badge) => (
          <GroupBadgePill key={badge.key} label={badge.label} tone="amber" />
        ))}
      </div>

      {group.recruitment_headline && !compact ? (
        <div className="mt-5 rounded-2xl border border-emerald-300/20 bg-emerald-400/10 px-4 py-3 text-sm text-emerald-50">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-200/80">Open call</div>
          <div className="mt-1">{group.recruitment_headline}</div>
        </div>
      ) : null}

      {group.featured_release?.title && !compact ? (
        <div className="mt-5 rounded-2xl border border-white/10 bg-black/20 p-4">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Featured release</div>
          <div className="mt-2 text-base font-semibold text-white">{group.featured_release.title}</div>
          {group.featured_release.summary ? <div className="mt-1 text-sm text-slate-400">{group.featured_release.summary}</div> : null}
        </div>
      ) : null}

      <div className="mt-5 grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-white/[0.03] p-3 text-center">
        <div>
          <div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.artworks)}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Artworks</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.members)}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Members</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.followers)}</div>
          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Followers</div>
        </div>
      </div>
    </a>
  )
}