import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { History, ToyBrick } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import type { RentalHistoryEntry } from "@/types";
import { mockRentalHistory } from "@/lib/mockData";
import { getI18n } from "@/locales/server";
import type { Locale } from "@/locales/server";
import { Badge } from "@/components/ui/badge";
import { format } from 'date-fns';

const currentUserId = 1; // Assume this is the logged-in user's ID

export default async function RentalHistoryPage({ params }: { params: { locale: Locale } }) {
  const t = await getI18n();
  const locale = params.locale;

  // Filter rental history for the current user
  const userRentalHistory = mockRentalHistory.filter(entry => entry.userId === currentUserId);

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.rental_history.title')}</h1>
        <p className="text-muted-foreground">{t('dashboard.rental_history.description')}</p>
      </div>

      {userRentalHistory.length === 0 ? (
        <Card className="text-center py-12 shadow-md">
          <CardHeader>
            <History className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
            <CardTitle>{t('dashboard.rental_history.no_history_title')}</CardTitle>
            <CardDescription>{t('dashboard.rental_history.no_history_description')}</CardDescription>
          </CardHeader>
          <CardContent>
            <Link href={`/${locale}/`} passHref>
              <Button size="lg">
                <ToyBrick className="mr-2 h-5 w-5" />
                {t('dashboard.rental_history.browse_toys_button')}
              </Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-6">
          {userRentalHistory.map(entry => (
            <RentalHistoryItemCard key={entry.id} item={entry} t={t} locale={locale} />
          ))}
        </div>
      )}
    </div>
  );
}

interface RentalHistoryItemCardProps {
  item: RentalHistoryEntry;
  t: (key: string, params?: Record<string, string | number | Date>) => string;
  locale: Locale;
}

function RentalHistoryItemCard({ item, t, locale }: RentalHistoryItemCardProps) {
  const placeholderHint = item.dataAiHint || item.toy.category.toLowerCase() || "toy";
  const formattedStartDate = format(new Date(item.rentalStartDate), 'PP');
  const formattedEndDate = format(new Date(item.rentalEndDate), 'PP');

  const getStatusTextKey = (status: RentalHistoryEntry['status']) => {
    if (status === 'Completed') return 'rental_history_card.status_completed';
    if (status === 'Returned') return 'rental_history_card.status_returned';
    return ''; 
  }

  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-[4/3]">
          <Image
            src={item.toy.images[0] || 'https://placehold.co/200x150.png'}
            alt={item.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">{item.toy.name}</CardTitle>
            <Badge variant={item.status === 'Completed' ? 'default' : 'secondary'}>{t(getStatusTextKey(item.status))}</Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            {t('rental_history_card.rented_from')}: <span className="font-medium text-foreground">{item.toy.ownerName}</span>
          </p>
          <p className="text-sm text-muted-foreground">
            {t('rental_history_card.rental_period')}: <span className="font-medium text-foreground">{formattedStartDate} - {formattedEndDate}</span>
          </p>
          <p className="text-sm text-muted-foreground">
            {t('rental_history_card.cost')}: <span className="font-medium text-foreground">${item.totalCost.toFixed(2)}</span>
          </p>
           <p className="text-sm text-muted-foreground">
            {t('rental_history_card.status')}: <span className="font-medium text-foreground">{t(getStatusTextKey(item.status))}</span>
          </p>
          
          <div className="mt-4">
            <Link href={`/${locale}/toys/${item.toy.id}`} passHref>
              <Button variant="outline" size="sm">{t('rental_history_card.view_toy_button')}</Button>
            </Link>
          </div>
        </div>
      </div>
    </Card>
  );
}