'use client'

import { PostPreview } from '@/components/PostPreview'
import { AccountCard } from '@/components/AccountCard'
import type { PostData, EngagementAccount } from '@/types'

const MOCK_POST: PostData = {
  uri: 'at://did:plc:mock/app.bsky.feed.post/mock',
  cid: 'mockCid',
  url: 'https://flockoff.app',
  author: {
    did: 'did:plc:mock',
    handle: 'hottakes.flockoff.app',
    displayName: 'Hot Takes Only',
  },
  text: 'pineapple on pizza is objectively correct and i will not be taking questions at this time',
  createdAt: '',
  likeCount: 541,
  repostCount: 108,
  replyCount: 85,
  quoteCount: 31,
}

const MOCK_ACCOUNTS: (EngagementAccount & { selected: boolean })[] = [
  {
    profile: { did: 'did:plc:2', handle: 'foodiefiona.flockoff.app', displayName: 'Foodie Fiona' },
    relationship: 'mutual',
    engagementTypes: ['repost'],
    selected: false,
  },
  {
    profile: { did: 'did:plc:4', handle: 'pizzafan.flockoff.app', displayName: 'Pizza Fan' },
    relationship: 'following',
    engagementTypes: ['like', 'repost'],
    selected: false,
  },
  {
    profile: { did: 'did:plc:3', handle: 'chef99.flockoff.app', displayName: 'Chef99' },
    relationship: 'follower',
    engagementTypes: ['reply'],
    selected: true,
  },
  {
    profile: { did: 'did:plc:1', handle: 'angrychef.flockoff.app', displayName: 'Angry Chef' },
    relationship: 'none',
    engagementTypes: ['like'],
    selected: true,
  },
]

// Static decorative mockup — not interactive. To change the example content,
// edit MOCK_POST and MOCK_ACCOUNTS above.
export function MockupCard() {
  return (
    <div
      className="bg-card border border-border rounded-2xl p-4 flex flex-col gap-3 select-none [&_a]:pointer-events-none lg:[transform:rotate(1deg)_translateY(-8px)]"
      style={{ boxShadow: 'var(--fo-shadow-hero)' }}
    >
      <PostPreview post={MOCK_POST} />
      <div className="flex flex-col">
        {MOCK_ACCOUNTS.map(account => (
          <AccountCard
            key={account.profile.did}
            account={account}
            selected={account.selected}
            onToggle={() => {}}
          />
        ))}
      </div>
      <button
        onClick={() => {}}
        className="w-full rounded-lg px-4 py-2.5 text-sm font-semibold text-white cursor-pointer transition-opacity hover:opacity-90 active:opacity-75"
        style={{ backgroundColor: 'var(--fo-ember)' }}
      >
        Block 768 accounts
      </button>
    </div>
  )
}