"use client"

import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { ClipboardList, Clock, CheckCircle2, AlertCircle } from "lucide-react";
import { authFetch } from "@/lib/api";

async function fetchPrescriptions() {
    return authFetch("/api/pharmacies/prescriptions");
    // console.log(res);
    // if (!res.ok) throw new Error("Failed to fetch prescriptions");
    // return res;
}

export default function PrescriptionsPage() {
    const { data: prescriptions, isLoading, isError } = useQuery({
        queryKey: ['pharmacy-prescriptions'],
        queryFn: fetchPrescriptions,
        refetchInterval: 300000 // Refresh every 5 minutes
    });

    const statusBadges = {
        pending: (
            <Badge variant="outline" className="gap-1 border-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100">
                <Clock className="h-3 w-3 text-amber-600" />
                Pending
            </Badge>
        ),
        ready: (
            <Badge variant="outline" className="gap-1 border-blue-300 bg-blue-50 text-blue-800 hover:bg-blue-100">
                <Clock className="h-3 w-3 text-blue-600" />
                Ready
            </Badge>
        ),
        fulfilled: (
            <Badge variant="outline" className="gap-1 border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100">
                <CheckCircle2 className="h-3 w-3 text-emerald-600" />
                Fulfilled
            </Badge>
        ),
        rejected: (
            <Badge variant="outline" className="gap-1 border-rose-300 bg-rose-50 text-rose-800 hover:bg-rose-100">
                <AlertCircle className="h-3 w-3 text-rose-600" />
                Rejected
            </Badge>
        )
    };

    return (
        <div className="space-y-4">
            <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold">Prescriptions</h1>
                <div className="flex gap-2">
                    <Button variant="outline">Filter</Button>
                </div>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <ClipboardList className="h-5 w-5" />
                        Recent Prescriptions
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        {prescriptions?.map((prescription) => (
                            <Link
                                key={prescription.id}
                                href={`/dashboard/pharmacy/prescriptions/${prescription.id}`}
                                className="block hover:bg-gray-50 p-4 rounded-lg transition-colors"
                            >
                                <div className="flex items-center justify-between">
                                    <div>
                                        <h3 className="font-medium">#{prescription.id.slice(0, 8)}</h3>
                                        <p className="text-sm text-gray-500">
                                            {new Date(prescription.createdAt).toLocaleDateString()}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div>
                                            <p className="text-sm font-medium">{prescription.patient.firstName}</p>
                                            <p className="text-xs text-gray-500">
                                                {prescription.medicines.length} medication(s)
                                            </p>
                                        </div>
                                        {statusBadges[prescription.status]}
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}