import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter
} from "@/components/ui/dialog";
import {
  Plus, ThumbsUp, MessageSquare, TrendingUp, Clock, Bug, Lightbulb, Wrench, ArrowUpDown, LogIn, LogOut
} from "lucide-react";
import { toast } from "sonner";
import { useAuth, useSaasMutation } from "@/hooks/use-tygarun";
import Sidebar from "@/components/Sidebar";
import Header from "@/components/Header";

interface FeedbackItem {
  id: number;
  user: string;
  userInitials: string;
  userColor: string;
  text: string;
  category: string;
  categoryColor: string;
  categoryIcon: string;
  votes: number;
  status: string;
  statusColor: string;
  date: string;
  comments: number;
}

const feedbackData: FeedbackItem[] = [
  { id: 1, user: "Elena Martinez", userInitials: "EM", userColor: "bg-blue-500", text: "The roadmap board needs a timeline view option. It would be so much easier to visualize dependencies and deadlines in a Gantt-style layout.", category: "Feature", categoryColor: "bg-blue-100 text-blue-700", categoryIcon: "lightbulb", votes: 34, status: "Under Review", statusColor: "bg-amber-100 text-amber-700", date: "Apr 10, 2026", comments: 8 },
  { id: 2, user: "James Chen", userInitials: "JC", userColor: "bg-emerald-500", text: "Exporting reports to PDF cuts off long feature descriptions. The page margins seem too wide and text wraps incorrectly in the generated document.", category: "Bug", categoryColor: "bg-red-100 text-red-700", categoryIcon: "bug", votes: 28, status: "In Progress", statusColor: "bg-blue-100 text-blue-700", date: "Apr 9, 2026", comments: 5 },
  { id: 3, user: "Taylor Pham", userInitials: "TP", userColor: "bg-violet-500", text: "Would love the ability to link related feedback items together. Sometimes multiple users report the same issue in different ways.", category: "Feature", categoryColor: "bg-blue-100 text-blue-700", categoryIcon: "lightbulb", votes: 45, status: "Planned", statusColor: "bg-slate-100 text-slate-700", date: "Apr 8, 2026", comments: 12 },
  { id: 4, user: "Lisa Wang", userInitials: "LW", userColor: "bg-sky-500", text: "The notification emails could include more context. Right now they just say a feature was updated but not what changed specifically.", category: "Improvement", categoryColor: "bg-amber-100 text-amber-700", categoryIcon: "wrench", votes: 19, status: "Under Review", statusColor: "bg-amber-100 text-amber-700", date: "Apr 7, 2026", comments: 3 },
  { id: 5, user: "David Park", userInitials: "DP", userColor: "bg-indigo-500", text: "Dashboard widgets sometimes show stale data after switching between views. A manual refresh button or auto-refresh interval would fix this.", category: "Bug", categoryColor: "bg-red-100 text-red-700", categoryIcon: "bug", votes: 22, status: "In Progress", statusColor: "bg-blue-100 text-blue-700", date: "Apr 6, 2026", comments: 6 },
  { id: 6, user: "Amy Foster", userInitials: "AF", userColor: "bg-pink-500", text: "It would be great if the feature voting page had a search and filter option. With hundreds of features, scrolling through all of them is tedious.", category: "Improvement", categoryColor: "bg-amber-100 text-amber-700", categoryIcon: "wrench", votes: 37, status: "Planned", statusColor: "bg-slate-100 text-slate-700", date: "Apr 5, 2026", comments: 9 },
];

const categoryIcons: Record<string, React.ElementType> = {
  bug: Bug,
  lightbulb: Lightbulb,
  wrench: Wrench,
};

export default function FeedbackPage() {
  const [sortBy, setSortBy] = useState<"votes" | "newest" | "trending">("votes");
  const [dialogOpen, setDialogOpen] = useState(false);
  const [items, setItems] = useState(feedbackData);
  const [fbTitle, setFbTitle] = useState("");
  const [fbDesc, setFbDesc] = useState("");
  const [fbCategory, setFbCategory] = useState("feature");

  // Login is LIVE via tyga.run auth; voting + feedback submission use surveys (seed until live)
  const { user, isSignedIn, signin, signout } = useAuth();
  const { mutate: submitFeedback } = useSaasMutation("surveys", "/responses");
  const { mutate: castVote } = useSaasMutation("surveys", "/responses");

  const [authOpen, setAuthOpen] = useState(false);
  const [authEmail, setAuthEmail] = useState("");
  const [authPassword, setAuthPassword] = useState("");
  const [authBusy, setAuthBusy] = useState(false);

  const handleSignin = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthBusy(true);
    try {
      await signin(authEmail, authPassword);
      toast.success("Signed in! Your votes now count.");
      setAuthOpen(false);
      setAuthEmail("");
      setAuthPassword("");
    } catch (err) {
      toast.error("Sign in failed. Check your credentials.");
    } finally {
      setAuthBusy(false);
    }
  };

  const handleVote = async (id: number) => {
    if (!isSignedIn) { setAuthOpen(true); toast("Sign in to vote"); return; }
    setItems(prev => prev.map(item => item.id === id ? { ...item, votes: item.votes + 1 } : item));
    try {
      await castVote({ feedbackId: id, type: "upvote" });
      toast("Vote recorded!");
    } catch (err) {
      toast.error("Could not record vote.");
    }
  };

  const handleSubmit = async () => {
    if (!isSignedIn) { setAuthOpen(true); toast("Sign in to submit feedback"); return; }
    try {
      await submitFeedback({ title: fbTitle, description: fbDesc, category: fbCategory });
      toast.success("Feedback submitted successfully!");
      setDialogOpen(false);
      setFbTitle("");
      setFbDesc("");
      setFbCategory("feature");
    } catch (err) {
      toast.error("Could not submit feedback.");
    }
  };

  const sorted = [...items].sort((a, b) => {
    if (sortBy === "votes") return b.votes - a.votes;
    if (sortBy === "newest") return new Date(b.date).getTime() - new Date(a.date).getTime();
    return (b.votes + b.comments * 2) - (a.votes + a.comments * 2);
  });

  return (
    <div className="flex min-h-screen bg-slate-50">
      <Sidebar activePath="/feedback" />
      <div className="flex-1 lg:ml-64">
        <Header />
        <main className="p-6 space-y-6">
          {/* ── Page Header ── */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Feedback</h1>
              <p className="text-slate-500 mt-1">Collect and prioritize user feedback</p>
            </div>
            <div className="flex items-center gap-3">
              {/* Auth control — login is LIVE via tyga.run */}
              {isSignedIn ? (
                <Button variant="outline" size="sm" onClick={() => { signout(); toast("Signed out"); }}>
                  <LogOut className="mr-2 h-4 w-4" /> {user?.email || "Sign out"}
                </Button>
              ) : (
                <Dialog open={authOpen} onOpenChange={setAuthOpen}>
                  <DialogTrigger asChild>
                    <Button variant="outline" size="sm">
                      <LogIn className="mr-2 h-4 w-4" /> Sign in
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="sm:max-w-[400px]">
                    <DialogHeader>
                      <DialogTitle>Sign in to vote</DialogTitle>
                    </DialogHeader>
                    <form onSubmit={handleSignin} className="space-y-4 py-2">
                      <div className="space-y-2">
                        <Label htmlFor="auth-email">Email</Label>
                        <Input id="auth-email" type="email" value={authEmail} onChange={(e) => setAuthEmail(e.target.value)} placeholder="you@company.com" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="auth-password">Password</Label>
                        <Input id="auth-password" type="password" value={authPassword} onChange={(e) => setAuthPassword(e.target.value)} placeholder="Password" required />
                      </div>
                      <Button type="submit" disabled={authBusy} className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                        {authBusy ? "Signing in..." : "Sign in"}
                      </Button>
                    </form>
                  </DialogContent>
                </Dialog>
              )}

              {/* Sort Options */}
              <div className="flex items-center border rounded-lg overflow-hidden bg-white">
                {(["votes", "newest", "trending"] as const).map((option) => (
                  <Button
                    key={option}
                    variant={sortBy === option ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setSortBy(option)}
                    className={`rounded-none text-xs capitalize ${sortBy === option ? "bg-blue-600 hover:bg-blue-700 text-white" : ""}`}
                  >
                    {option === "votes" && <ThumbsUp className="mr-1 h-3 w-3" />}
                    {option === "newest" && <Clock className="mr-1 h-3 w-3" />}
                    {option === "trending" && <TrendingUp className="mr-1 h-3 w-3" />}
                    {option}
                  </Button>
                ))}
              </div>

              {/* Submit Feedback Dialog */}
              <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                <DialogTrigger asChild>
                  <Button className="bg-blue-600 hover:bg-blue-700 text-white">
                    <Plus className="mr-2 h-4 w-4" /> Submit Feedback
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[500px]">
                  <DialogHeader>
                    <DialogTitle>Submit Feedback</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4 py-4">
                    <div className="space-y-2">
                      <Label htmlFor="fb-title">Title</Label>
                      <Input id="fb-title" value={fbTitle} onChange={(e) => setFbTitle(e.target.value)} placeholder="Brief summary of your feedback" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="fb-desc">Description</Label>
                      <Textarea id="fb-desc" value={fbDesc} onChange={(e) => setFbDesc(e.target.value)} placeholder="Describe your feedback in detail..." className="min-h-[120px]" />
                    </div>
                    <div className="space-y-2">
                      <Label>Category</Label>
                      <Select value={fbCategory} onValueChange={setFbCategory}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select category" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="feature">Feature Request</SelectItem>
                          <SelectItem value="bug">Bug Report</SelectItem>
                          <SelectItem value="improvement">Improvement</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
                    <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleSubmit}>Submit</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>

          {/* ── Feedback Cards ── */}
          <div className="space-y-4 stagger">
            {sorted.map((item) => {
              const IconComponent = categoryIcons[item.categoryIcon];
              return (
                <Card key={item.id} className="border-0 shadow-sm backdrop-blur-sm bg-card/80 border-border/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                  <CardContent className="p-6">
                    <div className="flex gap-4">
                      {/* Vote Column */}
                      <div className="flex flex-col items-center gap-1 shrink-0">
                        <button
                          onClick={() => handleVote(item.id)}
                          className="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-blue-50 transition-colors group"
                        >
                          <ThumbsUp className="h-5 w-5 text-slate-400 group-hover:text-blue-600 transition-colors" />
                          <span className="text-sm font-bold text-slate-700">{item.votes}</span>
                        </button>
                      </div>

                      {/* Content */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-start justify-between gap-3 mb-2">
                          <div className="flex items-center gap-3">
                            <Avatar className="h-8 w-8">
                              <AvatarFallback className={`text-xs text-white ${item.userColor}`}>{item.userInitials}</AvatarFallback>
                            </Avatar>
                            <div>
                              <p className="text-sm font-medium text-slate-900">{item.user}</p>
                              <p className="text-xs text-slate-400">{item.date}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge className={`${item.categoryColor} text-xs font-medium border-0 flex items-center gap-1`}>
                              {IconComponent && <IconComponent className="h-3 w-3" />}
                              {item.category}
                            </Badge>
                            <Badge className={`${item.statusColor} text-xs font-medium border-0`}>{item.status}</Badge>
                          </div>
                        </div>
                        <p className="text-sm text-slate-600 leading-relaxed">{item.text}</p>
                        <div className="flex items-center gap-4 mt-3">
                          <button className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-blue-600 transition-colors">
                            <MessageSquare className="h-3.5 w-3.5" />
                            {item.comments} comments
                          </button>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </main>
      </div>
    </div>
  );
}