import { useState, useEffect, useCallback } from 'react'
import { AppShell } from '../../components/layout/AppShell'
import { Table } from '../../components/ui/Table'
import { Badge } from '../../components/ui/Badge'
import { Button } from '../../components/ui/Button'
import { Input } from '../../components/ui/Input'
import { Modal } from '../../components/ui/Modal'
import { useI18n } from '../../i18n/useI18n'
import { api } from '../../api/client'

interface User {
  id: string
  username: string
  display_name: string
  role: string
  is_active: boolean
}

export function Users() {
  const { t } = useI18n()

  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)

  // Create modal
  const [createOpen, setCreateOpen] = useState(false)
  const [createUsername, setCreateUsername] = useState('')
  const [createDisplayName, setCreateDisplayName] = useState('')
  const [createPassword, setCreatePassword] = useState('')
  const [createRole, setCreateRole] = useState('creator')
  const [createLoading, setCreateLoading] = useState(false)
  const [createError, setCreateError] = useState<string | null>(null)

  // Edit modal
  const [editUser, setEditUser] = useState<User | null>(null)
  const [editDisplayName, setEditDisplayName] = useState('')
  const [editPassword, setEditPassword] = useState('')
  const [editRole, setEditRole] = useState('creator')
  const [editIsActive, setEditIsActive] = useState(true)
  const [editLoading, setEditLoading] = useState(false)
  const [editError, setEditError] = useState<string | null>(null)

  const fetchUsers = useCallback(async () => {
    setLoading(true)
    try {
      const resp = await api<{items: User[]}>('/api/v1/users/')
      setUsers(resp.items)
    } catch {
      setUsers([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchUsers() }, [fetchUsers])

  const openEdit = (user: User) => {
    setEditUser(user)
    setEditDisplayName(user.display_name)
    setEditPassword('')
    setEditRole(user.role)
    setEditIsActive(user.is_active)
    setEditError(null)
  }

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    setCreateError(null)
    setCreateLoading(true)
    try {
      await api('/api/v1/users/', {
        method: 'POST',
        body: JSON.stringify({
          username: createUsername,
          display_name: createDisplayName,
          password: createPassword,
          role: createRole,
        }),
      })
      setCreateOpen(false)
      setCreateUsername('')
      setCreateDisplayName('')
      setCreatePassword('')
      setCreateRole('creator')
      await fetchUsers()
    } catch (err: any) {
      setCreateError(err?.message ?? '오류가 발생했습니다')
    } finally {
      setCreateLoading(false)
    }
  }

  const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!editUser) return
    setEditError(null)
    setEditLoading(true)
    try {
      const body: Record<string, unknown> = {
        display_name: editDisplayName,
        role: editRole,
        is_active: editIsActive,
      }
      if (editPassword) body.password = editPassword
      await api(`/api/v1/users/${editUser.id}`, {
        method: 'PATCH',
        body: JSON.stringify(body),
      })
      setEditUser(null)
      await fetchUsers()
    } catch (err: any) {
      setEditError(err?.message ?? '오류가 발생했습니다')
    } finally {
      setEditLoading(false)
    }
  }

  const roleLabel = (role: string) => {
    const map: Record<string, string> = {
      admin: t('user.role.admin'),
      creator: t('user.role.creator'),
    }
    return map[role] ?? role
  }

  const columns = [
    { key: 'username', header: t('user.username') },
    { key: 'display_name', header: t('user.display_name') },
    {
      key: 'role',
      header: t('user.role'),
      render: (row: User) => <Badge label={roleLabel(row.role)} status={row.role} />,
    },
    {
      key: 'is_active',
      header: t('user.status'),
      render: (row: User) => (
        <Badge
          label={row.is_active ? t('user.status.active') : t('user.status.inactive')}
          status={row.is_active ? 'active' : 'inactive'}
        />
      ),
    },
    {
      key: 'actions',
      header: t('user.actions'),
      render: (row: User) => (
        <Button size="sm" variant="ghost" onClick={() => openEdit(row)}>
          {t('btn.edit')}
        </Button>
      ),
    },
  ]

  return (
    <AppShell title={t('nav.users')}>
      <div className="page">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: '20px', fontWeight: 600 }}>
            {t('nav.users')}
          </h2>
          <Button variant="primary" onClick={() => setCreateOpen(true)}>
            + {t('user.create')}
          </Button>
        </div>

        <div className="card">
          {loading ? (
            <div className="empty-state">{t('common.loading')}</div>
          ) : (
            <Table<User>
              columns={columns}
              rows={users}
              keyField="id"
              emptyMessage={t('common.no_data')}
            />
          )}
        </div>
      </div>

      {/* Create user modal */}
      <Modal
        open={createOpen}
        title={t('user.create_modal_title')}
        onClose={() => { setCreateOpen(false); setCreateError(null) }}
      >
        <form onSubmit={handleCreate} className="form-stack">
          <Input
            id="create-username"
            label={t('user.username')}
            value={createUsername}
            onChange={(e) => setCreateUsername(e.target.value)}
            required
            autoFocus
          />
          <Input
            id="create-display-name"
            label={t('user.display_name')}
            value={createDisplayName}
            onChange={(e) => setCreateDisplayName(e.target.value)}
            required
          />
          <Input
            id="create-password"
            label={t('user.password')}
            type="password"
            value={createPassword}
            onChange={(e) => setCreatePassword(e.target.value)}
            required
          />
          <div className="field">
            <label htmlFor="create-role" style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('user.role')}
            </label>
            <select
              id="create-role"
              value={createRole}
              onChange={(e) => setCreateRole(e.target.value)}
            >
              <option value="creator">{t('user.role.creator')}</option>
              <option value="admin">{t('user.role.admin')}</option>
            </select>
          </div>

          {createError && (
            <div style={{ color: 'var(--red)', fontSize: '13px' }}>{createError}</div>
          )}

          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '8px' }}>
            <Button type="button" variant="ghost" onClick={() => { setCreateOpen(false); setCreateError(null) }}>
              {t('btn.cancel')}
            </Button>
            <Button type="submit" variant="primary" disabled={createLoading}>
              {createLoading ? t('common.loading') : t('btn.create')}
            </Button>
          </div>
        </form>
      </Modal>

      {/* Edit user modal */}
      <Modal
        open={!!editUser}
        title={t('user.edit_modal_title')}
        onClose={() => { setEditUser(null); setEditError(null) }}
      >
        <form onSubmit={handleEdit} className="form-stack">
          <Input
            id="edit-display-name"
            label={t('user.display_name')}
            value={editDisplayName}
            onChange={(e) => setEditDisplayName(e.target.value)}
            required
            autoFocus
          />
          <Input
            id="edit-password"
            label={`${t('user.password')} (선택사항)`}
            type="password"
            value={editPassword}
            onChange={(e) => setEditPassword(e.target.value)}
          />
          <div className="field">
            <label htmlFor="edit-role" style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('user.role')}
            </label>
            <select
              id="edit-role"
              value={editRole}
              onChange={(e) => setEditRole(e.target.value)}
            >
              <option value="creator">{t('user.role.creator')}</option>
              <option value="admin">{t('user.role.admin')}</option>
            </select>
          </div>
          <div className="field">
            <label style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('user.is_active')}
            </label>
            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
              <input
                type="checkbox"
                checked={editIsActive}
                onChange={(e) => setEditIsActive(e.target.checked)}
                style={{ width: 'auto' }}
              />
              <span style={{ fontSize: '13px', color: 'var(--text)' }}>
                {editIsActive ? t('user.status.active') : t('user.status.inactive')}
              </span>
            </label>
          </div>

          {editError && (
            <div style={{ color: 'var(--red)', fontSize: '13px' }}>{editError}</div>
          )}

          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '8px' }}>
            <Button type="button" variant="ghost" onClick={() => { setEditUser(null); setEditError(null) }}>
              {t('btn.cancel')}
            </Button>
            <Button type="submit" variant="primary" disabled={editLoading}>
              {editLoading ? t('common.loading') : t('btn.save')}
            </Button>
          </div>
        </form>
      </Modal>
    </AppShell>
  )
}