practice ReparseHintsModal.tsx

0% Statements 0/172
0% Branches 0/1
0% Functions 0/1
0% Lines 0/172
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

/**
 * ReparseHintsModal - Modal for providing hints when re-parsing a worksheet
 *
 * Allows users to provide additional context to help the AI
 * better understand handwriting or correct parsing errors.
 */

import { type ReactNode, useState, useCallback } from 'react'
import { css } from '../../../styled-system/css'
import { Z_INDEX } from '@/constants/zIndex'

export interface ReparseHintsModalProps {
  /** Whether the modal is open */
  isOpen: boolean
  /** Callback to close the modal */
  onClose: () => void
  /** Callback when user confirms re-parse with hints */
  onConfirm: (hints: string | undefined) => void
  /** Whether a parse is currently in progress */
  isProcessing: boolean
}

export function ReparseHintsModal({
  isOpen,
  onClose,
  onConfirm,
  isProcessing,
}: ReparseHintsModalProps): ReactNode {
  const [hints, setHints] = useState('')

  const handleClose = useCallback(() => {
    setHints('')
    onClose()
  }, [onClose])

  const handleConfirm = useCallback(() => {
    onConfirm(hints || undefined)
    setHints('')
  }, [hints, onConfirm])

  if (!isOpen) return null

  return (
    <div
      data-element="reparse-modal-overlay"
      className={css({
        position: 'fixed',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        zIndex: Z_INDEX.MODAL + 1,
      })}
      onClick={handleClose}
    >
      <div
        data-element="reparse-modal"
        className={css({
          width: '500px',
          maxWidth: '90vw',
          backgroundColor: 'gray.800',
          borderRadius: 'xl',
          padding: 6,
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
        })}
        onClick={(e) => e.stopPropagation()}
      >
        <h2
          className={css({
            fontSize: 'lg',
            fontWeight: 'semibold',
            color: 'white',
            marginBottom: 4,
          })}
        >
          Re-parse with Hints
        </h2>

        <p
          className={css({
            fontSize: 'sm',
            color: 'gray.400',
            marginBottom: 4,
          })}
        >
          Provide additional context to help the AI better understand this worksheet. This is useful
          when problems were mis-parsed or handwriting is difficult to read.
        </p>

        <textarea
          value={hints}
          onChange={(e) => setHints(e.target.value)}
          placeholder="Example hints:&#10;- Problems #3-5 are subtraction, not addition&#10;- The student writes 7s that look like 1s&#10;- There are 20 problems total, arranged in 4 rows"
          className={css({
            width: '100%',
            height: '150px',
            px: 3,
            py: 2,
            fontSize: 'sm',
            backgroundColor: 'gray.900',
            color: 'white',
            border: '1px solid',
            borderColor: 'gray.600',
            borderRadius: 'lg',
            resize: 'vertical',
            _focus: {
              outline: 'none',
              borderColor: 'orange.500',
              boxShadow: '0 0 0 2px token(colors.orange.500/20)',
            },
            _placeholder: {
              color: 'gray.500',
            },
          })}
        />

        <div
          className={css({
            display: 'flex',
            justifyContent: 'flex-end',
            gap: 3,
            marginTop: 4,
          })}
        >
          <button
            type="button"
            onClick={handleClose}
            className={css({
              px: 4,
              py: 2,
              fontSize: 'sm',
              fontWeight: 'medium',
              color: 'white',
              backgroundColor: 'gray.700',
              border: 'none',
              borderRadius: 'lg',
              cursor: 'pointer',
              _hover: { backgroundColor: 'gray.600' },
            })}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={isProcessing}
            className={css({
              px: 4,
              py: 2,
              fontSize: 'sm',
              fontWeight: 'medium',
              color: 'white',
              backgroundColor: 'orange.600',
              border: 'none',
              borderRadius: 'lg',
              cursor: 'pointer',
              _hover: { backgroundColor: 'orange.700' },
              _disabled: { opacity: 0.5, cursor: 'wait' },
            })}
          >
            {isProcessing ? 'Re-parsing...' : 'Re-parse Worksheet'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default ReparseHintsModal