import { deleteBookingAction, updateBookingStatusAction } from "@/app/admin/actions";
import { Button } from "@/components/ui/button";
import { getAdminBookingsData } from "@/lib/admin-data";

export default async function AdminTestRidesPage() {
  const bookings = await getAdminBookingsData();

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">Test Rides</h1>
      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[900px] text-left text-sm">
          <thead className="bg-primary-soft"><tr><th className="px-4 py-3">Customer</th><th>Phone</th><th>Branch</th><th>Scooter</th><th>Date</th><th>Status</th><th>Quick Links</th><th>Action</th></tr></thead>
          <tbody>
            {bookings.length ? bookings.map((booking: any) => (
              <tr className="border-t border-border" key={booking.id}>
                <td className="px-4 py-3 font-bold">{booking.fullName}</td><td>{booking.phone}</td><td>{booking.branch?.city ?? "Any"}</td><td>{booking.scooter?.name ?? "Any"}</td><td>{booking.preferredDate ? new Date(booking.preferredDate).toLocaleDateString() : "-"}</td>
                <td><form action={updateBookingStatusAction} className="flex items-center gap-2"><input type="hidden" name="id" value={booking.id} /><select name="status" defaultValue={booking.status} className="rounded-lg border border-border px-2 py-1"><option>PENDING</option><option>CONFIRMED</option><option>COMPLETED</option><option>CANCELLED</option></select><Button size="sm" type="submit" variant="outline">Save</Button></form></td>
                <td><div className="flex items-center gap-2"><Button href={`tel:${booking.phone}`} size="sm" variant="green">Call</Button><Button href={`https://wa.me/${String(booking.phone).replace("+", "")}`} size="sm" variant="outline">WhatsApp</Button></div></td>
                <td>
                  <form action={deleteBookingAction}>
                    <input type="hidden" name="id" value={booking.id} />
                    <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" type="submit">Delete</Button>
                  </form>
                </td>
              </tr>
            )) : <tr><td className="px-4 py-6 text-navy-muted" colSpan={8}>No bookings yet. Database-backed bookings will appear here.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}