import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { AppLayout } from "@/components/AppLayout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "@/hooks/use-toast";
import { Star, Check, X, Edit, Trash2 } from "lucide-react";

interface Review {
  id: string;
  user_id: string;
  product_id: string | null;
  type: string;
  rating: number;
  title: string;
  body: string;
  is_approved: boolean;
  created_at: string;
  profiles: { full_name: string | null; email: string | null } | null;
  products: { title: string } | null;
}

export default function AdminReviews() {
  const [reviews, setReviews] = useState<Review[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState({ type: "all", status: "all" });
  const [editReview, setEditReview] = useState<Review | null>(null);
  const [editForm, setEditForm] = useState({ title: "", body: "" });

  useEffect(() => {
    fetchReviews();
  }, []);

  const fetchReviews = async () => {
    setLoading(true);
    const { data, error } = await supabase
      .from("reviews")
      .select(`
        *,
        profiles (full_name, email),
        products (title)
      `)
      .order("created_at", { ascending: false });

    if (error) {
      console.error("Fetch reviews error:", error);
      toast({ title: "Error", description: "Gagal mengambil data ulasan", variant: "destructive" });
      setReviews([]);
    } else {
      setReviews((data as unknown as Review[]) || []);
    }
    setLoading(false);
  };

  const handleApprove = async (id: string, approved: boolean) => {
    const { error } = await supabase
      .from("reviews")
      .update({ is_approved: approved })
      .eq("id", id);

    if (error) {
      toast({ title: "Error", description: "Gagal mengubah status", variant: "destructive" });
    } else {
      toast({ title: "Berhasil", description: approved ? "Ulasan disetujui" : "Ulasan ditolak" });
      fetchReviews();
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Hapus ulasan ini?")) return;

    const { error } = await supabase.from("reviews").delete().eq("id", id);

    if (error) {
      toast({ title: "Error", description: "Gagal menghapus", variant: "destructive" });
    } else {
      toast({ title: "Berhasil", description: "Ulasan dihapus" });
      fetchReviews();
    }
  };

  const handleEdit = (review: Review) => {
    setEditReview(review);
    setEditForm({ title: review.title, body: review.body });
  };

  const handleSaveEdit = async () => {
    if (!editReview) return;

    const { error } = await supabase
      .from("reviews")
      .update({ title: editForm.title, body: editForm.body })
      .eq("id", editReview.id);

    if (error) {
      toast({ title: "Error", description: "Gagal menyimpan", variant: "destructive" });
    } else {
      toast({ title: "Berhasil", description: "Ulasan diperbarui" });
      setEditReview(null);
      fetchReviews();
    }
  };

  const filteredReviews = reviews.filter((r) => {
    if (filter.type !== "all" && r.type !== filter.type) return false;
    if (filter.status === "approved" && !r.is_approved) return false;
    if (filter.status === "pending" && r.is_approved) return false;
    return true;
  });

  const pendingReviews = reviews.filter((r) => !r.is_approved);

  const renderStars = (rating: number) => (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((i) => (
        <Star
          key={i}
          className={`w-4 h-4 ${i <= rating ? "fill-primary text-primary" : "text-muted-foreground"}`}
        />
      ))}
    </div>
  );

  const getTypeLabel = (type: string) => {
    switch (type) {
      case "consulting": return "Konsultasi";
      case "bootcamp": return "Bootcamp";
      case "webinar": return "Webinar";
      case "general": return "Umum";
      default: return type;
    }
  };

  if (loading) {
    return (
      <AppLayout>
        <div className="container mx-auto px-4 py-8">
          <Skeleton className="h-10 w-48 mb-4" />
          <Skeleton className="h-6 w-64 mb-8" />
          <div className="space-y-4">
            {[...Array(3)].map((_, i) => (
              <Skeleton key={i} className="h-32 w-full" />
            ))}
          </div>
        </div>
      </AppLayout>
    );
  }

  return (
    <AppLayout>
      <div className="container mx-auto px-4 py-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold">Ulasan</h1>
          <p className="text-muted-foreground">Kelola ulasan dari member</p>
        </div>

        <div className="flex gap-4 flex-wrap">
          <Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
            <SelectTrigger className="w-40 border-2">
              <SelectValue placeholder="Tipe" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Semua Tipe</SelectItem>
              <SelectItem value="consulting">Konsultasi</SelectItem>
              <SelectItem value="bootcamp">Bootcamp</SelectItem>
              <SelectItem value="webinar">Webinar</SelectItem>
              <SelectItem value="general">Umum</SelectItem>
            </SelectContent>
          </Select>

          <Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
            <SelectTrigger className="w-40 border-2">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Semua Status</SelectItem>
              <SelectItem value="pending">Menunggu</SelectItem>
              <SelectItem value="approved">Disetujui</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <Tabs defaultValue="list">
          <TabsList>
            <TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
            <TabsTrigger value="pending">
              Menunggu ({pendingReviews.length})
            </TabsTrigger>
          </TabsList>

          <TabsContent value="list" className="mt-4">
            <div className="space-y-4">
              {filteredReviews.length === 0 ? (
                <Card className="border-2 border-border">
                  <CardContent className="py-12 text-center">
                    <Star className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                    <h3 className="text-lg font-semibold mb-2">Belum ada ulasan</h3>
                    <p className="text-muted-foreground">
                      Ulasan dari member akan muncul di sini setelah mereka mengirimkan ulasan.
                    </p>
                  </CardContent>
                </Card>
              ) : (
                filteredReviews.map((review) => (
                  <Card key={review.id} className="border-2 border-border">
                    <CardContent className="py-4">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1 space-y-2">
                          <div className="flex items-center gap-2 flex-wrap">
                            {renderStars(review.rating)}
                            <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
                            <Badge className={review.is_approved ? "bg-accent" : "bg-secondary"}>
                              {review.is_approved ? "Disetujui" : "Menunggu"}
                            </Badge>
                          </div>
                          <h3 className="font-bold">{review.title}</h3>
                          {review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
                          <div className="text-xs text-muted-foreground">
                            <span>{review.profiles?.full_name || review.profiles?.email || "Unknown"}</span>
                            {review.products && <span> • {review.products.title}</span>}
                            <span> • {new Date(review.created_at).toLocaleDateString("id-ID")}</span>
                          </div>
                        </div>
                        <div className="flex gap-2 flex-shrink-0">
                          {!review.is_approved && (
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-2"
                              onClick={() => handleApprove(review.id, true)}
                            >
                              <Check className="w-4 h-4" />
                            </Button>
                          )}
                          {review.is_approved && (
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-2"
                              onClick={() => handleApprove(review.id, false)}
                            >
                              <X className="w-4 h-4" />
                            </Button>
                          )}
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-2"
                            onClick={() => handleEdit(review)}
                          >
                            <Edit className="w-4 h-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-2 text-destructive hover:text-destructive"
                            onClick={() => handleDelete(review.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </TabsContent>

          <TabsContent value="pending" className="mt-4">
            <div className="space-y-4">
              {pendingReviews.length === 0 ? (
                <Card className="border-2 border-border">
                  <CardContent className="py-12 text-center">
                    <Check className="w-12 h-12 mx-auto mb-4 text-accent" />
                    <h3 className="text-lg font-semibold mb-2">Semua ulasan sudah dimoderasi</h3>
                    <p className="text-muted-foreground">
                      Tidak ada ulasan yang menunggu persetujuan.
                    </p>
                  </CardContent>
                </Card>
              ) : (
                pendingReviews.map((review) => (
                  <Card key={review.id} className="border-2 border-primary/20">
                    <CardContent className="py-4">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1 space-y-2">
                          <div className="flex items-center gap-2">
                            {renderStars(review.rating)}
                            <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
                          </div>
                          <h3 className="font-bold">{review.title}</h3>
                          {review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
                          <div className="text-xs text-muted-foreground">
                            {review.profiles?.full_name || review.profiles?.email}
                            {review.products && <span> • {review.products.title}</span>}
                          </div>
                        </div>
                        <div className="flex gap-2 flex-shrink-0">
                          <Button size="sm" onClick={() => handleApprove(review.id, true)}>
                            <Check className="w-4 h-4 mr-1" /> Setujui
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-2 text-destructive"
                            onClick={() => handleDelete(review.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </TabsContent>
        </Tabs>

        <Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Edit Ulasan</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Judul</label>
                <Input
                  value={editForm.title}
                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
                  className="border-2"
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Isi</label>
                <Textarea
                  value={editForm.body}
                  onChange={(e) => setEditForm({ ...editForm, body: e.target.value })}
                  className="border-2 min-h-[100px]"
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setEditReview(null)}>
                Batal
              </Button>
              <Button onClick={handleSaveEdit}>Simpan</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </AppLayout>
  );
}