import React from 'react'
import type { ArticleDraft } from '@/lib/articlePublisher'
import { ArticleField } from './ArticleField'
import { ArticleFormButtons } from './ArticleFormButtons'

interface ArticleEditorFormProps {
  draft: ArticleDraft
  onDraftChange: (draft: ArticleDraft) => void
  onSubmit: (e: React.FormEvent) => void
  loading: boolean
  error: string | null
  onCancel?: () => void
}

export function ArticleEditorForm({
  draft,
  onDraftChange,
  onSubmit,
  loading,
  error,
  onCancel,
}: ArticleEditorFormProps) {
  return (
    <form onSubmit={onSubmit} className="border rounded-lg p-6 bg-white space-y-4">
      <h2 className="text-2xl font-bold mb-4">Publish New Article</h2>

      <ArticleField
        id="title"
        label="Title"
        value={draft.title}
        onChange={(value) => onDraftChange({ ...draft, title: value as string })}
        required
        placeholder="Enter article title"
      />

      <ArticleField
        id="preview"
        label="Preview (Public)"
        value={draft.preview}
        onChange={(value) => onDraftChange({ ...draft, preview: value as string })}
        required
        type="textarea"
        rows={4}
        placeholder="This preview will be visible to everyone for free"
        helpText="This content will be visible to everyone"
      />

      <ArticleField
        id="content"
        label="Full Content (Private)"
        value={draft.content}
        onChange={(value) => onDraftChange({ ...draft, content: value as string })}
        required
        type="textarea"
        rows={8}
        placeholder="This content will be encrypted and sent to users who pay"
        helpText="This content will be encrypted and sent as a private message after payment"
      />

      <ArticleField
        id="zapAmount"
        label="Price (sats)"
        value={draft.zapAmount}
        onChange={(value) => onDraftChange({ ...draft, zapAmount: value as number })}
        required
        type="number"
        min={1}
        helpText="Amount in satoshis to unlock the full content"
      />

      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-3">
          <p className="text-sm text-red-800">{error}</p>
        </div>
      )}

      <ArticleFormButtons loading={loading} onCancel={onCancel} />
    </form>
  )
}