import { useState } from 'react'
import { Table } from '../ui/Table'
import { Badge } from '../ui/Badge'
import { Button } from '../ui/Button'
import { Modal } from '../ui/Modal'
import { Input } from '../ui/Input'
import { useI18n } from '../../i18n/useI18n'

export interface Member {
  id: string
  user_id: string
  username: string
  display_name: string
  role: string
}

interface MemberListProps {
  members: Member[]
  canManage: boolean
  currentUserId?: string
  onAdd: (userId: string, role: string) => Promise<void>
  onRemove: (userId: string) => Promise<void>
  onRoleChange: (userId: string, role: string) => Promise<void>
}

const ROLES = ['owner', 'member']

export function MemberList({
  members,
  canManage,
  onAdd,
  onRemove,
  onRoleChange,
}: MemberListProps) {
  const { t } = useI18n()

  const [addOpen, setAddOpen] = useState(false)
  const [addUserId, setAddUserId] = useState('')
  const [addRole, setAddRole] = useState('member')
  const [addLoading, setAddLoading] = useState(false)
  const [addError, setAddError] = useState<string | null>(null)

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

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault()
    setAddError(null)
    setAddLoading(true)
    try {
      await onAdd(addUserId, addRole)
      setAddOpen(false)
      setAddUserId('')
      setAddRole('member')
    } catch (err: any) {
      setAddError(err?.message ?? '오류가 발생했습니다')
    } finally {
      setAddLoading(false)
    }
  }

  const columns = [
    {
      key: 'username',
      header: t('member.username'),
    },
    {
      key: 'display_name',
      header: t('member.display_name'),
    },
    {
      key: 'role',
      header: t('member.role'),
      render: (row: Member) => <Badge label={roleLabel(row.role)} status={row.role} />,
    },
    ...(canManage
      ? [
          {
            key: 'actions',
            header: t('member.actions'),
            render: (row: Member) => (
              <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
                {row.role !== 'owner' && (
                  <>
                    <select
                      value={row.role}
                      onChange={(e) => onRoleChange(row.user_id, e.target.value)}
                      style={{ width: 'auto', padding: '4px 8px', fontSize: '12px' }}
                    >
                      {ROLES.map((r) => (
                        <option key={r} value={r}>{roleLabel(r)}</option>
                      ))}
                    </select>
                    <Button
                      size="sm"
                      variant="danger"
                      onClick={() => onRemove(row.user_id)}
                    >
                      {t('member.remove')}
                    </Button>
                  </>
                )}
              </div>
            ),
          },
        ]
      : []),
  ]

  return (
    <>
      {canManage && (
        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'flex-end' }}>
          <Button variant="secondary" onClick={() => setAddOpen(true)}>
            + {t('member.add')}
          </Button>
        </div>
      )}

      <Table<Member>
        columns={columns}
        rows={members}
        keyField="id"
        emptyMessage={t('common.no_data')}
      />

      <Modal
        open={addOpen}
        title={t('member.add_modal_title')}
        onClose={() => { setAddOpen(false); setAddError(null) }}
      >
        <form onSubmit={handleAdd} className="form-stack">
          <Input
            id="add-user-id"
            label={t('member.user_id')}
            value={addUserId}
            onChange={(e) => setAddUserId(e.target.value)}
            placeholder="user_id"
            required
            autoFocus
          />
          <div className="field">
            <label htmlFor="add-role" style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('member.select_role')}
            </label>
            <select
              id="add-role"
              value={addRole}
              onChange={(e) => setAddRole(e.target.value)}
            >
              {ROLES.map((r) => (
                <option key={r} value={r}>{roleLabel(r)}</option>
              ))}
            </select>
          </div>

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

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