설정 페이지: 프로필/알림/결제

// src/app/(app)/settings/page.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ProfileTab } from './profile-tab'
import { NotificationTab } from './notification-tab'
import { BillingTab } from './billing-tab'
import { DangerTab } from './danger-tab'

export default function SettingsPage() {
  return (
    <div className="max-w-3xl">
      <h1 className="text-2xl font-bold mb-6">설정</h1>
      <Tabs defaultValue="profile">
        <TabsList>
          <TabsTrigger value="profile">프로필</TabsTrigger>
          <TabsTrigger value="notifications">알림</TabsTrigger>
          <TabsTrigger value="billing">결제</TabsTrigger>
          <TabsTrigger value="danger">계정</TabsTrigger>
        </TabsList>
        <TabsContent value="profile"><ProfileTab /></TabsContent>
        <TabsContent value="notifications"><NotificationTab /></TabsContent>
        <TabsContent value="billing"><BillingTab /></TabsContent>
        <TabsContent value="danger"><DangerTab /></TabsContent>
      </Tabs>
    </div>
  )
}

// src/app/(app)/settings/profile-tab.tsx
'use client'
import { useFormState } from 'react-dom'
import { updateProfile } from './actions'
import { toast } from 'sonner'

export function ProfileTab() {
  const [state, action] = useFormState(updateProfile, null)

  return (
    <form action={action} className="space-y-4 max-w-md">
      <div>
        <label className="block text-sm mb-1">이메일</label>
        <input disabled className="w-full px-3 py-2 border rounded bg-muted" />
        <p className="text-xs text-muted-foreground mt-1">이메일 변경은 지원팀 문의</p>
      </div>
      <div>
        <label className="block text-sm mb-1">이름</label>
        <input name="name" className="w-full px-3 py-2 border rounded" />
      </div>
      <div>
        <label className="block text-sm mb-1">아바타</label>
        <input name="avatar" type="file" accept="image/*" />
      </div>
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded">
        저장
      </button>
      {state?.success && toast.success('저장됨')}
      {state?.error && toast.error(state.error)}
    </form>
  )
}

'use client'
import { Switch } from '@/components/ui/switch'

export function NotificationTab() {
  const [prefs, setPrefs] = useState({
    email_marketing: true,
    email_product: true,
    push_enabled: false,
  })

  const update = async (key: string, value: boolean) => {
    setPrefs(p => ({ ...p, [key]: value }))
    await updatePreferences({ [key]: value })
  }

  return (
    <ul className="space-y-4 max-w-md">
      <li className="flex items-center justify-between border-b pb-3">
        <div>
          <p className="font-medium">마케팅 이메일</p>
          <p className="text-xs text-muted-foreground">신기능·할인 안내</p>
        </div>
        <Switch checked={prefs.email_marketing} onCheckedChange={v => update('email_marketing', v)} />
      </li>
      <li className="flex items-center justify-between border-b pb-3">
        <div>
          <p className="font-medium">제품 알림</p>
          <p className="text-xs text-muted-foreground">결제·구독 변경 시</p>
        </div>
        <Switch checked={prefs.email_product} onCheckedChange={v => update('email_product', v)} />
      </li>
    </ul>
  )
}

// src/app/(app)/settings/billing-tab.tsx
import { createClient } from '@/lib/supabase/server'
import { CreatePortalButton } from './create-portal-button'

export async function BillingTab() {
  const supabase = await createClient()
  const { data: sub } = await supabase
    .from('subscriptions')
    .select('*')
    .single()

  return (
    <div className="space-y-6 max-w-md">
      <div className="border rounded-lg p-4">
        <p className="text-sm text-muted-foreground">현재 플랜</p>
        <p className="text-2xl font-bold capitalize">{sub?.plan ?? 'Free'}</p>
        {sub?.current_period_end && (
          <p className="text-sm">갱신: {new Date(sub.current_period_end).toLocaleDateString('ko')}</p>
        )}
      </div>

      {sub?.plan === 'free' ? (
        <a href="/pricing" className="block bg-primary text-primary-foreground text-center py-2 rounded">
          업그레이드
        </a>
      ) : (
        <CreatePortalButton />  {/* CH.44 Stripe Customer Portal */}
      )}
    </div>
  )
}

'use client'
import { useState } from 'react'
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'

export function DangerTab() {
  const [confirm, setConfirm] = useState('')
  return (
    <div className="border border-red-500/30 rounded-lg p-6 max-w-md">
      <h3 className="font-bold text-red-500 mb-2">계정 삭제</h3>
      <p className="text-sm text-muted-foreground mb-4">
        모든 데이터가 영구 삭제됩니다. 되돌릴 수 없습니다.
      </p>
      <Dialog>
        <DialogTrigger className="bg-red-500 text-white px-3 py-1.5 rounded text-sm">
          계정 삭제
        </DialogTrigger>
        <DialogContent>
          <h3 className="font-semibold mb-3">정말 삭제하시겠습니까?</h3>
          <p className="text-sm mb-3">
            확인을 위해 <strong>DELETE</strong>를 입력하세요:
          </p>
          <input value={confirm} onChange={e => setConfirm(e.target.value)} className="w-full px-3 py-2 border rounded" />
          <button
            disabled={confirm !== 'DELETE'}
            onClick={deleteAccount}
            className="mt-3 bg-red-500 text-white px-3 py-1.5 rounded disabled:opacity-50"
          >
            영구 삭제
          </button>
        </DialogContent>
      </Dialog>
    </div>
  )
}