/**
 * PostPurchaseReview — star rating + comment after purchase redemption.
 *
 * Mounted on the PurchaseConfirmation success page (logged-in users only).
 * Submits POST /api/reviews with type:'standard'.
 */

'use client';

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { Button } from '@/components/ui/primitives/Button';
import { Label } from '@/components/ui/primitives/Label';
import { StarRating } from '@/components/ui/primitives/StarRating';
import { Textarea } from '@/components/ui/primitives/Textarea';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { z } from 'zod';

const submitReviewResponseSchema = z.object({
  ok: z.literal(true),
  reviewId: z.string(),
});

export interface PostPurchaseReviewProps {
  purchaseId: string;
}

export function PostPurchaseReview({ purchaseId }: PostPurchaseReviewProps) {
  const t = useT('reviews');

  const [rating, setRating] = useState(0);
  const [body, setBody] = useState('');
  const [dismissed, setDismissed] = useState(false);

  const mutation = useMutation({
    mutationFn: async () => {
      const csrf = getCsrfToken();
      const res = await fetch('/api/reviews', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': csrf,
        },
        body: JSON.stringify({
          type: 'standard',
          purchaseId,
          rating,
          body,
        }),
      });
      const json: unknown = await res.json();
      if (!res.ok) {
        const errJson = json as { code?: string };
        if (errJson?.code === 'ALREADY_REVIEWED') {
          throw new Error('already_reviewed');
        }
        throw new Error('submit_error');
      }
      return submitReviewResponseSchema.parse(json);
    },
  });

  const submitDisabled = rating === 0 || body.trim().length === 0 || mutation.isPending;

  if (dismissed) return null;

  if (mutation.isSuccess) {
    return <InlineNotice tone="success" title={t('submit_success_thanks')} className="w-full" />;
  }

  return (
    <div className="bg-surface-raised rounded-xl px-4 py-4 shadow-sm">
      <div className="flex flex-col gap-3">
        <h2 className="text-text-primary text-base font-semibold">{t('submit_title')}</h2>

        {mutation.isError && (
          <InlineNotice
            tone="danger"
            description={
              mutation.error instanceof Error && mutation.error.message === 'already_reviewed'
                ? t('already_reviewed')
                : t('submit_error')
            }
          />
        )}

        <div className="flex flex-col gap-1.5">
          <Label>{t('rating_label')}</Label>
          <StarRating value={rating} onChange={setRating} size="md" />
        </div>

        <div className="flex flex-col gap-1.5">
          <Label htmlFor="ppr-body">{t('body_label')}</Label>
          <Textarea
            id="ppr-body"
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder={t('body_placeholder')}
            rows={3}
          />
        </div>

        {submitDisabled && !mutation.isPending && (
          <p className="text-text-muted text-xs">{t('submit_requirements')}</p>
        )}

        <div className="flex items-center justify-between gap-2">
          <Button variant="ghost" size="sm" onClick={() => setDismissed(true)}>
            {t('skip_button')}
          </Button>
          <Button
            variant="primary"
            size="sm"
            disabled={submitDisabled}
            onClick={() => mutation.mutate()}
          >
            {t('submit_button')}
          </Button>
        </div>
      </div>
    </div>
  );
}