EpicNext-Cms/src/app/admin/banners/banners-manager.tsx

"use client";

import { Pencil, Plus, Trash2 } from "lucide-react";
import { useState } from "react";
import { createBanner, deleteBanner, updateBanner } from "@/actions/banners";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { useServerAction } from "@/hooks/use-server-action";

interface Banner {
  id: number;
  title: string;
  subtitle: string;
  image: string;
  link: string;
  color: string;
  isActive: number;
  sortOrder: number;
  startDate: string | null;
  endDate: string | null;
}

interface Props {
  banners: Banner[];
}

export function BannersManager({ banners }: Props) {
  const { run, isPending } = useServerAction();
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [form, setForm] = useState({
    title: "",
    subtitle: "",
    image: "",
    link: "",
    color: "",
    isActive: 1,
    sortOrder: 0,
    startDate: "" as string | null,
    endDate: "" as string | null,
  });

  function resetForm() {
    setForm({
      title: "",
      subtitle: "",
      image: "",
      link: "",
      color: "",
      isActive: 1,
      sortOrder: 0,
      startDate: "",
      endDate: "",
    });
    setEditingId(null);
    setShowForm(false);
  }

  function handleEdit(b: Banner) {
    setForm({
      title: b.title,
      subtitle: b.subtitle,
      image: b.image,
      link: b.link,
      color: b.color,
      isActive: b.isActive,
      sortOrder: b.sortOrder,
      startDate: b.startDate,
      endDate: b.endDate,
    });
    setEditingId(b.id);
    setShowForm(true);
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const data = { ...form, startDate: form.startDate || null, endDate: form.endDate || null };
    if (editingId) {
      run(() => updateBanner({ id: editingId, ...data }), { successMessage: "Banner updated!" });
    } else {
      run(() => createBanner(data), { successMessage: "Banner created!" });
    }
    resetForm();
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button
          onClick={() => {
            resetForm();
            setShowForm(!showForm);
          }}
        >
          <Plus className="h-4 w-4 mr-2" /> New Banner
        </Button>
      </div>

      {showForm && (
        <Card>
          <CardHeader>
            <CardTitle>{editingId ? "Edit Banner" : "New Banner"}</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Title</Label>
                  <Input
                    value={form.title}
                    onChange={(e) => setForm({ ...form, title: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label>Subtitle</Label>
                  <Input
                    value={form.subtitle}
                    onChange={(e) => setForm({ ...form, subtitle: e.target.value })}
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Image URL</Label>
                  <Input
                    value={form.image}
                    onChange={(e) => setForm({ ...form, image: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label>Link URL</Label>
                  <Input value={form.link} onChange={(e) => setForm({ ...form, link: e.target.value })} />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label>Color</Label>
                  <Input
                    type="color"
                    value={form.color || "#000000"}
                    onChange={(e) => setForm({ ...form, color: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Start Date</Label>
                  <DateTimePicker
                    value={form.startDate}
                    onChange={(d) => setForm({ ...form, startDate: d ? d.toISOString() : null })}
                    placeholder="Select start date"
                  />
                </div>
                <div className="space-y-2">
                  <Label>End Date</Label>
                  <DateTimePicker
                    value={form.endDate}
                    onChange={(d) => setForm({ ...form, endDate: d ? d.toISOString() : null })}
                    placeholder="Select end date"
                  />
                </div>
              </div>
              <div className="flex gap-6">
                <div className="flex items-center gap-2">
                  <Switch
                    checked={form.isActive === 1}
                    onCheckedChange={(v) => setForm({ ...form, isActive: v ? 1 : 0 })}
                  />
                  <Label>Active</Label>
                </div>
                <div className="space-y-2 flex items-center gap-2">
                  <Label>Order</Label>
                  <Input
                    type="number"
                    className="w-20"
                    value={form.sortOrder}
                    onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })}
                  />
                </div>
              </div>
              <div className="flex gap-2 justify-end">
                <Button type="button" variant="outline" onClick={resetForm}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isPending}>
                  {editingId ? "Update" : "Create"}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {banners.length === 0 && (
          <p className="text-muted-foreground col-span-full text-center py-8">No banners yet.</p>
        )}
        {banners.map((b) => (
          <Card key={b.id} className="overflow-hidden">
            {b.image && (
              <div className="h-32 bg-cover bg-center" style={{ backgroundImage: `url(${b.image})` }} />
            )}
            <CardContent className="p-4">
              <div className="flex items-start justify-between">
                <div>
                  <h3 className="font-medium">{b.title}</h3>
                  {b.subtitle && <p className="text-xs text-muted-foreground">{b.subtitle}</p>}
                  <div className="flex gap-1 mt-2">
                    <Badge variant={b.isActive ? "default" : "outline"}>
                      {b.isActive ? "Active" : "Inactive"}
                    </Badge>
                    {b.startDate && <Badge variant="secondary">Scheduled</Badge>}
                  </div>
                </div>
                <div className="flex gap-1">
                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleEdit(b)}>
                    <Pencil className="h-3.5 w-3.5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-7 w-7"
                    onClick={() =>
                      run(() => deleteBanner({ id: b.id }), { successMessage: "Banner deleted" })
                    }
                  >
                    <Trash2 className="h-3.5 w-3.5 text-destructive" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}