'use client';

import { useState } from 'react';
import { cn } from '@/shared/lib/cn';

interface PaywallSheetContentProps {
  onStartPro: () => void;
  onClose: () => void;
}

type BillingCycle = 'monthly' | 'yearly';

const BILLING_OPTIONS: Array<{ id: BillingCycle; label: string; caption: string }> = [
  { id: 'monthly', label: '월간', caption: '월 9,900원 (더미)' },
  { id: 'yearly', label: '연간', caption: '연 79,000원 (더미)' },
];

const VALUE_POINTS = [
  '더 많은 공간 / 고화질 배경',
  '작업용 BGM / 사운드 확장',
  '프리셋 팩 / 고급 타이머',
];

export const PaywallSheetContent = ({ onStartPro, onClose }: PaywallSheetContentProps) => {
  const [cycle, setCycle] = useState<BillingCycle>('monthly');

  return (
    <div className="space-y-4">
      <header className="space-y-1">
        <h3 className="text-lg font-semibold tracking-tight text-white">PRO로 더 깊게</h3>
        <p className="text-xs text-white/62">필요할 때만 잠금 해제하고, 무대는 그대로 유지해요.</p>
      </header>

      <ul className="space-y-2">
        {VALUE_POINTS.map((point) => (
          <li key={point} className="rounded-xl border border-white/14 bg-white/[0.04] px-3 py-2 text-sm text-white/86">
            {point}
          </li>
        ))}
      </ul>

      <section className="rounded-2xl border border-white/14 bg-white/[0.04] p-3">
        <p className="text-xs text-white/60">가격</p>
        <div className="mt-2 grid grid-cols-2 gap-2">
          {BILLING_OPTIONS.map((option) => {
            const selected = option.id === cycle;

            return (
              <button
                key={option.id}
                type="button"
                onClick={() => setCycle(option.id)}
                className={cn(
                  'rounded-xl border px-2.5 py-2 text-left text-xs transition-colors',
                  selected
                    ? 'border-sky-200/40 bg-sky-200/14 text-white'
                    : 'border-white/16 bg-white/[0.03] text-white/72 hover:bg-white/[0.08]',
                )}
              >
                <p className="font-medium">{option.label}</p>
                <p className="mt-0.5 text-[10px] text-white/56">{option.caption}</p>
              </button>
            );
          })}
        </div>
      </section>

      <div className="flex items-center justify-end gap-2">
        <button
          type="button"
          onClick={onClose}
          className="rounded-full border border-white/18 bg-white/[0.05] px-3 py-1.5 text-xs text-white/74 transition-colors hover:bg-white/[0.11]"
        >
          나중에
        </button>
        <button
          type="button"
          onClick={onStartPro}
          className="rounded-full border border-sky-200/44 bg-sky-300/84 px-3.5 py-1.5 text-xs font-semibold text-slate-900 transition-colors hover:bg-sky-300"
        >
          PRO 시작하기
        </button>
      </div>
    </div>
  );
};