import { useState, useEffect } from 'react'
import type { VirtualKey } from '../../api/types'
import { useUpdateKey, useRevokeKey, useRoutes } from '../../api/queries'
import Modal from '../../components/shared/Modal'
import ConfirmDialog from '../../components/shared/ConfirmDialog'
import { AdminButton } from '../../components/shared/Performative'

interface KeyEditModalProps {
  vk: VirtualKey
  onClose: () => void
}

export default function KeyEditModal({ vk, onClose }: KeyEditModalProps) {
  const update = useUpdateKey()
  const revoke = useRevokeKey()
  const [desc, setDesc] = useState(vk.description ?? '')
  const [spendLimit, setSpendLimit] = useState(vk.max_budget_usd?.toString() ?? '')
  const [rpmLimit, setRpmLimit] = useState(vk.rpm_limit?.toString() ?? '')
  const [selectedRoutes, setSelectedRoutes] = useState<Set<string>>(
    new Set(vk.allowed_routes ?? []),
  )
  const [confirmRevoke, setConfirmRevoke] = useState(false)
  const { data: routesData } = useRoutes()

  function handleSave() {
    update.mutate({
      id: vk.id,
      body: {
        description: desc || null,
        // max_budget_usd is the enforced spend cap; spend_limit column is unused.
        max_budget_usd: spendLimit ? Number(spendLimit) : null,
        rpm_limit: rpmLimit ? Number(rpmLimit) : null,
        allowed_routes: selectedRoutes.size > 0 ? [...selectedRoutes] : null,
        // PUT clears any omitted field to NULL; resend current values so an edit
        // does not silently wipe limits the form does not surface.
        expires_at: vk.expires_at,
        tpm_limit: vk.tpm_limit,
        budget_duration: vk.budget_duration,
        allowed_models: vk.allowed_models,
      },
    }, { onSuccess: onClose })
  }

  // Return the promise so ConfirmDialog can await it and own its own close.
  // Close the parent modal reactively on success, after ConfirmDialog has
  // settled, so we never update its state on an unmounted component.
  function doRevoke() {
    return revoke.mutateAsync(vk.id)
  }
  useEffect(() => {
    if (revoke.isSuccess) onClose()
  }, [revoke.isSuccess]) // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <>
      <Modal
        open
        onClose={onClose}
        title={`Edit Key — ${vk.key_prefix}…`}
        dismissable={!update.isPending}
        footer={
          <>
            <AdminButton
              tone="danger"
              onClick={() => setConfirmRevoke(true)}
              disabled={update.isPending}
              style={{ marginRight: 'auto' }}
            >
              Revoke
            </AdminButton>
            <AdminButton onClick={onClose} disabled={update.isPending}>Cancel</AdminButton>
            <AdminButton tone="primary" onClick={handleSave} loading={update.isPending}>
              Save
            </AdminButton>
          </>
        }
      >
        <div className="form-group">
          <label className="form-label" htmlFor="vk-desc">Description</label>
          <input
            id="vk-desc"
            name="description"
            value={desc}
            onChange={(e) => setDesc(e.target.value)}
            style={{ width: '100%' }}
          />
        </div>
        <div className="form-group">
          <label className="form-label" htmlFor="vk-spend">Spend limit (USD)</label>
          <input
            id="vk-spend"
            name="spend_limit"
            value={spendLimit}
            onChange={(e) => setSpendLimit(e.target.value)}
            type="number"
            min="0"
            step="0.01"
          />
        </div>
        <div className="form-group">
          <label className="form-label" htmlFor="vk-rpm">RPM limit</label>
          <input
            id="vk-rpm"
            name="rpm_limit"
            value={rpmLimit}
            onChange={(e) => setRpmLimit(e.target.value)}
            type="number"
            min="0"
          />
        </div>
        <div className="form-group">
          <div className="form-label">
            Allowed routes {selectedRoutes.size === 0 && <span className="hint">(all routes)</span>}
          </div>
          <div className="route-scope-list">
            {routesData?.routes.map((r) => (
              <label key={r.id} className="route-scope-item">
                <input
                  type="checkbox"
                  name={`route-${r.id}`}
                  checked={selectedRoutes.has(r.id)}
                  onChange={() => {
                    setSelectedRoutes((prev) => {
                      const next = new Set(prev)
                      if (next.has(r.id)) next.delete(r.id)
                      else next.add(r.id)
                      return next
                    })
                  }}
                />
                <span>{r.name}</span>
              </label>
            ))}
            {(!routesData?.routes.length) && <span className="hint">No routes configured</span>}
          </div>
        </div>
      </Modal>
      <ConfirmDialog
        open={confirmRevoke}
        onClose={() => setConfirmRevoke(false)}
        onConfirm={doRevoke}
        title="Revoke key?"
        message={
          <>
            Revoking <span className="mono">{vk.key_prefix}…</span> will immediately reject
            any request using it. This cannot be undone.
          </>
        }
        confirmLabel="Revoke"
      />
    </>
  )
}
