'use client'

import type { EventRevision } from '@/services/events'
import Button from '@/components/formElements/Button'
import { Card, CardBody } from '@/components/heroui/Card'
import { texts } from '@/texts'

interface AdminEventPendingRevisionCardProps {
  pendingId: string | null
  revision: EventRevision
  onApprove: () => void
  onReject: () => void
}

const AdminEventPendingRevisionCard = ({ pendingId, revision, onApprove, onReject }: AdminEventPendingRevisionCardProps) => {
  const { title, slug } = revision.payload

  return (
    <Card className="admin-surface">
      <CardBody className="flex flex-col gap-4 p-4">
        <div className="flex flex-col gap-1">
          <h2 className="text-base font-bold text-secondary-10">{texts.events.revisionPendingCardTitle}</h2>
          <p className="text-xs text-text-muted">ارسال‌شده: {new Date(revision.submittedAt).toLocaleString('fa-IR')}</p>
        </div>

        <dl className="grid gap-2 sm:grid-cols-2">
          {title != null && title !== '' ? (
            <div className="rounded-xl border border-secondary-40 bg-secondary-50/60 p-3 text-right">
              <dt className="text-xs text-secondary-30">عنوان پیشنهادی</dt>
              <dd className="mt-1 text-sm font-semibold text-secondary-20">{String(title)}</dd>
            </div>
          ) : null}
          {slug != null && slug !== '' ? (
            <div className="rounded-xl border border-secondary-40 bg-secondary-50/60 p-3 text-right">
              <dt className="text-xs text-secondary-30">اسلاگ پیشنهادی</dt>
              <dd
                className="mt-1 break-all text-sm font-semibold text-secondary-20"
                dir="ltr"
              >
                {String(slug)}
              </dd>
            </div>
          ) : null}
        </dl>

        <div className="flex flex-wrap items-center justify-end gap-2">
          <Button
            isLoading={pendingId === 'approve-revision'}
            size="sm"
            onClick={onApprove}
          >
            {texts.events.revisionApprove}
          </Button>
          <Button
            color="danger"
            disabled={pendingId === 'approve-revision'}
            size="sm"
            variant="flat"
            onClick={onReject}
          >
            {texts.events.revisionReject}
          </Button>
        </div>
      </CardBody>
    </Card>
  )
}

export default AdminEventPendingRevisionCard