"use client"

import * as React from 'react'
import { TriangleAlert, Info, X } from 'lucide-react'
import { Button } from '@open-mercato/ui/primitives/button'
import { Alert } from '@open-mercato/ui/primitives/alert'
import { Avatar } from '@open-mercato/ui/primitives/avatar'
import { Input } from '@open-mercato/ui/primitives/input'
import { Switch } from '@open-mercato/ui/primitives/switch'
import { Textarea } from '@open-mercato/ui/primitives/textarea'
import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
import { KbdShortcut } from '@open-mercato/ui/primitives/kbd'
import { SectionHeader } from '@open-mercato/ui/backend/SectionHeader'
import { useT } from '@open-mercato/shared/lib/i18n/context'
import { normalizeProposalEnvelope } from '../data/proposalEnvelope'
import { ProposalOptionList } from './ProposalOptionList'
import { formatConfidence, type AdHocProposalView, type ProposalView } from './types'
import { agentAvatarIcon } from './agentChips'
import { useAgentIconMap } from './useAgentIcons'
import { proposalVerdict } from './cockpitStatus'
import { proposalCaseStatusLabelKey, proposalCaseStatusVariant } from './proposalCaseStatus'
import { humanizeKey } from './proposalFactsData'
import {
  actionEditsToActions,
  deriveActionEdits,
  parseRawActions,
  reassembleProposalPayload,
  stringifyActions,
  type ActionEdit,
} from './proposalEdit'

export type DisposeKind = 'approved' | 'edited' | 'rejected'

export type ProposalActionsConfig = {
  /** Whether the operator can dispose (RBAC `proposals.dispose`). */
  canDispose: boolean
  /** Whether a write is currently in flight (buttons disabled). */
  busy?: boolean
  onApprove: () => void
  onEdit: (payload: unknown, reason: string) => void
  onReject: (reason: string) => void
}

export type ProposalCardProps = {
  /** Persisted proposal (caseload detail). */
  proposal?: ProposalView | null
  /**
   * Ad-hoc proposal a run just returned (playground proposal result). When
   * provided without `proposal`, the card renders read-only with disabled
   * actions. Build it with `mapAdHocProposal` — the card reads the option set
   * off `payload`, so it must be the envelope, not one option's actions.
   */
  adHoc?: AdHocProposalView
  /** Disposition action wiring. Omit for a fully read-only card (playground). */
  actions?: ProposalActionsConfig
  /** Opens the Agent I/O drawer. */
  onInspect?: () => void
  /** Human-readable agent name; falls back to the agent id when omitted. */
  agentLabel?: string
  /**
   * Which option the operator picked. `null` means no choice yet — approve and
   * edit stay disabled, because the endpoint requires one and guessing the
   * leader on the operator's behalf is exactly what Phase 4 removes.
   */
  selectedOptionId?: string | null
  /** Omit to render the option set read-only (playground preview, disposed row). */
  onSelectOption?: (optionId: string) => void
}

function stringifyPayload(payload: unknown): string {
  try {
    return JSON.stringify(payload ?? {}, null, 2)
  } catch {
    return '{}'
  }
}

type PayloadField = { key: string; kind: 'string' | 'number' | 'boolean'; value: string | number | boolean }

function isPrimitive(value: unknown): boolean {
  return value === null || ['string', 'number', 'boolean'].includes(typeof value)
}

// A flat object of primitives renders as friendly form fields; anything nested
// (objects/arrays) falls back to the raw JSON editor so we never lose data.
function toPayloadFields(payload: unknown): PayloadField[] | null {
  if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return null
  const entries = Object.entries(payload as Record<string, unknown>)
  if (entries.length === 0 || !entries.every(([, value]) => isPrimitive(value))) return null
  return entries.map(([key, value]) => ({
    key,
    kind: typeof value === 'number' ? 'number' : typeof value === 'boolean' ? 'boolean' : 'string',
    value: value === null ? '' : (value as string | number | boolean),
  }))
}

function fieldsToPayload(fields: PayloadField[]): Record<string, unknown> {
  return Object.fromEntries(
    fields.map((field) => {
      if (field.kind === 'number') return [field.key, Number(field.value)]
      if (field.kind === 'boolean') return [field.key, field.value === true || field.value === 'true']
      return [field.key, field.value]
    }),
  )
}

export function ProposalCard({
  proposal,
  adHoc,
  actions,
  onInspect,
  agentLabel,
  selectedOptionId = null,
  onSelectOption,
}: ProposalCardProps) {
  const t = useT()
  const [mode, setMode] = React.useState<'view' | 'edit' | 'reject'>('view')
  const [payloadText, setPayloadText] = React.useState('')
  const [payloadFields, setPayloadFields] = React.useState<PayloadField[]>([])
  const [isComplexPayload, setIsComplexPayload] = React.useState(false)
  // Structured (canonical `{actions}`) editing state — spec 4 Phase 4. The
  // legacy whole-payload states above remain only for non-canonical payloads.
  const [actionEdits, setActionEdits] = React.useState<ActionEdit[] | null>(null)
  const [rawMode, setRawMode] = React.useState(false)
  const [rawText, setRawText] = React.useState('')
  const [reason, setReason] = React.useState('')
  const [localError, setLocalError] = React.useState<string | null>(null)

  const agentIcons = useAgentIconMap()
  const agentId = proposal?.agentId ?? adHoc?.agentId ?? ''
  const agentIconInfo = agentIcons.get(agentId)
  const confidence = proposal?.confidence ?? adHoc?.confidence ?? null
  const payload = proposal?.payload ?? adHoc?.payload ?? null
  const rationale = proposal?.rationale ?? adHoc?.rationale ?? null
  const confidenceLabel = formatConfidence(confidence)
  const verdict = proposalVerdict(confidence)
  const busy = actions?.busy ?? false
  const canDispose = actions?.canDispose ?? false
  const isPending = (proposal?.disposition ?? 'pending') === 'pending'
  const optionCount = React.useMemo(() => normalizeProposalEnvelope(payload).options.length, [payload])
  // A verdict names the option it runs. With no option there is nothing to run,
  // and with an unmade choice there is nothing to name — either way the dispose
  // buttons stay inert rather than sending a guess.
  const optionChosen = optionCount > 0 && selectedOptionId != null

  const startEdit = React.useCallback(() => {
    // Canonical `{actions}` payloads get the structured per-action editor;
    // confidence/rationale are agent testimony and never become inputs.
    const edits = deriveActionEdits(payload, selectedOptionId)
    if (edits) {
      setActionEdits(edits)
      setRawMode(false)
      setRawText(stringifyActions(actionEditsToActions(edits)))
    } else {
      setActionEdits(null)
      const fields = toPayloadFields(payload)
      if (fields) {
        setPayloadFields(fields)
        setIsComplexPayload(false)
      } else {
        setPayloadText(stringifyPayload(payload))
        setIsComplexPayload(true)
      }
    }
    setReason('')
    setLocalError(null)
    setMode('edit')
  }, [payload, selectedOptionId])

  const updateField = React.useCallback((index: number, value: string | boolean) => {
    setPayloadFields((fields) => fields.map((field, i) => (i === index ? { ...field, value } : field)))
  }, [])

  const updateActionField = React.useCallback((actionIndex: number, fieldIndex: number, value: string | boolean) => {
    setActionEdits((edits) =>
      edits
        ? edits.map((edit, i) =>
            i === actionIndex
              ? { ...edit, fields: edit.fields.map((field, j) => (j === fieldIndex ? { ...field, value } : field)) }
              : edit,
          )
        : edits,
    )
  }, [])

  // The raw escape hatch edits ONLY the actions array — toggling to raw
  // serializes the current field edits; toggling back re-derives fields from
  // the raw text (invalid raw stays in raw mode with an inline error).
  const toggleRawMode = React.useCallback(() => {
    if (!actionEdits) return
    if (!rawMode) {
      setRawText(stringifyActions(actionEditsToActions(actionEdits)))
      setRawMode(true)
      setLocalError(null)
      return
    }
    const parsed = parseRawActions(rawText)
    if (!parsed.ok) {
      setLocalError(
        parsed.error === 'json'
          ? t('agent_orchestrator.proposal.edit.invalidJson')
          : t('agent_orchestrator.proposal.edit.invalidActions'),
      )
      return
    }
    const reparsed = deriveActionEdits(
      reassembleProposalPayload(payload, parsed.actions, selectedOptionId),
      selectedOptionId,
    )
    if (reparsed) setActionEdits(reparsed)
    setRawMode(false)
    setLocalError(null)
  }, [actionEdits, rawMode, rawText, payload, selectedOptionId, t])

  const startReject = React.useCallback(() => {
    setReason('')
    setLocalError(null)
    setMode('reject')
  }, [])

  const cancel = React.useCallback(() => {
    setMode('view')
    setLocalError(null)
  }, [])

  const submitEdit = React.useCallback(() => {
    if (!actions) return
    if (!reason.trim()) {
      setLocalError(t('agent_orchestrator.proposal.reject.reasonRequired'))
      return
    }
    if (actionEdits) {
      // Structured path: zod-guard the edited actions, then reassemble the
      // canonical payload — rationale/confidence/extra keys pass through verbatim.
      let editedActions
      if (rawMode) {
        const parsed = parseRawActions(rawText)
        if (!parsed.ok) {
          setLocalError(
            parsed.error === 'json'
              ? t('agent_orchestrator.proposal.edit.invalidJson')
              : t('agent_orchestrator.proposal.edit.invalidActions'),
          )
          return
        }
        editedActions = parsed.actions
      } else {
        editedActions = actionEditsToActions(actionEdits)
      }
      actions.onEdit(reassembleProposalPayload(payload, editedActions, selectedOptionId), reason.trim())
      return
    }
    let parsed: unknown
    if (isComplexPayload) {
      try {
        parsed = JSON.parse(payloadText)
      } catch {
        setLocalError(t('agent_orchestrator.proposal.edit.invalidJson'))
        return
      }
    } else {
      parsed = fieldsToPayload(payloadFields)
    }
    actions.onEdit(parsed, reason.trim())
  }, [
    actions,
    actionEdits,
    rawMode,
    rawText,
    payload,
    selectedOptionId,
    isComplexPayload,
    payloadText,
    payloadFields,
    reason,
    t,
  ])

  const submitReject = React.useCallback(() => {
    if (!actions) return
    if (!reason.trim()) {
      setLocalError(t('agent_orchestrator.proposal.reject.reasonRequired'))
      return
    }
    actions.onReject(reason.trim())
  }, [actions, reason, t])

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
        event.preventDefault()
        if (mode === 'edit') submitEdit()
        else if (mode === 'reject') submitReject()
      } else if (event.key === 'Escape') {
        event.preventDefault()
        cancel()
      }
    },
    [mode, submitEdit, submitReject, cancel],
  )

  return (
    <div className="rounded-lg border border-border bg-card">
      {/* Proposal header — clean card; the violet avatar ring signals the AI source. */}
      <div className="flex items-center gap-3 rounded-t-lg border-b border-border bg-card p-4">
        <Avatar label={agentLabel || agentId || 'AI'} size="md" ring icon={agentAvatarIcon(agentIconInfo?.icon ?? null, agentIconInfo?.resultKind)} />
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-medium text-foreground">
            {t('agent_orchestrator.proposal.proposes', undefined, { agent: agentLabel || agentId })}
          </p>
          <p className="truncate font-mono text-xs text-muted-foreground">{agentId}</p>
        </div>
        {confidenceLabel ? (
          <div className="text-right">
            <p className="text-xs text-muted-foreground">
              {t('agent_orchestrator.proposal.confidence')}
            </p>
            <p className="font-mono text-sm font-semibold text-brand-violet">{confidenceLabel}</p>
          </div>
        ) : null}
        {proposal ? (
          <StatusBadge variant={proposalCaseStatusVariant(proposal.disposition)} dot>
            {t(proposalCaseStatusLabelKey(proposal.disposition))}
          </StatusBadge>
        ) : null}
      </div>

      <div className="space-y-5 p-4">
        {/* Verdict block — confidence-driven, not a static "approve" banner. */}
        <NoticeBanner icon={TriangleAlert} tone="warning">{t(verdict.labelKey)}</NoticeBanner>

        {rationale ? <p className="text-sm text-muted-foreground">{rationale}</p> : null}

        {/* The option set the agent offered — ranked, with ONE selection control.
            An operator must see the alternatives that were considered, not only
            the verdict, which is the whole point of the envelope. */}
        <section className="space-y-2">
          <SectionHeader title={t('agent_orchestrator.proposal.options.heading')} count={optionCount} />
          <ProposalOptionList
            payload={payload}
            selectedOptionId={selectedOptionId}
            onSelect={onSelectOption}
            disabled={busy || !canDispose || !isPending}
            autoDispositionBlock={proposal?.autoDispositionBlock ?? null}
            showChooseHint={!!onSelectOption && isPending && optionCount > 1}
          />
        </section>

        {/* Inspect run */}
        {onInspect ? (
          <Button type="button" variant="outline" size="sm" onClick={onInspect}>
            {t('agent_orchestrator.proposal.ioHeading')}
          </Button>
        ) : null}

        {/* Gate — the "approve/edit/reject" warning only renders where those
            buttons exist (Caseload, pending). In read-only mode (the Playground
            preview) the proposal is saved but not disposable here, so point to
            Caseload instead of promising buttons. Already-disposed proposals show
            no gate. */}
        {actions && isPending ? (
          <NoticeBanner icon={Info}>{t('agent_orchestrator.proposal.gate')}</NoticeBanner>
        ) : !actions ? (
          <NoticeBanner icon={Info}>{t('agent_orchestrator.proposal.gateReadonly')}</NoticeBanner>
        ) : null}

        {/* Disposition reason on already-disposed proposals */}
        {proposal && !isPending && proposal.dispositionReason ? (
          <p className="text-sm text-muted-foreground">{proposal.dispositionReason}</p>
        ) : null}

        {/* Inline edit / reject editors */}
        {mode === 'edit' ? (
          <section className="space-y-3" onKeyDown={handleKeyDown}>
            <SectionHeader
              title={
                actionEdits
                  ? t('agent_orchestrator.proposal.edit.actionsHeading')
                  : t('agent_orchestrator.proposal.edit.heading')
              }
              action={
                actionEdits ? (
                  <Button type="button" variant="ghost" size="sm" onClick={toggleRawMode} disabled={busy}>
                    {rawMode
                      ? t('agent_orchestrator.proposal.edit.fieldsToggle')
                      : t('agent_orchestrator.proposal.edit.rawToggle')}
                  </Button>
                ) : undefined
              }
            />
            {actionEdits ? (
              rawMode ? (
                <div className="space-y-1">
                  <label className="text-sm font-medium" htmlFor="ao-edit-raw-actions">
                    {t('agent_orchestrator.proposal.edit.rawActionsLabel')}
                  </label>
                  <Textarea
                    id="ao-edit-raw-actions"
                    value={rawText}
                    onChange={(event) => setRawText(event.target.value)}
                    rows={8}
                    className="font-mono"
                  />
                </div>
              ) : (
                <div className="space-y-4">
                  {actionEdits.map((edit, actionIndex) => (
                    <div key={`${edit.type}-${actionIndex}`} className="space-y-3 rounded-lg border border-border p-3">
                      <p className="text-sm font-medium text-foreground">
                        {t('agent_orchestrator.proposal.edit.actionLabel', undefined, {
                          index: actionIndex + 1,
                          type: humanizeKey(edit.type),
                        })}
                      </p>
                      {edit.fields.length === 0 ? (
                        <p className="text-sm text-muted-foreground">
                          {t('agent_orchestrator.proposal.edit.noEditableFields')}
                        </p>
                      ) : (
                        edit.fields.map((field, fieldIndex) => (
                          <div key={field.key} className="space-y-1">
                            <label
                              className="text-sm font-medium"
                              htmlFor={`ao-edit-action-${actionIndex}-field-${fieldIndex}`}
                            >
                              {humanizeKey(field.key)}
                            </label>
                            {field.kind === 'boolean' ? (
                              <div>
                                <Switch
                                  id={`ao-edit-action-${actionIndex}-field-${fieldIndex}`}
                                  checked={field.value === true}
                                  onCheckedChange={(checked) => updateActionField(actionIndex, fieldIndex, checked)}
                                />
                              </div>
                            ) : (
                              <Input
                                id={`ao-edit-action-${actionIndex}-field-${fieldIndex}`}
                                type={field.kind === 'number' ? 'number' : 'text'}
                                value={String(field.value)}
                                onChange={(event) => updateActionField(actionIndex, fieldIndex, event.target.value)}
                              />
                            )}
                          </div>
                        ))
                      )}
                    </div>
                  ))}
                </div>
              )
            ) : isComplexPayload ? (
              <div className="space-y-1">
                <label className="text-sm font-medium" htmlFor="ao-edit-payload">
                  {t('agent_orchestrator.proposal.edit.payloadLabel')}
                </label>
                <Textarea
                  id="ao-edit-payload"
                  value={payloadText}
                  onChange={(event) => setPayloadText(event.target.value)}
                  rows={8}
                  className="font-mono"
                />
              </div>
            ) : (
              <div className="space-y-3">
                {payloadFields.map((field, index) => (
                  <div key={field.key} className="space-y-1">
                    <label className="text-sm font-medium" htmlFor={`ao-edit-field-${index}`}>
                      {humanizeKey(field.key)}
                    </label>
                    {field.kind === 'boolean' ? (
                      <div>
                        <Switch
                          id={`ao-edit-field-${index}`}
                          checked={field.value === true}
                          onCheckedChange={(checked) => updateField(index, checked)}
                        />
                      </div>
                    ) : (
                      <Input
                        id={`ao-edit-field-${index}`}
                        type={field.kind === 'number' ? 'number' : 'text'}
                        value={String(field.value)}
                        onChange={(event) => updateField(index, event.target.value)}
                      />
                    )}
                  </div>
                ))}
              </div>
            )}
            <div className="space-y-1">
              <label className="text-sm font-medium" htmlFor="ao-edit-reason">
                {t('agent_orchestrator.proposal.edit.reasonLabel')}
              </label>
              <Textarea
                id="ao-edit-reason"
                value={reason}
                onChange={(event) => setReason(event.target.value)}
                placeholder={t('agent_orchestrator.proposal.edit.reasonPlaceholder')}
                rows={2}
              />
            </div>
            {localError ? (
              <Alert status="error" style="light">
                {localError}
              </Alert>
            ) : null}
            <div className="flex items-center gap-2">
              <Button type="button" onClick={submitEdit} disabled={busy}>
                {t('agent_orchestrator.proposal.actions.saveEdit')}
              </Button>
              <Button type="button" variant="outline" onClick={cancel} disabled={busy}>
                {t('agent_orchestrator.proposal.actions.cancelEdit')}
              </Button>
              <span className="ml-auto text-xs text-muted-foreground">
                <KbdShortcut keys={['⌘', 'Enter']} />
              </span>
            </div>
          </section>
        ) : null}

        {mode === 'reject' ? (
          <section className="space-y-3" onKeyDown={handleKeyDown}>
            <SectionHeader title={t('agent_orchestrator.proposal.reject.heading')} />
            <div className="space-y-1">
              <label className="text-sm font-medium" htmlFor="ao-reject-reason">
                {t('agent_orchestrator.proposal.reject.reasonLabel')}
              </label>
              <Textarea
                id="ao-reject-reason"
                value={reason}
                onChange={(event) => setReason(event.target.value)}
                placeholder={t('agent_orchestrator.proposal.reject.reasonPlaceholder')}
                rows={3}
              />
            </div>
            {localError ? (
              <Alert status="error" style="light">
                {localError}
              </Alert>
            ) : null}
            <div className="flex items-center gap-2">
              <Button type="button" variant="destructive" onClick={submitReject} disabled={busy}>
                {t('agent_orchestrator.proposal.reject.confirm')}
              </Button>
              <Button type="button" variant="outline" onClick={cancel} disabled={busy}>
                {t('agent_orchestrator.proposal.actions.cancelEdit')}
              </Button>
              <span className="ml-auto text-xs text-muted-foreground">
                <KbdShortcut keys={['⌘', 'Enter']} />
              </span>
            </div>
          </section>
        ) : null}

        {/* Primary actions footer (only for pending + dispose-capable) */}
        {mode === 'view' && actions && isPending ? (
          <div className="flex items-center gap-2 border-t border-border pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={startReject}
              disabled={!canDispose || busy}
            >
              <X className="mr-1.5 size-4 text-status-error-text" />
              {t('agent_orchestrator.proposal.actions.reject')}
            </Button>
            <Button
              type="button"
              variant="outline"
              onClick={startEdit}
              disabled={!canDispose || busy || !optionChosen}
              title={optionChosen ? undefined : t('agent_orchestrator.proposal.options.chooseHint')}
            >
              {t('agent_orchestrator.proposal.actions.edit')}
            </Button>
            <Button
              type="button"
              className="ml-auto"
              onClick={() => actions.onApprove()}
              disabled={!canDispose || busy || !optionChosen}
              title={optionChosen ? undefined : t('agent_orchestrator.proposal.options.chooseHint')}
            >
              {t('agent_orchestrator.proposal.actions.approve')}
            </Button>
          </div>
        ) : null}
      </div>
    </div>
  )
}

function NoticeBanner({ icon: Icon, tone, children }: { icon: React.ComponentType<{ className?: string }>; tone?: 'warning'; children: React.ReactNode }) {
  return (
    <div className="flex items-start gap-2.5 rounded-lg bg-muted px-3.5 py-2.5 text-sm text-foreground">
      <Icon className={`mt-0.5 size-4 shrink-0 ${tone === 'warning' ? 'text-status-warning-text' : 'text-muted-foreground'}`} />
      <span>{children}</span>
    </div>
  )
}

export default ProposalCard