d3ro-voice/apps/web/src/components/teams/create-team-form.tsx

'use client'

// apps/web/src/components/teams/create-team-form.tsx
// 새 팀 생성 폼

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Box, Button, TextField, Stack, Alert } from '@mui/material'
import AddIcon from '@mui/icons-material/Add'
import { MetalCard } from '@d3ro/ui/components/ds'
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
import { getSupabaseBrowserClient } from '@/lib/supabase-browser'

export function CreateTeamForm(): React.ReactElement {
  const router = useRouter()
  const [name, setName] = useState('')
  const [open, setOpen] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

  async function handleCreate(): Promise<void> {
    if (!name.trim()) return
    setError(null)
    setBusy(true)
    try {
      const supabase = getSupabaseBrowserClient()
      const {
        data: { user }
      } = await supabase.auth.getUser()
      if (!user) {
        setError('로그인이 필요합니다')
        return
      }

      // teams 테이블 INSERT
      const { data: team, error: teamErr } = await supabase
        .from('teams')
        .insert({ name: name.trim(), owner_id: user.id })
        .select('id')
        .single()

      if (teamErr || !team) {
        setError(teamErr?.message ?? '팀 생성 실패')
        return
      }

      // owner를 team_members에 추가 (RLS owner 권한)
      const { error: memberErr } = await supabase
        .from('team_members')
        .insert({ team_id: (team as { id: string }).id, user_id: user.id, role: 'owner' })

      if (memberErr) {
        setError(`멤버 등록 실패: ${memberErr.message}`)
        return
      }

      setName('')
      setOpen(false)
      router.refresh()
    } finally {
      setBusy(false)
    }
  }

  if (!open) {
    return (
      <Button variant="outlined" startIcon={<AddIcon />} onClick={() => setOpen(true)}>
        새 팀 만들기
      </Button>
    )
  }

  return (
    <MetalCard sx={{ p: 3, maxWidth: 480 }}>
      <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>새 팀 생성</Box>
      <Stack spacing={2}>
        <TextField
          autoFocus
          label="팀 이름"
          size="small"
          value={name}
          onChange={(e) => setName(e.target.value)}
          fullWidth
          disabled={busy}
        />
        {error && (
          <Alert severity="error" variant="outlined">
            {error}
          </Alert>
        )}
        <Stack direction="row" spacing={1}>
          <Button variant="contained" onClick={() => void handleCreate()} disabled={busy || !name.trim()}>
            생성
          </Button>
          <Button
            variant="outlined"
            onClick={() => {
              setOpen(false)
              setName('')
              setError(null)
            }}
            disabled={busy}
          >
            취소
          </Button>
        </Stack>
      </Stack>
    </MetalCard>
  )
}