import React from 'react'
import { Button, ErrorState, Textarea, Card } from '@/components/ui'
import { t } from '@/lib/i18n'
import type { ReviewTipFormController } from './useReviewTipFormController'

export function ReviewTipFormView(params: { ctrl: ReviewTipFormController; onCancel?: () => void }): React.ReactElement {
  return (
    <Card variant="default" className="space-y-4">
      <form
        onSubmit={(e) => void params.ctrl.handleSubmit(e)}
        className="space-y-4"
      >
        <ReviewTipFormHeader split={params.ctrl.split} />
        <ReviewTipTextField value={params.ctrl.text} onChange={params.ctrl.setText} />
        {params.ctrl.error ? <ErrorBox message={params.ctrl.error} /> : null}
        <ReviewTipFormActions amount={params.ctrl.split.total} loading={params.ctrl.loading} onCancel={params.onCancel} />
      </form>
    </Card>
  )
}

function ReviewTipFormHeader(params: { split: { total: number; reviewer: number; platform: number } }): React.ReactElement {
  return (
    <>
      <h3 className="text-lg font-semibold text-neon-cyan">{t('reviewTip.form.title')}</h3>
      <p className="text-sm text-cyber-accent/70">
        {t('reviewTip.form.description', {
          amount: params.split.total,
          reviewer: params.split.reviewer,
          platform: params.split.platform,
        })}
      </p>
    </>
  )
}

function ReviewTipTextField(params: { value: string; onChange: (value: string) => void }): React.ReactElement {
  return (
    <Textarea
      id="review-tip-text"
      label={`${t('reviewTip.form.text.label')} (${t('common.optional')})`}
      value={params.value}
      onChange={(e) => params.onChange(e.target.value)}
      placeholder={t('reviewTip.form.text.placeholder')}
      rows={3}
      helperText={t('reviewTip.form.text.help')}
    />
  )
}

function ReviewTipFormActions(params: {
  amount: number
  loading: boolean
  onCancel?: (() => void) | undefined
}): React.ReactElement {
  return (
    <div className="flex gap-2">
      <Button
        type="submit"
        variant="success"
        disabled={params.loading}
        loading={params.loading}
      >
        {params.loading ? t('common.loading') : t('reviewTip.form.submit', { amount: params.amount })}
      </Button>
      {params.onCancel && (
        <Button
          type="button"
          variant="ghost"
          onClick={params.onCancel}
        >
          {t('common.cancel')}
        </Button>
      )}
    </div>
  )
}

function ErrorBox({ message }: { message: string }): React.ReactElement {
  return <ErrorState message={message} />
}