"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Car,
  Hotel,
  Sparkles,
  Package,
  Calendar,
  CheckCircle,
  XCircle,
  IndianRupee,
  Inbox,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { USER_DASHBOARD_HOME } from "@/lib/strings/user-dashboard";

export function UserDashboardContent() {
  const stats = [
    {
      title: USER_DASHBOARD_HOME.STAT_TOTAL_BOOKINGS,
      value: "0",
      icon: Calendar,
      description: USER_DASHBOARD_HOME.STAT_TOTAL_BOOKINGS_DESC,
      color: "bg-blue-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_VEHICLE_BOOKINGS,
      value: "0",
      icon: Car,
      description: USER_DASHBOARD_HOME.STAT_VEHICLE_BOOKINGS_DESC,
      color: "bg-teal-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_HOTEL_BOOKINGS,
      value: "0",
      icon: Hotel,
      description: USER_DASHBOARD_HOME.STAT_HOTEL_BOOKINGS_DESC,
      color: "bg-purple-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_SPIRITUAL,
      value: "0",
      icon: Sparkles,
      description: USER_DASHBOARD_HOME.STAT_SPIRITUAL_DESC,
      color: "bg-orange-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_CUSTOM_PACKAGES,
      value: "0",
      icon: Package,
      description: USER_DASHBOARD_HOME.STAT_CUSTOM_PACKAGES_DESC,
      color: "bg-rose-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_COMPLETED,
      value: "0",
      icon: CheckCircle,
      description: USER_DASHBOARD_HOME.STAT_COMPLETED_DESC,
      color: "bg-green-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_CANCELLED,
      value: "0",
      icon: XCircle,
      description: USER_DASHBOARD_HOME.STAT_CANCELLED_DESC,
      color: "bg-gray-500",
    },
    {
      title: USER_DASHBOARD_HOME.STAT_TOTAL_SPENT,
      value: USER_DASHBOARD_HOME.STAT_TOTAL_SPENT_VALUE,
      icon: IndianRupee,
      description: USER_DASHBOARD_HOME.STAT_TOTAL_SPENT_DESC,
      color: "bg-indigo-500",
    },
  ];

  const recentBookings: {
    type: string;
    title: string;
    date: string;
    status: string;
    icon: typeof Car;
    color: string;
  }[] = [];

  return (
    <div className="space-y-8">
      <header className="space-y-2">
        <h1 className="text-3xl lg:text-4xl font-bold text-gray-900 text-balance">
          {USER_DASHBOARD_HOME.PAGE_TITLE}
        </h1>
        <p className="text-gray-600 text-lg">
          {USER_DASHBOARD_HOME.PAGE_SUBTITLE}
        </p>
      </header>

      <div className="grid grid-cols-1 min-[480px]:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-6">
        {stats.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <Card
              key={index}
              className="border-border/50 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
            >
              <CardHeader className="relative space-y-0 pb-3 pt-5 sm:pt-6 px-5 sm:px-6 pe-[4.75rem] sm:pe-[5rem]">
                <CardTitle className="text-sm font-semibold text-gray-700 leading-snug break-words text-pretty">
                  {stat.title}
                </CardTitle>
                <div
                  className={`pointer-events-none absolute end-5 top-5 sm:end-6 sm:top-6 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl ${stat.color} shadow-lg`}
                  aria-hidden
                >
                  <Icon className="h-5 w-5 shrink-0 text-white" />
                </div>
              </CardHeader>
              <CardContent className="px-5 sm:px-6 pb-5 sm:pb-6 pt-0">
                <div className="text-3xl font-bold text-gray-900">
                  {stat.value}
                </div>
                <p className="text-xs text-gray-600 mt-1.5">
                  {stat.description}
                </p>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <Card className="border-border/50 shadow-md">
        <CardHeader className="pb-4 px-5 sm:px-6">
          <CardTitle className="text-2xl font-bold text-gray-900">
            {USER_DASHBOARD_HOME.RECENT_BOOKINGS_TITLE}
          </CardTitle>
          <p className="text-sm text-gray-600 mt-1">
            {USER_DASHBOARD_HOME.RECENT_BOOKINGS_SUBTITLE}
          </p>
        </CardHeader>
        <CardContent className="px-5 sm:px-6 pb-5 sm:pb-6">
          {recentBookings.length === 0 ? (
            <div
              className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border/60 bg-muted/25 py-12 sm:py-16 px-6 text-center"
              role="status"
              aria-live="polite"
            >
              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
                <Inbox className="h-7 w-7 text-muted-foreground" />
              </div>
              <h3 className="text-base font-semibold text-gray-900">
                {USER_DASHBOARD_HOME.EMPTY_RECENT_TITLE}
              </h3>
              <p className="mt-1.5 max-w-sm text-sm text-gray-600 text-pretty">
                {USER_DASHBOARD_HOME.EMPTY_RECENT_DESCRIPTION}
              </p>
            </div>
          ) : (
            <div className="space-y-3">
              {recentBookings.map((booking, index) => {
                const Icon = booking.icon;
                return (
                  <div
                    key={index}
                    className="flex items-center justify-between gap-3 p-4 sm:p-5 border border-border/50 rounded-xl hover:bg-gray-50 hover:border-teal-200 transition-all duration-200 shadow-sm hover:shadow-md"
                  >
                    <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-4">
                      <div
                        className={`shrink-0 p-3 rounded-xl ${booking.color} shadow-sm`}
                      >
                        <Icon className="h-6 w-6" />
                      </div>
                      <div className="min-w-0">
                        <h3 className="font-semibold text-gray-900 text-base truncate sm:whitespace-normal">
                          {booking.title}
                        </h3>
                        <p className="text-sm text-gray-600 mt-0.5">
                          {booking.date}
                        </p>
                      </div>
                    </div>
                    <Badge
                      variant="secondary"
                      className="shrink-0 bg-green-50 text-green-700 hover:bg-green-100 px-3 sm:px-4 py-1.5 font-medium shadow-sm"
                    >
                      {booking.status}
                    </Badge>
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}