"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Calendar, Phone, Mail, Euro, Eye, SquarePen, Trash2 } from "lucide-react"
import type { Client } from "@/types/clients"
import { useTranslations } from "next-intl"
import Link from "next/link"
import React, { useState } from "react"
import EditCustomerModal from "./EditCustomerModal"
import { useDeleteClient } from "@/lib/react-query/hooks/clients"
import { useConfirm } from "@/context/ConfirmDialogContext"

interface CustomerListItemProps {
  customer: Client
}

export function CustomerListItem({ customer }: CustomerListItemProps) {
  const t = useTranslations()
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const deleteClientMutation = useDeleteClient()
  const confirm = useConfirm()

  const handleDelete = () => {
    confirm.show({
      title: `Delete client: ${customer.name}`,
      description: `Are you sure you want to delete the client "${customer.name}"? This action cannot be undone and all associated records will be permanently removed.`,
      confirmText: t("common.delete"),
      cancelText: t("common.cancel"),
      onConfirm: async () => {
        try {
          await deleteClientMutation.mutateAsync(customer.clientId)
        } catch (e) {
          console.error("Delete failed", e)
        }
      }
    })
  }

  return (
    <>
      <Card className="mb-2 sm:mb-3 border border-gray-200 bg-white">
        <CardContent className="p-2 sm:p-3">
          <div className="flex items-center gap-3">
            {/* Avatar */}
            <Avatar className="w-10 h-10 sm:w-12 sm:h-12 ring-1 ring-gray-100 shrink-0">
              <AvatarFallback className="text-xs font-semibold bg-linear-to-br from-blue-500 to-purple-600 text-white">
                {customer.name
                  .split(" ")
                  .map((n: string) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>

            {/* Customer Info */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-0.5">
                <h3 className="text-gray-900 font-semibold text-sm truncate">{customer.name}</h3>
                <Badge
                  className={`rounded-full px-1.5 py-0 text-xs font-medium ${customer.status === "new"
                    ? "bg-blue-100 text-blue-700 border-blue-200"
                    : customer.status === "active"
                      ? "bg-emerald-100 text-emerald-700 border-emerald-200"
                      : customer.status === "inactive"
                        ? "bg-red-100 text-red-700 border-red-200"
                        : "bg-purple-100 text-purple-700 border-purple-200"
                    }`}
                  variant="outline"
                >
                  {t(`customers.customerItem.status.${customer.status}`)}
                </Badge>
              </div>

              <div className="flex items-center gap-2 text-gray-600 text-xs">
                <div className="flex items-center gap-1">
                  <Mail className="w-3 h-3 shrink-0" />
                  <span className="truncate">{customer.email}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Phone className="w-3 h-3 shrink-0" />
                  <span>{customer.phone}</span>
                </div>
              </div>
            </div>

            {/* Stats */}
            <div className="flex items-center gap-2 sm:gap-4">
              <div className="hidden sm:flex items-center gap-4 sm:gap-6">
                <div className="text-center">
                  <div className="flex items-center gap-0.5 mb-0.5">
                    <Calendar className="w-3 h-3 text-gray-400" />
                    <span className="text-xs font-medium text-gray-500">{t("customers.customerItem.visits")}</span>
                  </div>
                  <p className="text-gray-900 font-semibold text-sm">{customer.totalVisits}</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center gap-0.5 mb-0.5">
                    <Euro className="w-3 h-3 text-emerald-500" />
                    <span className="text-xs font-medium text-gray-500">{t("customers.customerItem.spent")}</span>
                  </div>
                  <p className="text-emerald-600 font-semibold text-sm">€{customer.totalSpent}</p>
                </div>
              </div>

              <div className="flex items-center gap-1">
                {/* View Appointments Icon */}
                <Link
                  href={`/dashboard/customers/${customer.clientId}/appointments`}
                  className="p-1.5 sm:p-2 hover:bg-blue-50 rounded-full transition-colors group"
                  title="View Appointments"
                >
                  <Eye className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 group-hover:text-blue-700" />
                </Link>

                {/* Edit Button */}
                <button
                  onClick={() => setIsEditModalOpen(true)}
                  className="p-1.5 sm:p-2 hover:bg-blue-50 rounded-full transition-colors group"
                  title={t("common.edit")}
                >
                  <SquarePen className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 group-hover:text-blue-700" />
                </button>

                {/* Delete Button */}
                <button
                  onClick={handleDelete}
                  disabled={deleteClientMutation.isPending}
                  className="p-1.5 sm:p-2 hover:bg-red-50 rounded-full transition-colors group disabled:opacity-50"
                  title={t("common.delete")}
                >
                  <Trash2 className="w-4 h-4 sm:w-5 sm:h-5 text-red-500 group-hover:text-red-600" />
                </button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <EditCustomerModal
        clientId={customer.clientId}
        open={isEditModalOpen}
        setOpen={setIsEditModalOpen}
      />
    </>
  )
}