import { useState, FormEvent } from 'react';
import { useLearn } from '../hooks/useLearn';
interface LearnModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
}
export function LearnModal({ isOpen, onClose, onSuccess }: LearnModalProps) {
const [pattern, setPattern] = useState('');
const [source, setSource] = useState('');
const [concepts, setConcepts] = useState('');
const { loading, error, success, learn, reset } = useLearn();
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
const conceptsArray = concepts
.split(',')
.map((c) => c.trim())
.filter((c) => c);
const result = await learn({
pattern,
source: source || undefined,
concepts: conceptsArray.length > 0 ? conceptsArray : undefined,
});
if (result?.success) {
setPattern('');
setSource('');
setConcepts('');
onSuccess();
setTimeout(() => {
onClose();
reset();
}, 2000);
}
};
const handleClose = () => {
reset();
onClose();
};
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
handleClose();
}
};
if (!isOpen) return null;
return (
<div className="modal active" onClick={handleBackdropClick}>
<div className="modal-content">
<div className="modal-header">
<div className="modal-title">Add Pattern to Oracle</div>
<button className="modal-close" onClick={handleClose}>
×
</button>
</div>
{success && (
<div className="success-message">
Pattern added successfully! File: {success.file}
</div>
)}
{error && <div className="error" style={{ marginBottom: 15 }}>{error}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="form-label" htmlFor="pattern">
Pattern / Learning *
</label>
<textarea
id="pattern"
value={pattern}
onChange={(e) => setPattern(e.target.value)}
placeholder="Describe the pattern you've learned..."
required
/>
</div>
<div className="form-group">
<label className="form-label" htmlFor="source">
Source (optional)
</label>
<input
type="text"
id="source"
value={source}
onChange={(e) => setSource(e.target.value)}
placeholder="e.g., Session retrospective, Git workflow"
/>
</div>
<div className="form-group">
<label className="form-label" htmlFor="concepts">
Concepts (optional, comma-separated)
</label>
<input
type="text"
id="concepts"
value={concepts}
onChange={(e) => setConcepts(e.target.value)}
placeholder="e.g., git, safety, trust"
/>
</div>
<div className="form-actions">
<button type="button" className="btn-secondary" onClick={handleClose}>
Cancel
</button>
<button type="submit" disabled={loading || !pattern.trim()}>
{loading ? 'Adding...' : 'Add to Oracle'}
</button>
</div>
</form>
</div>
</div>
);
}
