import React, { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { MessageSquare, Leaf, Megaphone, PencilLine, ThumbsUp, Users, Calendar, Search } from "lucide-react";

// --- Mock Data Types
const seededArticles = [
  { id: 1, title: "Cities that banned single-use plastics in 2025", author: "M. Popescu", excerpt: "Policy shifts from Cluj to Porto are reshaping urban waste.", tags: ["policy", "waste"], date: "2025-07-10" },
  { id: 2, title: "Community solar: how co-ops cut bills by 30%", author: "A. Ruiz", excerpt: "A practical blueprint for neighborhood arrays.", tags: ["energy", "community"], date: "2025-06-28" },
  { id: 3, title: "River guardians: citizen science that works", author: "K. Ionescu", excerpt: "From nitrate testing to legal wins.", tags: ["water", "science"], date: "2025-05-14" },
];

const seededPetitions = [
  { id: 1, title: "Protect the Valea Morilor wetlands", goal: 5000, signed: 1380, owner: "GreenAction Chisinau", summary: "Stop the infill plan and designate the wetlands as a protected urban reserve.", tags: ["biodiversity", "urban"], created: "2025-07-02" },
  { id: 2, title: "Make Bucharest a 30 km/h city", goal: 20000, signed: 11940, owner: "Streets for People", summary: "Save lives, cut noise, and slash emissions with a citywide speed limit.", tags: ["transport", "health"], created: "2025-06-21" },
  { id: 3, title: "No LNG terminal at Constanța", goal: 10000, signed: 8450, owner: "Black Sea Watch", summary: "Invest in offshore wind and grid upgrades instead of fossil lock-in.", tags: ["energy", "climate"], created: "2025-05-30" },
];

const seededThreads = [
  { id: 1, title: "Anyone mapping heat islands in Sector 6?", author: "daria", upvotes: 23, replies: 12, tags: ["mapping", "heat"], last: "2h" },
  { id: 2, title: "How to start a repair café?", author: "andrei", upvotes: 41, replies: 33, tags: ["repair", "community"], last: "5h" },
  { id: 3, title: "Grant tips for citizen science kits", author: "sara", upvotes: 9, replies: 4, tags: ["funding", "science"], last: "1d" },
];

function Stat({ icon: Icon, label, value }: { icon: any; label: string; value: string | number }) {
  return (
    <Card className="rounded-2xl">
      <CardContent className="p-4 flex items-center gap-3">
        <div className="p-3 rounded-2xl bg-muted"><Icon className="w-5 h-5" /></div>
        <div>
          <div className="text-2xl font-bold leading-none">{value}</div>
          <div className="text-sm text-muted-foreground">{label}</div>
        </div>
      </CardContent>
    </Card>
  );
}

function ProgressBar({ current, goal }: { current: number; goal: number }) {
  const pct = Math.max(0, Math.min(100, Math.round((current / goal) * 100)));
  return (
    <div className="w-full">
      <div className="h-2 w-full rounded-full bg-muted" aria-hidden />
      <div className="-mt-2 h-2 rounded-full" style={{ width: `${pct}%` }} aria-valuemin={0} aria-valuemax={goal} aria-valuenow={current} role="progressbar" />
      <div className="mt-2 text-xs text-muted-foreground">{pct}% to goal</div>
    </div>
  );
}

export default function EcoCommunitySite() {
  const [articles, setArticles] = useState(seededArticles);
  const [petitions, setPetitions] = useState(seededPetitions);
  const [threads, setThreads] = useState(seededThreads);
  const [query, setQuery] = useState("");

  const filteredArticles = useMemo(() => articles.filter(a => a.title.toLowerCase().includes(query.toLowerCase())), [articles, query]);
  const filteredPetitions = useMemo(() => petitions.filter(p => p.title.toLowerCase().includes(query.toLowerCase())), [petitions, query]);
  const filteredThreads = useMemo(() => threads.filter(t => t.title.toLowerCase().includes(query.toLowerCase())), [threads, query]);

  // New Petition state
  const [openNewPetition, setOpenNewPetition] = useState(false);
  const [petitionDraft, setPetitionDraft] = useState({ title: "", goal: 1000, summary: "", owner: "" });

  // New Thread state
  const [openNewThread, setOpenNewThread] = useState(false);
  const [threadDraft, setThreadDraft] = useState({ title: "", tags: "" });

  // Auth mock
  const [user, setUser] = useState<{ name: string } | null>({ name: "Guest" });

  function signPetition(id: number) {
    setPetitions(prev => prev.map(p => (p.id === id ? { ...p, signed: Math.min(p.goal, p.signed + 1) } : p)));
  }

  function createPetition() {
    if (!petitionDraft.title.trim() || !petitionDraft.owner.trim()) return;
    const newP = {
      id: petitions.length + 1,
      title: petitionDraft.title,
      goal: Math.max(100, petitionDraft.goal || 1000),
      signed: 0,
      owner: petitionDraft.owner,
      summary: petitionDraft.summary || "",
      tags: ["community"],
      created: new Date().toISOString().slice(0, 10),
    };
    setPetitions([newP, ...petitions]);
    setOpenNewPetition(false);
    setPetitionDraft({ title: "", goal: 1000, summary: "", owner: "" });
  }

  function createThread() {
    if (!threadDraft.title.trim()) return;
    const newT = {
      id: threads.length + 1,
      title: threadDraft.title,
      author: user?.name || "guest",
      upvotes: 0,
      replies: 0,
      tags: threadDraft.tags ? threadDraft.tags.split(",").map(t => t.trim()).filter(Boolean) : ["discussion"],
      last: "just now",
    } as any;
    setThreads([newT, ...threads]);
    setOpenNewThread(false);
    setThreadDraft({ title: "", tags: "" });
  }

  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Header */}
      <header className="sticky top-0 z-50 backdrop-blur bg-background/70 border-b">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-2xl bg-green-100 dark:bg-green-900/30"><Leaf className="w-5 h-5" /></div>
            <span className="font-bold text-xl">GreenAction</span>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <a href="#articles" className="hover:underline">Articles</a>
            <a href="#petitions" className="hover:underline">Petitions</a>
            <a href="#forum" className="hover:underline">Forum</a>
            <a href="#events" className="hover:underline">Events</a>
          </nav>
          <div className="flex items-center gap-2">
            <div className="relative hidden sm:block">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2" />
              <Input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search..." className="pl-9 w-48" />
            </div>
            <Dialog open={openNewPetition} onOpenChange={setOpenNewPetition}>
              <DialogTrigger asChild>
                <Button className="rounded-2xl"><Megaphone className="w-4 h-4 mr-2" />Start a Petition</Button>
              </DialogTrigger>
              <DialogContent className="rounded-2xl">
                <DialogHeader>
                  <DialogTitle>Start a Petition</DialogTitle>
                </DialogHeader>
                <div className="grid gap-3">
                  <div className="grid gap-1">
                    <Label htmlFor="ptitle">Title</Label>
                    <Input id="ptitle" value={petitionDraft.title} onChange={e => setPetitionDraft({ ...petitionDraft, title: e.target.value })} />
                  </div>
                  <div className="grid gap-1">
                    <Label htmlFor="powner">Organizer</Label>
                    <Input id="powner" value={petitionDraft.owner} onChange={e => setPetitionDraft({ ...petitionDraft, owner: e.target.value })} />
                  </div>
                  <div className="grid gap-1">
                    <Label htmlFor="pgoal">Signature goal</Label>
                    <Input id="pgoal" type="number" value={petitionDraft.goal} onChange={e => setPetitionDraft({ ...petitionDraft, goal: Number(e.target.value) })} />
                  </div>
                  <div className="grid gap-1">
                    <Label htmlFor="psummary">Summary</Label>
                    <Textarea id="psummary" value={petitionDraft.summary} onChange={e => setPetitionDraft({ ...petitionDraft, summary: e.target.value })} rows={4} />
                  </div>
                </div>
                <DialogFooter>
                  <Button onClick={createPetition} className="rounded-2xl">Publish</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
            <Dialog open={openNewThread} onOpenChange={setOpenNewThread}>
              <DialogTrigger asChild>
                <Button variant="outline" className="rounded-2xl"><PencilLine className="w-4 h-4 mr-2" />New Post</Button>
              </DialogTrigger>
              <DialogContent className="rounded-2xl">
                <DialogHeader>
                  <DialogTitle>New Forum Topic</DialogTitle>
                </DialogHeader>
                <div className="grid gap-3">
                  <div className="grid gap-1">
                    <Label htmlFor="ftitle">Title</Label>
                    <Input id="ftitle" value={threadDraft.title} onChange={e => setThreadDraft({ ...threadDraft, title: e.target.value })} />
                  </div>
                  <div className="grid gap-1">
                    <Label htmlFor="ftags">Tags (comma-separated)</Label>
                    <Input id="ftags" value={threadDraft.tags} onChange={e => setThreadDraft({ ...threadDraft, tags: e.target.value })} />
                  </div>
                </div>
                <DialogFooter>
                  <Button onClick={createThread} className="rounded-2xl">Publish</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-6 items-start">
        <div className="md:col-span-2 p-6 rounded-2xl bg-muted">
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">People. Planet. Policy.\nTake action with GreenAction.</h1>
          <p className="mt-3 text-muted-foreground max-w-2xl">A magazine + community where investigations meet grassroots power. Publish articles, launch petitions, and organize in our forum.</p>
          <div className="mt-5 flex gap-3">
            <Button className="rounded-2xl"><Megaphone className="w-4 h-4 mr-2" />Start a Petition</Button>
            <Button variant="outline" className="rounded-2xl">Read Latest</Button>
          </div>
        </div>
        <div className="grid gap-3">
          <Stat icon={Users} label="Members" value="3,482" />
          <Stat icon={Megaphone} label="Active Petitions" value={petitions.length} />
          <Stat icon={MessageSquare} label="Forum Threads" value={threads.length} />
        </div>
      </section>

      <main className="max-w-6xl mx-auto px-4 pb-16">
        <Tabs defaultValue="articles" className="w-full">
          <TabsList className="rounded-2xl">
            <TabsTrigger value="articles" id="articles">Articles</TabsTrigger>
            <TabsTrigger value="petitions" id="petitions">Petitions</TabsTrigger>
            <TabsTrigger value="forum" id="forum">Forum</TabsTrigger>
            <TabsTrigger value="events" id="events">Events</TabsTrigger>
          </TabsList>

          {/* Articles */}
          <TabsContent value="articles" className="mt-6 grid md:grid-cols-3 gap-4">
            {filteredArticles.map(a => (
              <Card key={a.id} className="rounded-2xl">
                <CardHeader>
                  <CardTitle className="text-lg leading-tight">{a.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{a.excerpt}</p>
                  <div className="mt-3 flex flex-wrap gap-2">{a.tags.map(t => <Badge key={t} variant="secondary" className="rounded-xl">#{t}</Badge>)}</div>
                </CardContent>
                <CardFooter className="text-xs text-muted-foreground">By {a.author} • {new Date(a.date).toLocaleDateString()}</CardFooter>
              </Card>
            ))}
          </TabsContent>

          {/* Petitions */}
          <TabsContent value="petitions" className="mt-6 grid md:grid-cols-3 gap-4">
            {filteredPetitions.map(p => (
              <Card key={p.id} className="rounded-2xl flex flex-col">
                <CardHeader>
                  <CardTitle className="text-lg leading-tight">{p.title}</CardTitle>
                </CardHeader>
                <CardContent className="flex-1">
                  <p className="text-sm text-muted-foreground">{p.summary}</p>
                  <div className="mt-3 flex flex-wrap gap-2">{p.tags.map((t: string) => <Badge key={t} variant="outline" className="rounded-xl">#{t}</Badge>)}</div>
                  <div className="mt-4"><ProgressBar current={p.signed} goal={p.goal} /></div>
                </CardContent>
                <CardFooter className="flex items-center justify-between">
                  <div className="text-xs text-muted-foreground">By {p.owner}</div>
                  <div className="flex items-center gap-2">
                    <Button size="sm" className="rounded-xl" onClick={() => signPetition(p.id)}>
                      <ThumbsUp className="w-4 h-4 mr-1" /> Sign
                    </Button>
                    <Badge className="rounded-xl" variant="secondary">{p.signed.toLocaleString()}</Badge>
                  </div>
                </CardFooter>
              </Card>
            ))}
          </TabsContent>

          {/* Forum */}
          <TabsContent value="forum" className="mt-6 grid md:grid-cols-3 gap-4">
            {filteredThreads.map(t => (
              <Card key={t.id} className="rounded-2xl">
                <CardHeader className="flex flex-row items-start gap-3">
                  <Avatar className="h-8 w-8"><AvatarFallback>{t.author.slice(0,2).toUpperCase()}</AvatarFallback></Avatar>
                  <div className="flex-1">
                    <CardTitle className="text-base leading-tight">{t.title}</CardTitle>
                    <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
                      <Badge variant="secondary" className="rounded-xl">{t.upvotes} upvotes</Badge>
                      <Badge variant="outline" className="rounded-xl">{t.replies} replies</Badge>
                      <span>• {t.last}</span>
                    </div>
                    <div className="mt-2 flex flex-wrap gap-2">{t.tags.map((tg: string) => <Badge key={tg} variant="outline" className="rounded-xl">#{tg}</Badge>)}</div>
                  </div>
                </CardHeader>
                <CardFooter>
                  <div className="w-full flex items-center gap-2">
                    <Input placeholder="Quick reply…" className="rounded-xl" />
                    <Button size="sm" className="rounded-xl">Reply</Button>
                  </div>
                </CardFooter>
              </Card>
            ))}
          </TabsContent>

          {/* Events */}
          <TabsContent value="events" className="mt-6 grid md:grid-cols-2 gap-4">
            {[1,2,3].map(i => (
              <Card key={i} className="rounded-2xl">
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2"><Calendar className="w-4 h-4" /> Community Cleanup #{i}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">Meet at the riverside park entrance at 10:00. Bring gloves and water.</p>
                </CardContent>
                <CardFooter>
                  <Button className="rounded-xl">I’ll join</Button>
                </CardFooter>
              </Card>
            ))}
          </TabsContent>
        </Tabs>

        {/* Sidebar helpers */}
        <section className="mt-12 grid md:grid-cols-3 gap-6">
          <Card className="rounded-2xl md:col-span-2">
            <CardHeader>
              <CardTitle>About GreenAction</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">
              Our mission is to combine investigative journalism with community action. Publish stories, coordinate campaigns, and track wins—locally and globally.
            </CardContent>
          </Card>
          <Card className="rounded-2xl">
            <CardHeader>
              <CardTitle>Newsletter</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex gap-2">
                <Input placeholder="you@email" />
                <Button className="rounded-xl">Subscribe</Button>
              </div>
              <p className="text-xs text-muted-foreground mt-2">No spam. Unsubscribe anytime.</p>
            </CardContent>
          </Card>
        </section>
      </main>

      <footer className="border-t mt-12">
        <div className="max-w-6xl mx-auto px-4 py-8 grid md:grid-cols-3 gap-6 text-sm">
          <div>
            <div className="flex items-center gap-2 font-semibold"><Leaf className="w-4 h-4" /> GreenAction</div>
            <p className="text-muted-foreground mt-2">© {new Date().getFullYear()} GreenAction Cooperative. All rights reserved.</p>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <a className="hover:underline" href="#">About</a>
            <a className="hover:underline" href="#">Editorial Policy</a>
            <a className="hover:underline" href="#">Submit a Story</a>
            <a className="hover:underline" href="#">Press</a>
          </div>
          <div className="grid gap-2">
            <a className="hover:underline" href="#">Code of Conduct</a>
            <a className="hover:underline" href="#">Privacy</a>
            <a className="hover:underline" href="#">Imprint</a>
          </div>
        </div>
      </footer>
    </div>
  );
}