import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Trash2 } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/announcements")({ component: AnnouncementsAdmin });

type Ann = { id: string; title: string; body: string; is_active: boolean; created_at: string };

function AnnouncementsAdmin() {
  const [rows, setRows] = useState<Ann[]>([]);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const load = async () => {
    const { data, error } = await supabase.from("announcements").select("*").order("created_at", { ascending: false });
    if (error) toast.error(error.message);
    else setRows((data ?? []) as Ann[]);
  };
  useEffect(() => { load(); }, []);

  const create = async () => {
    if (!title.trim() || !body.trim()) return;
    const { error } = await supabase.from("announcements").insert({ title: title.trim(), body: body.trim() });
    if (error) return toast.error(error.message);
    setTitle(""); setBody("");
    toast.success("Posted");
    load();
  };

  const toggle = async (a: Ann) => {
    const { error } = await supabase.from("announcements").update({ is_active: !a.is_active }).eq("id", a.id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.map((r) => (r.id === a.id ? { ...r, is_active: !a.is_active } : r)));
  };

  const remove = async (a: Ann) => {
    if (!confirm("Delete announcement?")) return;
    const { error } = await supabase.from("announcements").delete().eq("id", a.id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.filter((r) => r.id !== a.id));
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Announcements</h1>
        <p className="text-sm text-muted-foreground">Post updates and news for customers.</p>
      </div>
      <Card className="glass">
        <CardHeader><CardTitle>New announcement</CardTitle></CardHeader>
        <CardContent className="space-y-3">
          <Input placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
          <Textarea placeholder="Body" rows={3} value={body} onChange={(e) => setBody(e.target.value)} />
          <Button onClick={create}>Post</Button>
        </CardContent>
      </Card>
      <div className="grid gap-3">
        {rows.map((a) => (
          <Card key={a.id} className="glass">
            <CardContent className="flex items-start justify-between gap-4 p-4">
              <div className="min-w-0">
                <div className="font-semibold">{a.title}</div>
                <p className="text-sm text-muted-foreground">{a.body}</p>
                <div className="mt-1 text-xs text-muted-foreground">{new Date(a.created_at).toLocaleString()}</div>
              </div>
              <div className="flex items-center gap-2">
                <Switch checked={a.is_active} onCheckedChange={() => toggle(a)} />
                <Button variant="ghost" size="icon" onClick={() => remove(a)}>
                  <Trash2 className="h-4 w-4 text-destructive" />
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}