'use client'

// apps/admin/src/components/role-change-dialog.tsx
// role 변경 확인 다이얼로그 — super_admin 전용

import { useState } from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
} from '@mui/material'
import { PhosphorText } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roFontMono } from '@d3ro/ui/theme'
import { callAdminApi } from '@/lib/admin-api'

type Role = 'user' | 'manager' | 'admin' | 'super_admin'

interface RoleChangeDialogProps {
  open: boolean
  userId: string
  userName: string | null
  currentRole: Role
  /** 현재 로그인한 admin의 role */
  callerRole?: Role
  onClose: () => void
  onSuccess: () => void
}

export function RoleChangeDialog({
  open, userId, userName, currentRole, callerRole = 'admin', onClose, onSuccess,
}: RoleChangeDialogProps): React.ReactElement {
  const [newRole, setNewRole] = useState<Role>(currentRole)
  const [memo, setMemo] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleConfirm = async (): Promise<void> => {
    if (!memo.trim() || newRole === currentRole) return

    setLoading(true)
    setError(null)
    try {
      await callAdminApi('admin-users', {
        method: 'PATCH',
        body: JSON.stringify({ userId, newRole, memo: memo.trim() }),
      })
      setMemo('')
      onSuccess()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to change role')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{ sx: { bgcolor: d3roPalette.bg.card, color: d3roPalette.text.primary } }}
    >
      <DialogTitle sx={{ fontFamily: d3roFontMono }}>
        <PhosphorText variant="heading">CHANGE USER ROLE</PhosphorText>
      </DialogTitle>
      <DialogContent>
        <PhosphorText variant="dim" sx={{ display: 'block', mb: 2 }}>
          {userName ?? userId.substring(0, 8)} : {currentRole}
        </PhosphorText>

        <FormControl fullWidth sx={{ mb: 2 }}>
          <InputLabel id="role-change-new-role-label" sx={{ fontFamily: d3roFontMono, color: d3roPalette.text.label }}>New Role</InputLabel>
          <Select
            id="role-change-new-role"
            labelId="role-change-new-role-label"
            value={newRole}
            onChange={(e) => setNewRole(e.target.value as Role)}
            label="New Role"
            sx={{ fontFamily: d3roFontMono, color: d3roPalette.text.primary }}
          >
            <MenuItem value="user">user</MenuItem>
            <MenuItem value="manager">manager</MenuItem>
            {callerRole === 'super_admin' && <MenuItem value="admin">admin</MenuItem>}
            {callerRole === 'super_admin' && <MenuItem value="super_admin">super_admin</MenuItem>}
          </Select>
        </FormControl>

        <TextField
          fullWidth
          multiline
          rows={3}
          placeholder="Reason for role change (required)..."
          value={memo}
          onChange={(e) => setMemo(e.target.value)}
          sx={{
            '& .MuiInputBase-root': {
              fontFamily: d3roFontMono,
              fontSize: 13,
              color: d3roPalette.text.primary,
              bgcolor: d3roPalette.bg.inset,
            },
          }}
        />

        {error && (
          <PhosphorText variant="dim" sx={{ display: 'block', mt: 1, color: d3roPalette.tag.red }}>
            {error}
          </PhosphorText>
        )}
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button onClick={onClose} sx={{ fontFamily: d3roFontMono, color: d3roPalette.text.secondary }}>
          Cancel
        </Button>
        <Button
          onClick={() => void handleConfirm()}
          disabled={!memo.trim() || newRole === currentRole || loading}
          variant="contained"
          color={newRole === 'super_admin' ? 'error' : 'primary'}
          sx={{ fontFamily: d3roFontMono }}
        >
          {loading ? 'Changing...' : 'Change Role'}
        </Button>
      </DialogActions>
    </Dialog>
  )
}