import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ListOrdered, Check, X, MessageSquareText } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import type { Toy } from "@/types";
import { mockToys } from "@/lib/mockData";
import { Badge } from "@/components/ui/badge";
import { getI18n } from "@/locales/server";

interface RentalRequest {
  id: string;
  toy: Toy;
  requesterName: string;
  requesterId: string;
  requestedDates: string; // e.g., "Aug 5, 2024 - Aug 10, 2024"
  status: 'pending' | 'approved' | 'declined';
  message?: string;
  dataAiHint?: string;
}

const rentalRequests: RentalRequest[] = [
  {
    id: 'req1',
    toy: mockToys[0], 
    requesterName: 'Charlie Brown',
    requesterId: 'user4',
    requestedDates: 'August 10, 2024 - August 17, 2024',
    status: 'pending',
    message: 'My son would love to play with these for his birthday week! We are very careful with toys and will ensure it is returned in perfect condition. Could we possibly pick it up on the 9th evening?',
    dataAiHint: mockToys[0]?.category.toLowerCase(),
  },
  {
    id: 'req2',
    toy: mockToys[3], 
    requesterName: 'Diana Prince',
    requesterId: 'user5',
    requestedDates: 'September 1, 2024 - September 5, 2024',
    status: 'approved',
    dataAiHint: mockToys[3]?.category.toLowerCase(),
  },
  {
    id: 'req3',
    toy: mockToys[0],
    requesterName: 'Edward Nigma',
    requesterId: 'user6',
    requestedDates: 'July 20, 2024 - July 22, 2024',
    status: 'declined',
    message: 'Looking for a weekend rental.',
    dataAiHint: mockToys[0]?.category.toLowerCase(),
  },
];

const currentUserToyRequests = rentalRequests.filter(req => req.toy.ownerId === 'user1');


export default async function RentalRequestsPage() {
  const t = await getI18n();

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.requests.title')}</h1>
        <p className="text-muted-foreground">{t('dashboard.requests.description')}</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>{t('dashboard.requests.no_requests_title')}</CardTitle>
            <CardDescription>{t('dashboard.requests.no_requests_description')}</CardDescription>
          </CardHeader>
          <CardContent>
             <p className="text-sm text-muted-foreground">{t('dashboard.requests.no_requests_content')}</p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-6">
          {currentUserToyRequests.map(request => (
            <RequestItemCard key={request.id} request={request} t={t} />
          ))}
        </div>
      )}
    </div>
  );
}

interface RequestItemCardProps {
  request: RentalRequest;
  t: (key: string, params?: Record<string, string | number>) => string;
}

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

  const getStatusTextKey = (status: RentalRequest['status']): string => {
    if (status === 'approved') return 'dashboard.requests.status_approved';
    if (status === 'declined') return 'dashboard.requests.status_declined';
    return 'dashboard.requests.status_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)}>{t(getStatusTextKey(request.status))}</Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            {t('dashboard.requests.requested_by')}: <span className="font-medium text-foreground">{request.requesterName}</span>
          </p>
          <p className="text-sm text-muted-foreground">
            {t('dashboard.requests.dates')}: <span className="font-medium text-foreground">{request.requestedDates}</span>
          </p>

          {request.message && (
            <div className="mt-3 p-3 border border-border bg-muted/30 rounded-lg shadow-sm">
              <div className="flex items-center mb-1.5">
                <MessageSquareText className="h-4 w-4 mr-2 text-primary" />
                <h4 className="text-sm font-semibold text-primary">{t('dashboard.requests.message_label')}</h4>
              </div>
              <p className="text-sm text-foreground/90 whitespace-pre-line">{request.message}</p>
            </div>
          )}
          
          {request.status === 'pending' && (
            <div className="mt-4 flex flex-wrap gap-2">
              <Button size="sm" className="bg-green-600 hover:bg-green-700">
                <Check className="mr-1 h-4 w-4" /> {t('dashboard.requests.approve_button')}
              </Button>
              <Button variant="destructive" size="sm">
                <X className="mr-1 h-4 w-4" /> {t('dashboard.requests.decline_button')}
              </Button>
              <Button variant="outline" size="sm">{t('dashboard.requests.message_requester_button')}</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 text-primary hover:underline">
                  {t('dashboard.requests.view_toy_listing_button')}
                </Button>
              </Link>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}