import React, { useState } from 'react'

import { DeleteOutlined } from '@ant-design/icons'
import {
  Button,
  Typography,
  Alert,
  Input,
  InputNumber,
  Table,
  Modal
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import useSWR from 'swr'

import {
  listInternalKeys,
  createInternalKey,
  deleteInternalKey,
  InternalKeyResponse
} from '~/api/internal-key'
import LoadingSpin from '~/components/LoadingSpin'
import { formatDateTime } from '~/utils/date-time'

const InternalApiKeys: React.FC = () => {
  const {
    data: keysRes,
    error,
    mutate
  } = useSWR('/internal/keys', () => listInternalKeys())
  const loading = !keysRes && !error

  const [creating, setCreating] = useState(false)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [newKeyName, setNewKeyName] = useState('')
  const [expiresIn, setExpiresIn] = useState<number | null>(null)
  const [newKey, setNewKey] = useState<InternalKeyResponse | null>(null)
  const [deletingId, setDeletingId] = useState<number | null>(null)

  async function handleCreateKey() {
    try {
      setCreating(true)
      const res = await createInternalKey({
        name: newKeyName || undefined,
        expires_in: expiresIn || undefined
      })
      setNewKey(res.data)
      setShowCreateModal(false)
      setNewKeyName('')
      setExpiresIn(null)
      mutate()
    } catch (err) {
      console.error(err)
    } finally {
      setCreating(false)
    }
  }

  async function handleDeleteKey(id: number) {
    try {
      setDeletingId(id)
      await deleteInternalKey(id)
      if (newKey?.id === id) {
        setNewKey(null)
      }
      mutate()
    } catch (err) {
      console.error(err)
    } finally {
      setDeletingId(null)
    }
  }

  const columns: ColumnsType<InternalKeyResponse> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (name: string) => name || '-'
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <span
          className={status === 'active' ? 'text-green-600' : 'text-gray-400'}
        >
          {status}
        </span>
      )
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (ts: number) => formatDateTime(ts)
    },
    {
      title: 'Expires At',
      dataIndex: 'expires_at',
      key: 'expires_at',
      render: (ts: number) => (ts ? formatDateTime(ts) : 'Never')
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_, record) => (
        <Button
          danger
          type='text'
          icon={<DeleteOutlined />}
          loading={deletingId === record.id}
          onClick={() => handleDeleteKey(record.id!)}
        />
      )
    }
  ]

  return (
    <div>
      <div className='flex justify-between items-center mb-4'>
        <span className='text-gray-500'>
          Manage your internal API keys for programmatic access.
        </span>
        <Button type='primary' onClick={() => setShowCreateModal(true)}>
          Create Key
        </Button>
      </div>

      {newKey?.key && (
        <div className='mb-4'>
          <Alert
            message='New API Key Created'
            description={
              <div>
                <p className='mb-2'>
                  Copy this key now. You will not be able to see it again.
                </p>
                <Typography.Paragraph className='break-all mb-0' copyable code>
                  {newKey.key}
                </Typography.Paragraph>
              </div>
            }
            type='success'
            showIcon
            closable
            onClose={() => setNewKey(null)}
          />
        </div>
      )}

      {loading ? (
        <LoadingSpin />
      ) : (
        <Table
          dataSource={keysRes?.data.items || []}
          columns={columns}
          rowKey='id'
          pagination={false}
          locale={{ emptyText: 'No API keys created yet' }}
        />
      )}

      <Modal
        title='Create Internal API Key'
        open={showCreateModal}
        onCancel={() => setShowCreateModal(false)}
        onOk={handleCreateKey}
        confirmLoading={creating}
        okText='Create'
      >
        <div className='space-y-4'>
          <div>
            <label className='block mb-1'>Name (optional)</label>
            <Input
              placeholder='Enter key name'
              value={newKeyName}
              onChange={(e) => setNewKeyName(e.target.value)}
            />
          </div>
          <div>
            <label className='block mb-1'>Expires in (seconds, optional)</label>
            <InputNumber
              className='w-full'
              placeholder='Leave empty for no expiration'
              min={0}
              value={expiresIn}
              onChange={(v) => setExpiresIn(v)}
            />
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default InternalApiKeys