import { Header } from '@/components/layout/Header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { CheckCircle, AlertTriangle, Camera, Star, MapPin, Settings, Building2, Globe } from 'lucide-react';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';

export default function SubmissionGuidelines() {
  useDocumentTitle('Submission Guidelines');
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-4">Submission Guidelines</h1>
          <p className="text-xl text-muted-foreground">
            Help us maintain the quality and accuracy of ThrillWiki by following these guidelines when contributing content.
          </p>
        </div>

        <div className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="w-5 h-5" />
                Park Creation & Editing Guidelines
              </CardTitle>
              <CardDescription>
                Accurate park information helps visitors plan their trips
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Verify Basic Information</h4>
                  <p className="text-sm text-muted-foreground">
                    Double-check park name, location, opening dates, and operational status
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Use Official Sources</h4>
                  <p className="text-sm text-muted-foreground">
                    Reference park websites, press releases, and verified social media accounts
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Complete Contact Details</h4>
                  <p className="text-sm text-muted-foreground">
                    Include website, phone number, and email when publicly available
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Choose Representative Images</h4>
                  <p className="text-sm text-muted-foreground">
                    Select high-quality banner and card images that showcase the park's character
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5" />
                Ride Creation & Editing Guidelines
              </CardTitle>
              <CardDescription>
                Detailed ride information enhances the enthusiast experience
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Accurate Technical Specifications</h4>
                  <p className="text-sm text-muted-foreground">
                    Verify height, speed, length, inversions, and capacity from reliable sources
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Correct Categorization</h4>
                  <p className="text-sm text-muted-foreground">
                    Choose the most specific ride category and sub-type available
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Manufacturer Information</h4>
                  <p className="text-sm text-muted-foreground">
                    Include ride manufacturer and model when known and verifiable
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Current Status Updates</h4>
                  <p className="text-sm text-muted-foreground">
                    Keep operational status current (operating, closed, under construction, etc.)
                  </p>
                </div>
              </div>
              <div className="mt-4">
                <h4 className="font-medium mb-2">Required Fields</h4>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="outline">Ride Name</Badge>
                  <Badge variant="outline">Park Association</Badge>
                  <Badge variant="outline">Category</Badge>
                  <Badge variant="outline">Status</Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building2 className="w-5 h-5" />
                Company & Manufacturer Guidelines
              </CardTitle>
              <CardDescription>
                Comprehensive company information supports industry knowledge
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Company Classification</h4>
                  <p className="text-sm text-muted-foreground">
                    Specify company type (manufacturer, operator, designer) and person type
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Historical Accuracy</h4>
                  <p className="text-sm text-muted-foreground">
                    Verify founding year, headquarters location, and company history
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Official Information</h4>
                  <p className="text-sm text-muted-foreground">
                    Use company websites, press releases, and industry publications
                  </p>
                </div>
              </div>
              <div className="mt-4">
                <h4 className="font-medium mb-2">Required Fields</h4>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="outline">Company Name</Badge>
                  <Badge variant="outline">Company Type</Badge>
                  <Badge variant="outline">Person Type</Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="w-5 h-5" />
                Location Guidelines
              </CardTitle>
              <CardDescription>
                Precise location data improves search and discovery
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Geographic Accuracy</h4>
                  <p className="text-sm text-muted-foreground">
                    Verify country, state/province, city, and postal code information
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Coordinate Precision</h4>
                  <p className="text-sm text-muted-foreground">
                    Use accurate latitude and longitude coordinates when available
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Timezone Information</h4>
                  <p className="text-sm text-muted-foreground">
                    Include correct timezone data for operational hours and events
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Star className="w-5 h-5" />
                Writing Quality Reviews
              </CardTitle>
              <CardDescription>
                Great reviews help other enthusiasts make informed decisions
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Be Specific and Detailed</h4>
                  <p className="text-sm text-muted-foreground">
                    Describe the ride experience, intensity, theming, and what makes it unique
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Consider Different Perspectives</h4>
                  <p className="text-sm text-muted-foreground">
                    Think about families, thrill seekers, and first-time visitors
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium">Include Practical Information</h4>
                  <p className="text-sm text-muted-foreground">
                    Mention wait times, best times to visit, height requirements, etc.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Camera className="w-5 h-5" />
                Photo Submission Guidelines
              </CardTitle>
              <CardDescription>
                High-quality photos enhance the ThrillWiki experience
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">Photo Requirements</h4>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>• High resolution and good lighting</li>
                  <li>• Clear subject focus (rides, parks, attractions)</li>
                  <li>• No watermarks or heavy editing</li>
                  <li>• Must be your original photos or properly licensed</li>
                </ul>
              </div>
              <div className="flex flex-wrap gap-2">
                <Badge variant="outline">Landscape preferred</Badge>
                <Badge variant="outline">Max 10MB per image</Badge>
                <Badge variant="outline">JPG/PNG formats</Badge>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertTriangle className="w-5 h-5" />
                Content Standards
              </CardTitle>
              <CardDescription>
                What to avoid when contributing to ThrillWiki
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid sm:grid-cols-2 gap-4">
                <div>
                  <h4 className="font-medium text-red-600 mb-2">Not Allowed</h4>
                  <ul className="space-y-1 text-sm text-muted-foreground">
                    <li>• Offensive or inappropriate content</li>
                    <li>• False or misleading information</li>
                    <li>• Spam or promotional content</li>
                    <li>• Copyrighted material without permission</li>
                    <li>• Personal attacks or harassment</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-medium text-green-600 mb-2">Encouraged</h4>
                  <ul className="space-y-1 text-sm text-muted-foreground">
                    <li>• Honest, balanced reviews</li>
                    <li>• Constructive feedback</li>
                    <li>• Helpful tips and insights</li>
                    <li>• Accurate park information</li>
                    <li>• Respectful community interaction</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Moderation Process</CardTitle>
              <CardDescription>
                How we maintain content quality on ThrillWiki
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-muted-foreground">
                All submissions are reviewed by our community moderation team. Content that doesn't meet our guidelines may be:
              </p>
              <div className="grid sm:grid-cols-3 gap-4 text-sm">
                <div className="text-center p-3 bg-muted rounded-lg">
                  <div className="font-medium">Pending Review</div>
                  <div className="text-muted-foreground">Awaiting approval</div>
                </div>
                <div className="text-center p-3 bg-green-50 dark:bg-green-950/20 rounded-lg">
                  <div className="font-medium text-green-700 dark:text-green-400">Approved</div>
                  <div className="text-muted-foreground">Published to site</div>
                </div>
                <div className="text-center p-3 bg-red-50 dark:bg-red-950/20 rounded-lg">
                  <div className="font-medium text-red-700 dark:text-red-400">Rejected</div>
                  <div className="text-muted-foreground">Needs revision</div>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="mt-8 p-4 bg-muted rounded-lg">
            <p className="text-sm text-muted-foreground">
              Questions about these guidelines? Contact our moderation team for clarification.
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}