"use client"
import type React from "react"
import { useState, useEffect, useRef } from "react"
import { useSearchParams } from "next/navigation"
import Link from "next/link"
import { FileText, Upload, CheckCircle, Loader2, ArrowLeft, ShieldAlert, ShieldCheck, AlertTriangle, Info, RefreshCw } from "lucide-react"
import { CoinsStacked } from "@/icons"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useWalletStore } from "@/lib/wallet-store"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { ethers } from "ethers"
import { usePrivadoId } from "@/lib/privado-id"
import { PERSPECTIVE_CONTRACT_ABI, PERSPECTIVE_CONTRACT_ADDRESS, FEE_CONTRACT_ADDRESS, FEE_CONTRACT_ABI } from "@/lib/constants"
import { useTrustData } from "@/hooks/use-trust-data"
// Mock issues data for the dropdown
const mockIssues = [
{
id: "climate-action",
title: "Climate Action Policies",
category: "Environmental Policy"
},
{
id: "education-reform",
title: "Education System Reform",
category: "Education"
},
{
id: "healthcare-access",
title: "Healthcare Accessibility",
category: "Healthcare"
},
{
id: "housing-affordability",
title: "Housing Affordability Crisis",
category: "Infrastructure"
},
{
id: "digital-privacy",
title: "Digital Privacy Regulations",
category: "Technology"
}
]
// Generate a simple CAPTCHA
const generateCaptcha = () => {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
let captcha = '';
for (let i = 0; i < 6; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
return captcha;
};
export default function SubmitPage() {
const {
walletConnected,
walletAddress,
isVerified,
citizenshipVerified,
eligibilityVerified,
verificationStatus,
perspectivesSubmittedToday: perspectivesSubmitted,
incrementPerspectiveCount
} = useWalletStore()
const { trustScore, dailyLimit, isLoading, updateUserTrust } = useTrustData()
const searchParams = useSearchParams()
const issueParam = searchParams.get('issue')
const [isSubmitting, setIsSubmitting] = useState(false)
const [isSubmitted, setIsSubmitted] = useState(false)
const [ipfsHash, setIpfsHash] = useState("")
const [selectedIssue, setSelectedIssue] = useState<string | null>(null)
const [title, setTitle] = useState("")
const [content, setContent] = useState("")
const [captchaInput, setCaptchaInput] = useState("")
const [captchaValue, setCaptchaValue] = useState("")
const [captchaVerified, setCaptchaVerified] = useState(false)
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [fileError, setFileError] = useState<string>("")
const fileInputRef = useRef<HTMLInputElement>(null)
const [submissionError, setSubmissionError] = useState<string | null>(null)
const [uploadingFile, setUploadingFile] = useState(false)
const { verifyIdentity } = usePrivadoId()
// Economic barrier states
const [showFeeModal, setShowFeeModal] = useState(false)
const [transactionState, setTransactionState] = useState<'idle' | 'pending' | 'confirmed' | 'error'>('idle')
const [transactionHash, setTransactionHash] = useState<string | null>(null)
const [contentToSubmit, setContentToSubmit] = useState<{
issueId: string;
text: string;
fileUrl?: string;
} | null>(null)
// Fee amount in POL
const FEE_AMOUNT = "0.01"
// Check rate limit for unverified users
const isRateLimited = !isVerified && perspectivesSubmitted >= 5
// Set the selected issue from URL parameter if available
useEffect(() => {
if (issueParam) {
setSelectedIssue(issueParam)
}
}, [issueParam])
// Generate CAPTCHA on load
useEffect(() => {
if (!isVerified) {
refreshCaptcha();
}
}, [isVerified]);
// Get the selected issue details
const selectedIssueDetails = selectedIssue ?
mockIssues.find(issue => issue.id === selectedIssue) : null
const refreshCaptcha = () => {
setCaptchaValue(generateCaptcha());
setCaptchaInput("");
setCaptchaVerified(false);
};
const validateCaptcha = () => {
const isValid = captchaInput.trim() === captchaValue;
setCaptchaVerified(isValid);
return isValid;
};
// Add file validation function
const validateFile = (file: File): boolean => {
// Reset error message
setFileError("");
// Check file type
const validTypes = ['application/pdf', 'image/jpeg', 'image/png'];
if (!validTypes.includes(file.type)) {
setFileError("Invalid file type. Please upload a PDF, JPEG, or PNG file.");
return false;
}
// Check file size (5MB limit)
const maxSize = 5 * 1024 * 1024; // 5MB in bytes
if (file.size > maxSize) {
setFileError("File is too large. Maximum size is 5MB.");
return false;
}
return true;
}
// Add file change handler
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (file) {
if (validateFile(file)) {
setSelectedFile(file)
} else {
e.target.value = '' // Reset input
setSelectedFile(null)
}
}
}
// Add smart contract submission function
const submitToBlockchain = async (
issueId: string,
text: string,
fileUrl?: string
) => {
try {
const provider = new ethers.providers.Web3Provider(
window.ethereum as ethers.providers.ExternalProvider || undefined
);
const signer = provider.getSigner()
const contract = new ethers.Contract(
PERSPECTIVE_CONTRACT_ADDRESS,
PERSPECTIVE_CONTRACT_ABI,
signer
)
// Prepare metadata including verification status
const metadata = {
isVerified,
timestamp: Date.now(),
fileUrl,
submitterAddress: await signer.getAddress()
}
// Submit perspective to smart contract
const tx = await contract.submitPerspective(
issueId,
text,
JSON.stringify(metadata),
{ gasLimit: 500000 }
)
// Wait for transaction confirmation
await tx.wait()
return tx.hash
} catch (error) {
console.error("Blockchain submission error:", error)
throw error
}
}
// Update file upload handler with additional CAPTCHA check
const handleFileUpload = async (file: File): Promise<string> => {
if (!isVerified && !captchaVerified) {
setFileError("Please complete CAPTCHA verification first");
document.getElementById('captcha-section')?.scrollIntoView({ behavior: 'smooth' });
return "";
}
setUploadingFile(true);
try {
// TODO: Replace with actual IPFS upload
await new Promise(resolve => setTimeout(resolve, 1000));
const mockIpfsUrl = `ipfs://Qm...${file.name}`;
return mockIpfsUrl;
} catch (error) {
console.error("File upload error:", error);
setFileError("Failed to upload file. Please try again.");
return "";
} finally {
setUploadingFile(false);
}
};
// Handle fee payment and submission
const handleFeePayment = async () => {
if (!walletConnected || !contentToSubmit) return;
setTransactionState('pending');
try {
const provider = new ethers.providers.Web3Provider(
window.ethereum as ethers.providers.ExternalProvider || undefined
);
const signer = provider.getSigner();
const contract = new ethers.Contract(
FEE_CONTRACT_ADDRESS,
FEE_CONTRACT_ABI,
signer
);
// Convert the fee amount to wei
const feeInWei = ethers.utils.parseEther(FEE_AMOUNT);
// Call the payFeeAndSubmit function from our smart contract
const tx = await contract.payFeeAndSubmit(
contentToSubmit.issueId,
contentToSubmit.text,
contentToSubmit.fileUrl || "",
isVerified,
{
value: feeInWei,
gasLimit: 500000
}
);
// Wait for transaction confirmation
await tx.wait();
setTransactionHash(tx.hash);
setTransactionState('confirmed');
// Update user trust score if unverified
if (!isVerified) {
try {
await updateUserTrust('submit_perspective');
} catch (trustError) {
console.error("Failed to update trust score:", trustError);
}
}
setIpfsHash(tx.hash);
setIsSubmitted(true);
incrementPerspectiveCount();
setShowFeeModal(false);
} catch (error: any) {
console.error("Fee payment failed:", error);
setTransactionState('error');
setSubmissionError(error.message || "Failed to process fee payment. Please try again.");
}
};
// Update submit handler to check for verification
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSubmissionError(null);
if (!walletConnected || !selectedIssue) return;
// Verify identity status if needed
if (!isVerified) {
if (!validateCaptcha()) {
setSubmissionError("CAPTCHA validation failed. Please try again.");
refreshCaptcha();
return;
}
if (isRateLimited) {
setSubmissionError("Daily submission limit reached. Please verify your identity for unlimited access.");
return;
}
}
setIsSubmitting(true);
try {
// Handle file upload if present
let fileUrl = "";
if (selectedFile) {
fileUrl = await handleFileUpload(selectedFile);
if (!fileUrl) {
setIsSubmitting(false);
return; // Upload failed
}
}
// For unverified users, prompt for fee payment
if (!isVerified) {
setContentToSubmit({
issueId: selectedIssue,
text: content,
fileUrl: fileUrl || undefined
});
setShowFeeModal(true);
setIsSubmitting(false);
return;
}
// For verified users, proceed with normal submission
const txHash = await submitToBlockchain(selectedIssue, content, fileUrl || undefined);
setIpfsHash(txHash);
setIsSubmitted(true);
incrementPerspectiveCount();
} catch (error: any) {
console.error("Submission failed:", error);
setSubmissionError(error.message || "Failed to submit perspective. Please try again.");
} finally {
setIsSubmitting(false);
}
};
// Render verification banner based on status
const renderVerificationBanner = () => {
if (!isVerified) {
return (
<Alert variant="default" className="mb-6 border-amber-300 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-800">
<AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
<AlertTitle className="text-amber-800 dark:text-amber-400">Limited Functionality</AlertTitle>
<AlertDescription className="text-amber-700 dark:text-amber-500">
As an unverified user, you're in read-only mode with limited actions.
You can submit up to {dailyLimit} perspectives per day.
<Button
variant="outline"
size="sm"
className="mt-2 bg-amber-600 text-white hover:bg-amber-700 border-amber-700"
asChild
>
<Link href="/profile/verify">Verify Identity</Link>
</Button>
</AlertDescription>
</Alert>
);
} else if (citizenshipVerified && !eligibilityVerified) {
return (
<Alert variant="default" className="mb-6 border-amber-300 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-800">
<ShieldCheck className="h-4 w-4 text-amber-600 dark:text-amber-400" />
<AlertTitle className="text-amber-800 dark:text-amber-400">Citizenship Verified</AlertTitle>
<AlertDescription className="text-amber-700 dark:text-amber-500">
Your citizenship is confirmed. You can submit up to 20 perspectives per day.
Complete your eligibility attestation to unlock unlimited submissions and full voting power.
<Button
variant="outline"
size="sm"
className="mt-2 bg-amber-600 text-white hover:bg-amber-700 border-amber-700"
asChild
>
<Link href="/profile/verify">Complete Verification</Link>
</Button>
</AlertDescription>
</Alert>
);
} else if (citizenshipVerified && eligibilityVerified) {
return (
<Alert variant="default" className="mb-6 border-green-300 bg-green-50 dark:bg-green-950/30 dark:border-green-800">
<ShieldCheck className="h-4 w-4 text-green-600 dark:text-green-400" />
<AlertTitle className="text-green-800 dark:text-green-400">Fully Verified</AlertTitle>
<AlertDescription className="text-green-700 dark:text-green-500">
You're fully verified with unlimited perspective submissions and enhanced influence on outcomes.
</AlertDescription>
</Alert>
);
}
return null;
};
if (!walletConnected) {
return (
<div className="container mx-auto px-4 py-8">
<div className="mx-auto max-w-3xl text-center">
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Connect Your Wallet</h1>
<p className="mt-4 text-lg text-muted-foreground">
Please connect your wallet to submit a perspective.
</p>
</div>
</div>
)
}
if (isSubmitted) {
return (
<div className="container mx-auto px-4 py-8">
<div className="mx-auto max-w-3xl text-center">
<div className="mb-4 flex justify-center">
<CheckCircle className="h-12 w-12 text-green-500 dark:text-green-400" />
</div>
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Perspective Submitted!</h1>
<p className="mt-4 text-lg text-muted-foreground">
Your perspective has been successfully submitted and stored on IPFS.
</p>
<p className="mt-2 text-sm text-muted-foreground">
IPFS Hash: {ipfsHash}
</p>
{!isVerified && (
<p className="mt-4 text-sm bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800 rounded-md p-3">
<Info className="h-4 w-4 inline-block mr-2" />
Your fee of {FEE_AMOUNT} POL is refundable if your submission remains unflagged for 24 hours.
</p>
)}
<div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<Button
variant="outline"
onClick={() => {
setIsSubmitted(false)
setTitle("")
setContent("")
if (!isVerified) {
refreshCaptcha();
}
}}
>
Submit Another Perspective
</Button>
{selectedIssue && (
<Button asChild>
<Link href={`/issues/${selectedIssue}`}>
View Issue
</Link>
</Button>
)}
</div>
</div>
</div>
)
}
return (
<div className="container mx-auto px-4 py-10 max-w-4xl">
<div className="mx-auto max-w-3xl">
<Button variant="ghost" size="sm" asChild className="mb-4">
<Link href="/issues">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Issues
</Link>
</Button>
{renderVerificationBanner()}
{/* Fee payment modal */}
<Dialog open={showFeeModal} onOpenChange={setShowFeeModal}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center">
<CoinsStacked className="h-5 w-5 mr-2 text-blue-500" />
Fee Required for Unverified Users
</DialogTitle>
<DialogDescription>
This action requires a {FEE_AMOUNT} POL fee, which is refundable if your submission is not flagged within 24 hours.
</DialogDescription>
</DialogHeader>
<div className="my-6">
<div className="rounded-md p-4 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
<p className="text-sm">
<Info className="h-4 w-4 inline-block mr-2" />
This small fee helps prevent spam and abuse. The fee will be automatically refunded after 24 hours if your submission isn't flagged for moderation.
</p>
</div>
{transactionState === 'pending' && (
<div className="flex flex-col items-center justify-center mt-4 p-4 bg-muted/20 rounded-md">
<Loader2 className="h-8 w-8 animate-spin text-primary mb-2" />
<p className="text-sm font-medium">Processing Transaction...</p>
<p className="text-xs text-muted-foreground mt-1">Please confirm in your wallet and wait for confirmation</p>
</div>
)}
{transactionState === 'error' && (
<div className="mt-4 p-4 bg-red-50 dark:bg-red-950/50 text-red-700 dark:text-red-400 rounded-md border border-red-200 dark:border-red-900">
<AlertTriangle className="h-4 w-4 inline-block mr-2" />
<span className="font-medium">Transaction Error</span>
<p className="text-sm mt-1">{submissionError}</p>
</div>
)}
</div>
<DialogFooter className="gap-2 sm:justify-between sm:gap-0">
<Button
variant="outline"
onClick={() => setShowFeeModal(false)}
disabled={transactionState === 'pending'}
>
Cancel
</Button>
<Button
onClick={handleFeePayment}
className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
disabled={transactionState === 'pending' || !walletConnected}
>
Pay {FEE_AMOUNT} POL & Submit
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<h1 className="text-3xl font-bold mb-2">Submit Your Perspective</h1>
<p className="text-muted-foreground mb-6">
Share your thoughts on important topics and contribute to the discourse
</p>
{/* Daily submission limit indicator - only for unverified users */}
{!isVerified && (
<div className="mb-6 p-4 bg-primary/10 dark:bg-primary/20 rounded-lg border border-primary/20 dark:border-primary/30">
<div className="flex items-start">
<div className="flex-1">
<h3 className="text-sm font-medium text-foreground dark:text-primary-foreground mb-1">Daily Submission Limit</h3>
<div className="flex items-center">
<div className="flex-1 mr-4">
<div className="h-2 w-full bg-muted dark:bg-muted/50 rounded-full overflow-hidden border border-primary/10">
<div
className="h-full bg-primary rounded-full"
style={{ width: `${(perspectivesSubmitted / dailyLimit) * 100}%` }}
></div>
</div>
</div>
<div className="text-sm font-medium text-foreground dark:text-primary-foreground">
{perspectivesSubmitted} / {dailyLimit}
</div>
</div>
<p className="mt-2 text-xs text-muted-foreground dark:text-primary-foreground">
{trustScore < 100 ? "Increase your trust score to get more daily submissions." : "You've reached the maximum trust score for an unverified user."}
{" "}
<a href="/profile/verify" className="font-medium underline">
Verify your identity
</a>{" "}
for unlimited submissions.
</p>
</div>
</div>
</div>
)}
{/* Fee notice for unverified users */}
{!isVerified && (
<Alert className="mb-6 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800">
<CoinsStacked className="h-4 w-4" />
<AlertTitle>Fee Required for Unverified Users</AlertTitle>
<AlertDescription>
Submitting a perspective requires a {FEE_AMOUNT} POL fee, which will be refunded if your submission remains unflagged for 24 hours.
</AlertDescription>
</Alert>
)}
{perspectivesSubmitted >= dailyLimit && !isVerified ? (
<div className="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4 mb-6 dark:bg-yellow-900/50 dark:border-yellow-800 dark:text-yellow-300">
<div className="flex">
<div className="flex-shrink-0">
<svg className="h-5 w-5 text-yellow-400 dark:text-yellow-300" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium">Daily submission limit reached</h3>
<div className="mt-2 text-sm">
<p>
You've reached your daily submission limit. Come back tomorrow or{" "}
<a href="/profile/verify" className="font-medium underline">
verify your identity
</a>{" "}
for unlimited submissions.
</p>
</div>
</div>
</div>
</div>
) : (
<Card className="dark:border-border">
<CardHeader>
<CardTitle>New Perspective</CardTitle>
<CardDescription>
Fill out the form below to submit your perspective. Be specific and constructive in your feedback.
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Issue Selection */}
<div className="space-y-2">
<Label htmlFor="issue" className="flex items-center">
Select Issue <span className="text-red-500 ml-1">*</span>
<span className="text-xs text-muted-foreground ml-2">(Required)</span>
</Label>
{selectedIssueDetails ? (
<div className="mb-4">
<div className="flex items-center justify-between p-3 border rounded-md">
<div>
<p className="font-medium">{selectedIssueDetails.title}</p>
<Badge variant="outline" className="mt-1">{selectedIssueDetails.category}</Badge>
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setSelectedIssue(null)}
>
Change
</Button>
</div>
<p className="text-xs text-muted-foreground mt-2">
Your perspective will be linked to this issue
</p>
</div>
) : (
<div>
<Select
value={selectedIssue || ""}
onValueChange={(value) => setSelectedIssue(value)}
required
>
<SelectTrigger>
<SelectValue placeholder="Choose an issue to respond to" />
</SelectTrigger>
<SelectContent>
{mockIssues.map((issue) => (
<SelectItem key={issue.id} value={issue.id}>
{issue.title} ({issue.category})
</SelectItem>
))}
</SelectContent>
</Select>
<div className="mt-2 flex justify-between items-center">
<p className="text-xs text-muted-foreground">
Can't find the issue you're looking for?
</p>
<Button type="button" variant="link" size="sm" asChild className="p-0 h-auto">
<Link href="/issues/propose">Propose a new issue</Link>
</Button>
</div>
</div>
)}
</div>
{!selectedIssue && (
<Alert className="mb-4">
<AlertTitle>Note</AlertTitle>
<AlertDescription>
All perspectives must be linked to a specific issue. This helps organize discussions and generate meaningful insights.
</AlertDescription>
</Alert>
)}
{/* Title */}
<div className="space-y-2">
<Label htmlFor="title">Title</Label>
<Input
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Give your perspective a clear, concise title"
className="w-full"
required
/>
</div>
{/* Content */}
<div className="space-y-2">
<Label htmlFor="content">Your Perspective</Label>
<Textarea
id="content"
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="Share your thoughts in detail. Consider including specific examples or suggestions."
className={`min-h-[200px] ${content.length > 1000 ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
required
/>
<div className="flex justify-between items-center mt-1">
<p className={`text-sm ${content.length > 1000 ? 'text-red-500 dark:text-red-400 font-medium' : 'text-muted-foreground'}`}>
{content.length > 1000 ? 'Perspective exceeds 1000 characters' : ''}
</p>
<p className="text-sm text-muted-foreground">
{content.length}/1000 characters
</p>
</div>
</div>
{/* Attachments */}
<div className="space-y-2">
<Label className="flex items-center">
Attachments
<span className="text-xs text-muted-foreground ml-2">(Optional)</span>
</Label>
<div className="space-y-4">
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<input
type="file"
ref={fileInputRef}
onChange={handleFileChange}
accept=".pdf,.jpg,.jpeg,.png"
className="hidden"
disabled={!isVerified && !captchaVerified}
/>
<Button
type="button"
variant="outline"
className="gap-2 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200"
onClick={() => {
if (!isVerified && !captchaVerified) {
// Scroll to CAPTCHA section when trying to upload without verification
document.getElementById('captcha-section')?.scrollIntoView({ behavior: 'smooth' });
return;
}
fileInputRef.current?.click();
}}
disabled={!isVerified && !captchaVerified}
>
<Upload className="h-4 w-4" />
{!isVerified && !captchaVerified ? 'Verify to Upload' : 'Attach File'}
</Button>
{selectedFile && (
<div className="flex items-center gap-2 text-sm">
<FileText className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">{selectedFile.name}</span>
<Button
type="button"
variant="ghost"
size="sm"
className="h-auto p-1 text-red-500 hover:text-red-700"
onClick={() => {
setSelectedFile(null)
if (fileInputRef.current) fileInputRef.current.value = ''
}}
>
Remove
</Button>
</div>
)}
</div>
{fileError && (
<p className="text-sm text-red-500 dark:text-red-400">{fileError}</p>
)}
<div className="text-sm text-muted-foreground space-y-1">
<p>Files must be PDF, JPEG, or PNG, and under 5MB.</p>
{!isVerified && !captchaVerified && (
<Alert className="mt-2 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800">
<Info className="h-4 w-4" />
<AlertTitle>Verification Required</AlertTitle>
<AlertDescription>
Please complete the CAPTCHA verification below to upload files.
<Button
type="button"
variant="outline"
size="sm"
className="mt-2 w-full bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 border-blue-300 dark:border-blue-700 dark:text-blue-300"
onClick={() => document.getElementById('captcha-section')?.scrollIntoView({ behavior: 'smooth' })}
>
Go to Verification
</Button>
</AlertDescription>
</Alert>
)}
</div>
</div>
</div>
{/* CAPTCHA for Unverified Users */}
{!isVerified && (
<div id="captcha-section" className="space-y-2">
<Label htmlFor="captcha" className="flex items-center">
Human Verification
<span className="text-red-500 ml-1">*</span>
{!captchaVerified && (
<span className="text-xs text-blue-600 ml-2">(Required for unverified users)</span>
)}
</Label>
<div className="border rounded-md p-4 bg-muted/30">
<div className="flex items-center justify-between mb-3">
<div className="flex-1 text-center">
<div
className="inline-block px-4 py-2 bg-primary/10 dark:bg-primary/20 rounded font-mono text-lg tracking-widest text-foreground dark:text-primary-foreground"
style={{ letterSpacing: '0.5em', userSelect: 'none' }}
>
{captchaValue}
</div>
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={refreshCaptcha}
className="ml-2"
>
<RefreshCw className="h-4 w-4" />
<span className="sr-only">Refresh CAPTCHA</span>
</Button>
</div>
<div className="flex gap-2">
<Input
id="captcha"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.target.value)}
placeholder="Enter the code shown above"
className="flex-1"
required={!isVerified}
/>
<Button
type="button"
variant="outline"
onClick={validateCaptcha}
className="bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200"
>
Verify
</Button>
</div>
{captchaVerified && (
<p className="text-green-600 dark:text-green-400 text-sm mt-1 flex items-center">
<CheckCircle className="h-3 w-3 mr-1" /> Verification successful - You can now upload files
</p>
)}
</div>
</div>
)}
{/* Error Message */}
{submissionError && (
<Alert variant="destructive" className="mt-4">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>{submissionError}</AlertDescription>
</Alert>
)}
{/* Submit Button */}
<div className="mt-6">
<button
type="submit"
disabled={
!walletConnected ||
(!isVerified && !captchaVerified) ||
(perspectivesSubmitted >= dailyLimit && !isVerified) ||
isSubmitting
}
className={`
w-full py-3 px-4 rounded-md font-medium text-white
${isSubmitting ? 'bg-muted-foreground cursor-not-allowed' : 'bg-primary hover:bg-primary/90'}
${(!walletConnected || (!isVerified && !captchaVerified) || (perspectivesSubmitted >= dailyLimit && !isVerified))
? 'opacity-50 cursor-not-allowed'
: ''}
transition duration-200
`}
>
{isSubmitting ? 'Submitting...' : 'Submit Perspective'}
</button>
</div>
</form>
</CardContent>
</Card>
)}
{/* Guidelines */}
<Card className="mt-8 dark:border-border">
<CardHeader>
<CardTitle>Submission Guidelines</CardTitle>
<CardDescription>Tips for submitting an effective perspective</CardDescription>
</CardHeader>
<CardContent>
<ul className="list-disc space-y-2 pl-4 text-muted-foreground">
<li>Be specific and provide concrete examples</li>
<li>Focus on constructive solutions rather than just problems</li>
<li>Consider the impact on different stakeholders</li>
<li>Support your perspective with data when possible</li>
<li>Keep your tone professional and respectful</li>
<li>Review your submission for clarity before posting</li>
</ul>
</CardContent>
</Card>
</div>
</div>
)
}