{"path":"src/app/review/page.tsx","size":7945,"locked":false,"binary":false,"truncated":false,"content":"\"use client\";\n\nimport { useState, useEffect, Suspense } from \"react\";\nimport { useRouter, useSearchParams } from \"next/navigation\";\nimport { createClient } from \"@/lib/supabase/client\";\n\nfunction ReviewForm() {\n  const router = useRouter();\n  const searchParams = useSearchParams();\n  const productParam = searchParams.get(\"product\") || \"\";\n  const productId = searchParams.get(\"product_id\") || null;\n\n  const storageKey = productId\n    ? `launchbase_review_submitted_${productId}`\n    : \"launchbase_review_submitted\";\n\n  const [alreadySubmitted, setAlreadySubmitted] = useState(false);\n  const [name, setName] = useState(\"\");\n  const [rating, setRating] = useState(5);\n  const [comment, setComment] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(\"\");\n  const [success, setSuccess] = useState(false);\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n  const [userName, setUserName] = useState(\"\");\n  const [fetchingUser, setFetchingUser] = useState(true);\n\n  useEffect(() => {\n    const reviewed = localStorage.getItem(storageKey);\n    if (reviewed === \"true\") {\n      setAlreadySubmitted(true);\n    }\n  }, [storageKey]);\n\n  // Try to fetch the current user and their profile name\n  useEffect(() => {\n    const supabase = createClient();\n    if (!supabase) {\n      setFetchingUser(false);\n      return;\n    }\n\n    supabase.auth.getUser().then(({ data }) => {\n      const user = data.user;\n      if (user) {\n        setIsLoggedIn(true);\n        // Try to get full_name from profiles, fallback to user metadata\n        supabase\n          .from(\"profiles\")\n          .select(\"full_name\")\n          .eq(\"id\", user.id)\n          .maybeSingle()\n          .then(({ data: profile }) => {\n            const displayName =\n              profile?.full_name || user.user_metadata?.full_name || \"\";\n            setUserName(displayName);\n            setName(displayName);\n            setFetchingUser(false);\n          });\n      } else {\n        setIsLoggedIn(false);\n        setFetchingUser(false);\n      }\n    });\n  }, []);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (alreadySubmitted) return;\n    setLoading(true);\n    setError(\"\");\n\n    const res = await fetch(\"/api/reviews\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({\n        name: name || \"Anonymous\",\n        rating,\n        comment,\n        product_id: productId,\n      }),\n    });\n\n    if (res.ok) {\n      localStorage.setItem(storageKey, \"true\");\n      setSuccess(true);\n    } else {\n      const data = await res.json();\n      setError(data.error || \"Failed to submit review\");\n    }\n    setLoading(false);\n  };\n\n  if (fetchingUser) {\n    return (\n      <div className=\"min-h-screen flex items-center justify-center bg-[#fafafa]\">\n        <p className=\"text-sm text-neutral-400\">Loading…</p>\n      </div>\n    );\n  }\n\n  if (alreadySubmitted) {\n    return (\n      <div className=\"min-h-screen flex items-center justify-center bg-[#fafafa] px-4\">\n        <div className=\"max-w-md w-full bg-white border border-neutral-200 rounded-sm p-8 text-center\">\n          <h2 className=\"text-2xl font-serif font-semibold mb-4\">Thank you!</h2>\n          <p className=\"text-neutral-500 text-sm\">\n            You have already submitted a review for this product from this device.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (success) {\n    return (\n      <div className=\"min-h-screen flex items-center justify-center bg-[#fafafa] px-4\">\n        <div className=\"max-w-md w-full bg-white border border-neutral-200 rounded-sm p-8 text-center\">\n          <h2 className=\"text-2xl font-serif font-semibold mb-4\">\n            Review submitted!\n          </h2>\n          <button\n            onClick={() => router.push(\"/\")}\n            className=\"mt-6 inline-block bg-black text-white text-sm uppercase tracking-wider px-6 py-2.5 rounded-sm hover:bg-neutral-800\"\n          >\n            Back to site\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-screen flex items-center justify-center bg-[#fafafa] py-20 px-4\">\n      <div className=\"max-w-lg w-full bg-white border border-neutral-200 rounded-sm p-8\">\n        <h1 className=\"text-2xl font-serif font-semibold mb-6\">Leave a Review</h1>\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          {productParam && (\n            <div className=\"space-y-1.5\">\n              <label className=\"block text-[11px] uppercase tracking-widest text-neutral-500 font-medium\">\n                Product\n              </label>\n              <input\n                type=\"text\"\n                value={productParam}\n                disabled\n                className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n              />\n            </div>\n          )}\n          {/* If logged in, show name as read‑only; otherwise, show name input */}\n          {isLoggedIn ? (\n            <div className=\"space-y-1.5\">\n              <label className=\"block text-[11px] uppercase tracking-widest text-neutral-500 font-medium\">\n                Your Name\n              </label>\n              <input\n                type=\"text\"\n                value={userName}\n                disabled\n                className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n              />\n            </div>\n          ) : (\n            <div>\n              <label className=\"block text-sm font-medium text-neutral-700 mb-1\">\n                Your Name\n              </label>\n              <input\n                type=\"text\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n                required\n                className=\"w-full border border-neutral-300 rounded-sm px-3 py-2 text-sm\"\n                placeholder=\"Jane Smith\"\n              />\n            </div>\n          )}\n          <div>\n            <label className=\"block text-sm font-medium text-neutral-700 mb-1\">\n              Rating\n            </label>\n            <div className=\"flex gap-1\">\n              {[1, 2, 3, 4, 5].map((star) => (\n                <button\n                  key={star}\n                  type=\"button\"\n                  onClick={() => setRating(star)}\n                  className={`text-2xl ${star <= rating ? \"text-yellow-500\" : \"text-neutral-300\"}`}\n                >\n                  ★\n                </button>\n              ))}\n            </div>\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-neutral-700 mb-1\">\n              Comment\n            </label>\n            <textarea\n              rows={4}\n              value={comment}\n              onChange={(e) => setComment(e.target.value)}\n              required\n              className=\"w-full border border-neutral-300 rounded-sm px-3 py-2 text-sm\"\n              placeholder=\"Share your experience...\"\n            />\n          </div>\n          {error && <p className=\"text-sm text-red-500\">{error}</p>}\n          <button\n            type=\"submit\"\n            disabled={loading}\n            className=\"w-full bg-black text-white text-sm uppercase tracking-wider py-3 rounded-sm hover:bg-neutral-800 disabled:opacity-50\"\n          >\n            {loading ? \"Submitting...\" : \"Submit Review\"}\n          </button>\n        </form>\n      </div>\n    </div>\n  );\n}\n\nexport default function ReviewPage() {\n  return (\n    <Suspense\n      fallback={\n        <div className=\"min-h-screen flex items-center justify-center bg-[#fafafa]\">\n          <p className=\"text-sm text-neutral-400\">Loading form…</p>\n        </div>\n      }\n    >\n      <ReviewForm />\n    </Suspense>\n  );\n                                 }\n"}