'use client';

import { useEffect, useState } from 'react';
import { ImagePlus, Star, X } from 'lucide-react';
import { getClient } from '@/core/lib/brainerce';
import { checkAuthStatus } from '@/core/lib/auth';
import { Link } from '@/core/lib/navigation';
import { useTranslations } from '@/core/lib/translations';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import type { MyProductReview, ProductReview, ReviewPhotoUpload } from 'brainerce';

interface ReviewFormProps {
  productId: string;
}

type PhotoPolicy = MyProductReview['photos'];

type Stage =
  | { kind: 'loading' }
  | { kind: 'signed_out' }
  | { kind: 'not_eligible'; reason: MyProductReview['reason'] }
  | { kind: 'submit'; photos: PhotoPolicy }
  // `existingPhotos` comes from myImages, which INCLUDES photos still awaiting
  // the merchant — so a customer editing their review sees the one they already
  // uploaded instead of a form that looks like it lost it.
  | {
      kind: 'edit';
      review: ProductReview;
      photos: PhotoPolicy;
      existingPhotos: ReviewPhotoUpload[];
    };

/**
 * Single component that decides which UI to render for a customer on a PDP:
 * - Loading while we check auth state and eligibility
 * - Signed out -> sign-in CTA
 * - Signed in but not eligible -> "purchase this product to review"
 * - Eligible without review -> submit form
 * - Eligible with existing review -> edit/delete form (rating + body prefilled)
 */
export function ReviewForm({ productId }: ReviewFormProps) {
  const [stage, setStage] = useState<Stage>({ kind: 'loading' });
  const t = useTranslations('reviews');

  useEffect(() => {
    let cancelled = false;
    async function load() {
      const auth = await checkAuthStatus();
      if (cancelled) return;
      if (!auth.isLoggedIn) {
        setStage({ kind: 'signed_out' });
        return;
      }
      try {
        const me = await getClient().getMyProductReview(productId);
        if (cancelled) return;
        if (!me.eligible) {
          setStage({ kind: 'not_eligible', reason: me.reason });
          return;
        }
        const existingPhotos: ReviewPhotoUpload[] = me.myImages.map((img) => ({
          key: img.assetKey,
          url: img.thumbnailUrl ?? img.url,
          width: img.width,
          height: img.height,
        }));
        if (me.myReview) {
          setStage({ kind: 'edit', review: me.myReview, photos: me.photos, existingPhotos });
          return;
        }
        setStage({ kind: 'submit', photos: me.photos });
      } catch {
        if (!cancelled) setStage({ kind: 'not_eligible', reason: 'product_not_found' });
      }
    }
    void load();
    return () => {
      cancelled = true;
    };
  }, [productId]);

  if (stage.kind === 'loading') {
    return <div className="text-muted-foreground text-sm">{t('loading')}</div>;
  }

  if (stage.kind === 'signed_out') {
    return (
      <div className="rounded-md border p-4">
        <p className="text-sm">
          <Link href="/login" className="font-medium underline">
            {t('signIn')}
          </Link>{' '}
          {t('signInSuffix')}
        </p>
      </div>
    );
  }

  if (stage.kind === 'not_eligible') {
    return <NotEligibleMessage reason={stage.reason} />;
  }

  if (stage.kind === 'edit') {
    return (
      <EditReviewBlock
        productId={productId}
        initial={stage.review}
        photos={stage.photos}
        existingPhotos={stage.existingPhotos}
        onDeleted={() => setStage({ kind: 'submit', photos: stage.photos })}
      />
    );
  }

  return <SubmitReviewBlock productId={productId} photos={stage.photos} />;
}

function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
  const t = useTranslations('reviews');
  let message: string;
  switch (reason) {
    case 'no_eligible_order':
      message = t('onlyPurchasers');
      break;
    case 'reviews_disabled':
      message = t('reviewsDisabled');
      break;
    default:
      message = t('cannotReview');
  }
  return (
    <div className="bg-muted/30 rounded-md border p-4">
      <p className="text-muted-foreground text-sm">{message}</p>
    </div>
  );
}

function SubmitReviewBlock({ productId, photos }: { productId: string; photos: PhotoPolicy }) {
  return (
    <ReviewEditor
      productId={productId}
      mode="create"
      initialRating={5}
      initialBody=""
      photos={photos}
      initialPhotos={[]}
    />
  );
}

function EditReviewBlock({
  productId,
  initial,
  photos,
  existingPhotos,
  onDeleted,
}: {
  productId: string;
  initial: ProductReview;
  photos: PhotoPolicy;
  existingPhotos: ReviewPhotoUpload[];
  onDeleted: () => void;
}) {
  const [deleting, setDeleting] = useState(false);
  const t = useTranslations('reviews');
  const [deleteError, setDeleteError] = useState<string | null>(null);

  async function handleDelete() {
    if (!window.confirm(t('confirmDelete'))) return;
    setDeleting(true);
    setDeleteError(null);
    try {
      await getClient().deleteMyProductReview(productId);
      onDeleted();
      window.location.reload();
    } catch {
      setDeleteError(t('deleteFailed'));
    } finally {
      setDeleting(false);
    }
  }

  return (
    <div className="space-y-3">
      <ReviewEditor
        productId={productId}
        mode="edit"
        initialRating={initial.rating}
        initialBody={initial.body ?? ''}
        photos={photos}
        initialPhotos={existingPhotos}
      />
      <div className="flex items-center justify-between rounded-md border border-red-100 bg-red-50/50 p-3">
        <p className="text-xs text-red-700">{t('startOver')}</p>
        <button
          type="button"
          onClick={handleDelete}
          disabled={deleting}
          className="text-xs font-medium text-red-700 underline disabled:opacity-50"
        >
          {deleting ? t('deleting') : t('deleteReview')}
        </button>
      </div>
      {deleteError && (
        <p role="alert" className="text-sm text-red-700">
          {deleteError}
        </p>
      )}
    </div>
  );
}

/**
 * The actual form. Same shape for create and edit — only the API method
 * and the heading differ. Optimistic UX: success state + page reload to
 * let the server-rendered reviews list pick up the change.
 */
function ReviewEditor({
  productId,
  mode,
  initialRating,
  initialBody,
  photos,
  initialPhotos,
}: {
  productId: string;
  mode: 'create' | 'edit';
  initialRating: number;
  initialBody: string;
  photos: PhotoPolicy;
  initialPhotos: ReviewPhotoUpload[];
}) {
  const [rating, setRating] = useState(initialRating);
  const t = useTranslations('reviews');
  const [body, setBody] = useState(initialBody);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [uploads, setUploads] = useState<ReviewPhotoUpload[]>(initialPhotos);
  const [uploading, setUploading] = useState(false);
  const roomLeft = photos.maxPerReview - uploads.length;

  async function handleFiles(event: React.ChangeEvent<HTMLInputElement>) {
    const picked = Array.from(event.target.files ?? []);
    // Reset the input so picking the same file twice still fires a change event.
    event.target.value = '';
    if (picked.length === 0) return;

    const tooBig = picked.some((file) => file.size > photos.maxBytes);
    const accepted = picked.filter((file) => file.size <= photos.maxBytes).slice(0, roomLeft);
    if (tooBig) setError(t('photoTooLarge'));

    if (accepted.length === 0) return;
    setUploading(true);
    try {
      const done = await Promise.all(
        accepted.map((file) => getClient().uploadReviewPhoto(productId, file))
      );
      setUploads((prev) => [...prev, ...done]);
      if (!tooBig) setError(null);
    } catch {
      setError(t('photoUploadFailed'));
    } finally {
      setUploading(false);
    }
  }

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const client = getClient();
      // imageKeys REPLACES the photo set, so send every key we still want. Keys,
      // never urls — the url on an upload is only good for the local preview.
      const input = {
        rating,
        body: body.trim() || undefined,
        ...(photos.enabled ? { imageKeys: uploads.map((upload) => upload.key) } : {}),
      };
      if (mode === 'edit') {
        await client.updateMyProductReview(productId, input);
      } else {
        await client.submitProductReview(productId, input);
      }
      setSuccess(true);
      setTimeout(() => window.location.reload(), 1200);
    } catch (err) {
      const status = (err as { status?: number })?.status;
      if (status === 409) {
        setError(t('alreadySubmitted'));
      } else if (status === 403) {
        setError(t('onlyPurchasers'));
      } else if (status === 429) {
        setError(t('tooMany'));
      } else {
        setError(mode === 'edit' ? t('updateFailed') : t('submitFailed'));
      }
    } finally {
      setSubmitting(false);
    }
  }

  if (success) {
    return (
      <p className="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700">
        {mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}
      </p>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-3 rounded-md border p-4">
      <h3 className="font-medium">{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>

      <fieldset>
        <legend className="mb-1 text-sm">{t('yourRating')}</legend>
        <div className="inline-flex gap-1" role="radiogroup" aria-label={t('starRating')}>
          {[1, 2, 3, 4, 5].map((n) => (
            <button
              key={n}
              type="button"
              role="radio"
              aria-checked={rating === n}
              onClick={() => setRating(n)}
              className={n <= rating ? 'text-yellow-500' : 'text-gray-300'}
            >
              <Star className="h-6 w-6 fill-current" aria-hidden="true" />
            </button>
          ))}
        </div>
      </fieldset>

      <Label className="block text-sm font-normal">
        {t('yourReview')}{' '}
        <span className="text-muted-foreground text-xs">({t('optionalField')})</span>
        <Textarea
          value={body}
          onChange={(event) => setBody(event.target.value)}
          maxLength={5000}
          rows={4}
          className="mt-1 rounded"
        />
      </Label>

      {photos.enabled && (
        <fieldset className="space-y-2">
          <legend className="text-sm">
            {t('addPhotos')}{' '}
            <span className="text-muted-foreground text-xs">
              ({uploads.length}/{photos.maxPerReview})
            </span>
          </legend>

          {uploads.length > 0 && (
            <ul className="flex flex-wrap gap-2">
              {uploads.map((upload) => (
                <li key={upload.key} className="relative">
                  <img
                    src={upload.url}
                    alt=""
                    width={upload.width ?? undefined}
                    height={upload.height ?? undefined}
                    className="h-20 w-20 rounded border object-cover"
                  />
                  <button
                    type="button"
                    onClick={() =>
                      setUploads((prev) => prev.filter((item) => item.key !== upload.key))
                    }
                    aria-label={t('removePhoto')}
                    className="absolute end-1 top-1 rounded-full bg-black/60 p-1 text-white"
                  >
                    <X className="h-3 w-3" aria-hidden="true" />
                  </button>
                </li>
              ))}
            </ul>
          )}

          {/* A <label> wrapping a visually hidden input, not a bare file control.
              The browser's own "Choose Files" button cannot be styled and looks
              nothing like the rest of the form. Two things this has to do that the
              native control did for free: `disabled` on a hidden input greys
              NOTHING, so the label paints its own disabled state, and the line
              underneath says WHY it is disabled rather than leaving a dead button.
              The input stays a real input (no ref.click()) so keyboard and
              assistive tech reach it, and focus-within restores the focus ring. */}
          <Button asChild variant="outline" size="sm" className="w-fit">
            <label
              className={`focus-within:ring-ring inline-flex cursor-pointer items-center gap-2 focus-within:ring-2 ${
                uploading || roomLeft <= 0 ? 'pointer-events-none opacity-50' : ''
              }`}
            >
              <ImagePlus className="h-4 w-4" aria-hidden="true" />
              {uploading ? t('photoUploading') : t('choosePhotos')}
              <input
                type="file"
                accept="image/jpeg,image/png,image/webp,image/gif"
                multiple
                disabled={uploading || roomLeft <= 0}
                onChange={handleFiles}
                className="sr-only"
              />
            </label>
          </Button>

          <p className="text-muted-foreground text-xs">
            {roomLeft <= 0
              ? t('photoLimitReached', { max: String(photos.maxPerReview) })
              : t('photoFormats', { mb: String(Math.round(photos.maxBytes / (1024 * 1024))) })}
          </p>
          {/* Say it BEFORE they submit. A shopper who uploads a photo, submits, and
              then cannot see it will conclude the site is broken. */}
          {photos.requiresApproval && (
            <p className="text-muted-foreground text-xs">{t('photosNeedApproval')}</p>
          )}
        </fieldset>
      )}

      {error && (
        <p role="alert" className="text-sm text-red-700">
          {error}
        </p>
      )}

      <Button type="submit" disabled={submitting || uploading}>
        {submitting
          ? mode === 'edit'
            ? t('saving')
            : t('submittingBtn')
          : mode === 'edit'
            ? t('saveChanges')
            : t('submitReview')}
      </Button>
    </form>
  );
}