import { EmptyState, PageHeader } from '../components/shared'
import { Icons } from '../components/shared/Icons'
import { Button } from '../components/ui'

export default function MonetizationPage() {
  return (
    <div>
      <PageHeader />

      {/* Panel container - full-bleed borders */}
      <div className="-mx-6 lg:-mx-10 mt-6">
        {/* Membership Tiers */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Membership Tiers</div>
          <div className="text-xs text-muted mt-0.5">Create subscription tiers for your readers</div>
        </div>
        <div className="px-6 lg:px-10 py-6">
          <EmptyState
            Icon={Icons.Crown}
            title="No tiers created"
            description="Create membership tiers to offer exclusive content"
            action={<Button variant="primary" Icon={Icons.Plus}>Create Tier</Button>}
          />
        </div>

        <div className="border-t border-border" />

        {/* Pricing */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Pricing</div>
          <div className="text-xs text-muted mt-0.5">Set up payments for your membership</div>
        </div>
        <div className="px-6 lg:px-10 py-6">
          <div className="p-4 bg-border/30">
            <div className="flex items-center gap-3 mb-3">
              <Icons.Info className="text-muted" />
              <span className="text-sm font-medium">Payment Integration</span>
            </div>
            <p className="text-xs text-muted mb-4">
              Connect your Stripe account to start accepting payments from your members.
            </p>
            <Button variant="secondary" Icon={Icons.Monetization}>
              Connect Stripe
            </Button>
          </div>
        </div>

        {/* Member-Only Content - inline toggle rows */}
        <div className="border-t border-border px-6 lg:px-10 py-5 flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium">Free Preview</div>
            <div className="text-xs text-muted mt-0.5">Show a preview before the paywall</div>
          </div>
          <label className="relative inline-flex cursor-pointer">
            <input type="checkbox" className="sr-only peer" />
            <div className="w-9 h-5 bg-border rounded-full peer peer-checked:bg-accent transition-colors" />
            <div className="absolute left-0.5 top-0.5 w-4 h-4 bg-surface rounded-full transition-transform peer-checked:translate-x-4" />
          </label>
        </div>

        <div className="border-t border-border px-6 lg:px-10 py-5 flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium">Show Member Count</div>
            <div className="text-xs text-muted mt-0.5">Display number of members publicly</div>
          </div>
          <label className="relative inline-flex cursor-pointer">
            <input type="checkbox" className="sr-only peer" />
            <div className="w-9 h-5 bg-border rounded-full peer peer-checked:bg-accent transition-colors" />
            <div className="absolute left-0.5 top-0.5 w-4 h-4 bg-surface rounded-full transition-transform peer-checked:translate-x-4" />
          </label>
        </div>
      </div>
    </div>
  )
}