import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ListOrdered, Check, X } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import type { Toy, RentalRequest } from "@/types";
import { getAllToys } from "@/data/operations";
import { Badge } from "@/components/ui/badge";

// This is still mock data. In a real app, this would come from the database.
function getMockRequests(): RentalRequest[] {
    const allToys = getAllToys();
    const myToys = allToys.filter(t => t.ownerId === 1);
    
    if (myToys.length === 0) return [];

    const rentalRequests: RentalRequest[] = [
      {
        id: 'req1',
        toy: myToys[0], 
        requesterName: 'Charlie Brown',
        requesterId: 4,
        requestedDates: 'August 10, 2024 - August 17, 2024',
        status: 'pending',
        message: 'My son would love to play with these for his birthday week!',
        dataAiHint: myToys[0]?.category.toLowerCase(),
      },
      {
        id: 'req2',
        toy: myToys.length > 1 ? myToys[1] : myToys[0], 
        requesterName: 'Diana Prince',
        requesterId: 5,
        requestedDates: 'September 1, 2024 - September 5, 2024',
        status: 'approved',
        dataAiHint: (myToys.length > 1 ? myToys[1] : myToys[0])?.category.toLowerCase(),
      },
      {
        id: 'req3',
        toy: myToys[0],
        requesterName: 'Edward Nigma',
        requesterId: 6,
        requestedDates: 'July 20, 2024 - July 22, 2024',
        status: 'declined',
        message: 'Looking for a weekend rental.',
        dataAiHint: myToys[0]?.category.toLowerCase(),
      },
    ];
    return rentalRequests;
}

const currentUserToyRequests = getMockRequests();


export default function RentalRequestsPage() {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-3xl font-bold font-headline text-primary">Rental Requests</h1>
        <p className="text-muted-foreground">Manage incoming rental requests for your toys.</p>
      </div>

      {currentUserToyRequests.length === 0 ? (
        <Card className="text-center py-12 shadow-md">
          <CardHeader>
            <ListOrdered className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
            <CardTitle>No Rental Requests</CardTitle>
            <CardDescription>You currently have no pending rental requests for your toys.</CardDescription>
          </CardHeader>
          <CardContent>
             <p className="text-sm text-muted-foreground">When someone requests to rent one of your toys, it will appear here.</p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-6">
          {currentUserToyRequests.map(request => (
            <RequestItemCard key={request.id} request={request} />
          ))}
        </div>
      )}
    </div>
  );
}

interface RequestItemCardProps {
  request: RentalRequest;
}

function RequestItemCard({ request }: RequestItemCardProps) {
  const placeholderHint = request.dataAiHint || request.toy.category.toLowerCase() || "toy";
  
  const getStatusBadgeVariant = (status: RentalRequest['status']) => {
    if (status === 'approved') return 'default'; // default is primary
    if (status === 'declined') return 'destructive';
    return 'secondary'; // pending
  };

  return (
    <Card className="overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
      <div className="flex flex-col md:flex-row">
        <div className="md:w-1/4 lg:w-1/5 relative aspect-video md:aspect-auto">
          <Image
            src={request.toy.images[0] || 'https://placehold.co/200x150.png'}
            alt={request.toy.name}
            layout="fill"
            objectFit="cover"
            data-ai-hint={placeholderHint}
            className="md:rounded-l-lg md:rounded-tr-none rounded-t-lg"
          />
        </div>
        <div className="flex-1 p-6">
          <div className="flex justify-between items-start mb-2">
            <CardTitle className="text-xl font-headline">{request.toy.name}</CardTitle>
            <Badge variant={getStatusBadgeVariant(request.status)} className="capitalize">{request.status}</Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            Requested by: <span className="font-medium text-foreground">{request.requesterName}</span>
          </p>
          <p className="text-sm text-muted-foreground">
            Dates: <span className="font-medium text-foreground">{request.requestedDates}</span>
          </p>
          {request.message && (
            <p className="text-sm text-muted-foreground mt-2 bg-muted/50 p-2 rounded-md">
              <span className="font-medium text-foreground">Message:</span> "{request.message}"
            </p>
          )}
          
          {request.status === 'pending' && (
            <div className="mt-4 flex space-x-3">
              <Button size="sm" className="bg-green-600 hover:bg-green-700">
                <Check className="mr-1 h-4 w-4" /> Approve
              </Button>
              <Button variant="destructive" size="sm">
                <X className="mr-1 h-4 w-4" /> Decline
              </Button>
              <Button variant="outline" size="sm">Message Requester</Button>
            </div>
          )}
          {request.status !== 'pending' && (
             <div className="mt-4">
              <Link href={`/dashboard/my-toys/edit/${request.toy.id}`} passHref>
                <Button variant="link" size="sm" className="p-0 h-auto">View Toy Listing</Button>
              </Link>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}