"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Mail, Phone, MapPin, Calendar, User, AlertTriangle, HeartPulse, Droplets, School, Sun, Wind, CloudRain, Bug, Shield } from "lucide-react"; export default function ClimeGuard() { const [currentSection, setCurrentSection] = useState<"user" | "hazards" | "resilience" | "other" | "review">("user"); const [formData, setFormData] = useState({ // User Information reporterName: "", reporterLocation: "", reporterPhone: "", reporterEmail: "", hazardLocation: "", hazardDate: "", reportTitle: "", // Hazards floodLevel: "", floodNotes: "", droughtLevel: "", droughtNotes: "", heatwaveLevel: "", heatwaveNotes: "", stormLevel: "", stormNotes: "", malariaLevel: "", malariaNotes: "", // Resilience healthcareStatus: "", healthcareNotes: "", waterStatus: "", waterNotes: "", schoolStatus: "", schoolNotes: "", // Other Issues desertificationNotes: "", meningitisNotes: "", foodSecurityNotes: "", }); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSelectChange = (name: string, value: string) => { setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // In a real app, you would send this data to a server console.log("Form submitted:", formData); alert("Report submitted successfully!"); }; const shareViaWhatsApp = () => { const message = `CLIMEGUARD Report\n\nReporter: ${formData.reporterName}\nLocation: ${formData.hazardLocation}\n\nView full report for details.`; const url = `https://wa.me/?text=${encodeURIComponent(message)}`; window.open(url, '_blank'); }; const shareViaEmail = () => { const subject = `CLIMEGUARD Report: ${formData.reportTitle}`; const body = `CLIMEGUARD Report\n\nReporter Information:\nName: ${formData.reporterName}\nLocation: ${formData.reporterLocation}\nPhone: ${formData.reporterPhone}\nEmail: ${formData.reporterEmail}\n\nHazard Location: ${formData.hazardLocation}\nDate: ${formData.hazardDate}\n\nFull report details available in the app.`; const url = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; window.open(url); }; const printReport = () => { window.print(); }; const renderUserSection = () => (

Reporter Information

Your Name

Your Location

Phone Number

Email Address

Hazard Information

Hazard Location

Date of Hazard

Report Title/Introduction

); const renderHazardsSection = () => (

Climate Hazard Reporting

{/* Floods */} Floods

Flood Level

Additional Notes

</div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Droughts */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Sun className="text-yellow-600" />
          <CardTitle>Droughts</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Drought Level</Label>
            <Select onValueChange={(value) => handleSelectChange("droughtLevel", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select drought level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="droughtNotes"
              value={formData.droughtNotes}
              onChange={handleInputChange}
              placeholder="Describe the drought situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Heatwaves */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Sun className="text-red-600" />
          <CardTitle>Heatwaves</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Heatwave Level</Label>
            <Select onValueChange={(value) => handleSelectChange("heatwaveLevel", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select heatwave level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="heatwaveNotes"
              value={formData.heatwaveNotes}
              onChange={handleInputChange}
              placeholder="Describe the heatwave situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Storms */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Wind className="text-gray-600" />
          <CardTitle>Storms</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Storm Level</Label>
            <Select onValueChange={(value) => handleSelectChange("stormLevel", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select storm level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="stormNotes"
              value={formData.stormNotes}
              onChange={handleInputChange}
              placeholder="Describe the storm situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Malaria Outbreaks */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Bug className="text-green-600" />
          <CardTitle>Malaria Outbreaks</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Malaria Level</Label>
            <Select onValueChange={(value) => handleSelectChange("malariaLevel", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select malaria outbreak level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="malariaNotes"
              value={formData.malariaNotes}
              onChange={handleInputChange}
              placeholder="Describe the malaria outbreak situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      <div className="flex justify-between mt-6">
        <Button variant="outline" onClick={() => setCurrentSection("user")}>
          Back
        </Button>
        <Button onClick={() => setCurrentSection("resilience")} className="bg-green-600 hover:bg-green-700">
          Next: Community Resilience
        </Button>
      </div>
    </div>
  );

const renderResilienceSection = () => (
    <div className="space-y-8">
      <h2 className="text-xl font-bold text-purple-800">Community Resilience Reporting</h2>
      
      {/* Healthcare Access */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <HeartPulse className="text-red-600" />
          <CardTitle>Healthcare Access</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Healthcare Status</Label>
            <Select onValueChange={(value) => handleSelectChange("healthcareStatus", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select healthcare status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="available">Available</SelectItem>
                <SelectItem value="not_available">Not Available</SelectItem>
                <SelectItem value="low_availability">Low Availability</SelectItem>
                <SelectItem value="good_quality">Good Quality</SelectItem>
                <SelectItem value="low_quality">Low Quality</SelectItem>
                <SelectItem value="very_poor_quality">Very Poor Quality</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="healthcareNotes"
              value={formData.healthcareNotes}
              onChange={handleInputChange}
              placeholder="Describe healthcare access situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Water Sources */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Droplets className="text-blue-600" />
          <CardTitle>Water Sources</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Water Status</Label>
            <Select onValueChange={(value) => handleSelectChange("waterStatus", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select water status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="available">Available</SelectItem>
                <SelectItem value="not_available">Not Available</SelectItem>
                <SelectItem value="low_availability">Low Availability</SelectItem>
                <SelectItem value="good_quality">Good Quality</SelectItem>
                <SelectItem value="low_quality">Low Quality</SelectItem>
                <SelectItem value="very_poor_quality">Very Poor Quality</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="waterNotes"
              value={formData.waterNotes}
              onChange={handleInputChange}
              placeholder="Describe water sources situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* School Safety */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <School className="text-green-600" />
          <CardTitle>School Safety</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>School Status</Label>
            <Select onValueChange={(value) => handleSelectChange("schoolStatus", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select school safety status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="available">Available</SelectItem>
                <SelectItem value="not_available">Not Available</SelectItem>
                <SelectItem value="low_availability">Low Availability</SelectItem>
                <SelectItem value="good_quality">Good Quality</SelectItem>
                <SelectItem value="low_quality">Low Quality</SelectItem>
                <SelectItem value="very_poor_quality">Very Poor Quality</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Additional Notes</Label>
            <Textarea
              name="schoolNotes"
              value={formData.schoolNotes}
              onChange={handleInputChange}
              placeholder="Describe school safety situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      <div className="flex justify-between mt-6">
        <Button variant="outline" onClick={() => setCurrentSection("hazards")}>
          Back
        </Button>
        <Button onClick={() => setCurrentSection("other")} className="bg-green-600 hover:bg-green-700">
          Next: Other Issues
        </Button>
      </div>
    </div>
  );

const renderOtherSection = () => (
    <div className="space-y-8">
      <h2 className="text-xl font-bold text-purple-800">Other Climate Issues</h2>
      
      {/* Desertification */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Sun className="text-yellow-600" />
          <CardTitle>Desertification</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Notes</Label>
            <Textarea
              name="desertificationNotes"
              value={formData.desertificationNotes}
              onChange={handleInputChange}
              placeholder="Describe desertification issues"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Meningitis Outbreaks */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Bug className="text-red-600" />
          <CardTitle>Meningitis Outbreaks</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Notes</Label>
            <Textarea
              name="meningitisNotes"
              value={formData.meningitisNotes}
              onChange={handleInputChange}
              placeholder="Describe meningitis outbreak situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      {/* Food Security */}
      <Card>
        <CardHeader className="flex flex-row items-center gap-2">
          <Shield className="text-green-600" />
          <CardTitle>Food Security</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Notes</Label>
            <Textarea
              name="foodSecurityNotes"
              value={formData.foodSecurityNotes}
              onChange={handleInputChange}
              placeholder="Describe food security situation"
            />
          </div>
          <div className="space-y-2">
            <Label>Upload Picture (if available)</Label>
            <Input type="file" accept="image/*" />
          </div>
        </CardContent>
      </Card>
      
      <div className="flex justify-between mt-6">
        <Button variant="outline" onClick={() => setCurrentSection("resilience")}>
          Back
        </Button>
        <Button onClick={() => setCurrentSection("review")} className="bg-green-600 hover:bg-green-700">
          Review and Submit
        </Button>
      </div>
    </div>
  );

const renderReviewSection = () => (
    <div className="space-y-8">
      <h2 className="text-xl font-bold text-purple-800">Review Your Report</h2>
      
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Reporter Information</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          <p><span className="font-semibold">Name:</span> {formData.reporterName}</p>
          <p><span className="font-semibold">Location:</span> {formData.reporterLocation}</p>
          <p><span className="font-semibold">Phone:</span> {formData.reporterPhone}</p>
          <p><span className="font-semibold">Email:</span> {formData.reporterEmail}</p>
          <p><span className="font-semibold">Hazard Location:</span> {formData.hazardLocation}</p>
          <p><span className="font-semibold">Hazard Date:</span> {formData.hazardDate}</p>
          <p><span className="font-semibold">Report Title:</span> {formData.reportTitle}</p>
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Climate Hazards</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {formData.floodLevel && (
            <div className="space-y-1">
              <p className="font-semibold">Floods: {formData.floodLevel}</p>
              {formData.floodNotes && <p className="text-sm">{formData.floodNotes}</p>}
            </div>
          )}
          
          {formData.droughtLevel && (
            <div className="space-y-1">
              <p className="font-semibold">Droughts: {formData.droughtLevel}</p>
              {formData.droughtNotes && <p className="text-sm">{formData.droughtNotes}</p>}
            </div>
          )}
          
          {formData.heatwaveLevel && (
            <div className="space-y-1">
              <p className="font-semibold">Heatwaves: {formData.heatwaveLevel}</p>
              {formData.heatwaveNotes && <p className="text-sm">{formData.heatwaveNotes}</p>}
            </div>
          )}
          
          {formData.stormLevel && (
            <div className="space-y-1">
              <p className="font-semibold">Storms: {formData.stormLevel}</p>
              {formData.stormNotes && <p className="text-sm">{formData.stormNotes}</p>}
            </div>
          )}
          
          {formData.malariaLevel && (
            <div className="space-y-1">
              <p className="font-semibold">Malaria Outbreaks: {formData.malariaLevel}</p>
              {formData.malariaNotes && <p className="text-sm">{formData.malariaNotes}</p>}
            </div>
          )}
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Community Resilience</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {formData.healthcareStatus && (
            <div className="space-y-1">
              <p className="font-semibold">Healthcare Access: {formData.healthcareStatus}</p>
              {formData.healthcareNotes && <p className="text-sm">{formData.healthcareNotes}</p>}
            </div>
          )}
          
          {formData.waterStatus && (
            <div className="space-y-1">
              <p className="font-semibold">Water Sources: {formData.waterStatus}</p>
              {formData.waterNotes && <p className="text-sm">{formData.waterNotes}</p>}
            </div>
          )}
          
          {formData.schoolStatus && (
            <div className="space-y-1">
              <p className="font-semibold">School Safety: {formData.schoolStatus}</p>
              {formData.schoolNotes && <p className="text-sm">{formData.schoolNotes}</p>}
            </div>
          )}
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Other Issues</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {formData.desertificationNotes && (
            <div className="space-y-1">
              <p className="font-semibold">Desertification</p>
              <p className="text-sm">{formData.desertificationNotes}</p>
            </div>
          )}
          
          {formData.meningitisNotes && (
            <div className="space-y-1">
              <p className="font-semibold">Meningitis Outbreaks</p>
              <p className="text-sm">{formData.meningitisNotes}</p>
            </div>
          )}
          
          {formData.foodSecurityNotes && (
            <div className="space-y-1">
              <p className="font-semibold">Food Security</p>
              <p className="text-sm">{formData.foodSecurityNotes}</p>
            </div>
          )}
        </CardContent>
      </Card>
      
      <div className="flex flex-col gap-4 mt-6">
        <h3 className="font-semibold">Share Your Report</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Button onClick={shareViaWhatsApp} className="bg-green-600 hover:bg-green-700">
            Share via WhatsApp
          </Button>
          <Button onClick={shareViaEmail} className="bg-blue-600 hover:bg-blue-700">
            Share via Email
          </Button>
          <Button onClick={printReport} className="bg-purple-600 hover:bg-purple-700">
            Print as PDF
          </Button>
        </div>
      </div>
      
      <div className="flex justify-between mt-6">
        <Button variant="outline" onClick={() => setCurrentSection("other")}>
          Back
        </Button>
        <Button onClick={handleSubmit} className="bg-green-600 hover:bg-green-700">
          Submit Report
        </Button>
      </div>
    </div>
  );

return (
    <div className="min-h-screen bg-gradient-to-b from-green-50 to-purple-50 p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <header className="mb-8 text-center">
          <h1 className="text-3xl font-bold text-green-800">CLIMEGUARD</h1>
          <p className="text-purple-700">Protecting Children from Climate Dangers in Africa</p>
        </header>
        
        <Card className="w-full">
          <CardHeader>
            <CardTitle className="text-center">
              {currentSection === "user" && "Reporter Information"}
              {currentSection === "hazards" && "Climate Hazard Reporting"}
              {currentSection === "resilience" && "Community Resilience Reporting"}
              {currentSection === "other" && "Other Climate Issues"}
              {currentSection === "review" && "Review Your Report"}
            </CardTitle>
            <CardDescription className="text-center">
              {currentSection === "user" && "Please provide your details and information about the hazard"}
              {currentSection === "hazards" && "Report on climate hazards affecting your community"}
              {currentSection === "resilience" && "Report on community resilience factors"}
              {currentSection === "other" && "Report on other climate-related issues"}
              {currentSection === "review" && "Verify your information before submitting"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {currentSection === "user" && renderUserSection()}
            {currentSection === "hazards" && renderHazardsSection()}
            {currentSection === "resilience" && renderResilienceSection()}
            {currentSection === "other" && renderOtherSection()}
            {currentSection === "review" && renderReviewSection()}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}</article></body></html>