import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { Trash2, Info, SquarePen, Eye } from "lucide-react"
import clsx from "clsx"
import { Stylist } from "@/types/stylists"
import Link from "next/link"

export interface StaffProfile {
  id: string
  name: string
  title: string
  avatarUrl: string
  status: string
  services: string[]
}

export function StaffProfileCard({
  profile,
  stylist,
  confirmDelete,
  onEdit
}: {
  profile: StaffProfile
  stylist?: Stylist
  confirmDelete: (profile: StaffProfile) => void
  onEdit?: (stylist: Stylist) => void
}) {
  return (
    <Card className="shadow-none w-full">
      <CardContent className="px-6 flex flex-col h-full min-h-[220px]">
        {/* Header Section */}
        <div className="flex items-start justify-between mb-2">
          <div className="flex items-center gap-3 flex-1">
            {/* Avatar */}
            <Avatar className="w-12 h-12 shrink-0">
              <AvatarImage src={profile.avatarUrl || ""} alt={profile.name || "Staff member"} />
              <AvatarFallback>
                {(profile.name || "Staff")
                  .split(" ")
                  .map(n => n[0])
                  .join("")
                  .toUpperCase() || "S"}
              </AvatarFallback>
            </Avatar>
            {/* Name and Title */}
            <div className="min-w-0 flex-1">
              <h3 className="font-normal text-lg text-gray-900">{profile.name || "Unnamed Staff"}</h3>
              <p className="text-sm mt-1 text-gray-500">{profile.title || "No title assigned"}</p>
            </div>
          </div>
          <Link
            href={profile.id ? `/dashboard/staff/${profile.id}` : "#"}
            className="flex mt-2 items-center text-gray-400 text-sm cursor-pointer rounded-full"
          >
            <Eye className="w-5 h-5 ml-2 text-blue-900" />
          </Link>
        </div>

        {/* Status & Services Info */}
        <div className="mb-6 space-y-2 mt-4">
          <div className="flex justify-between text-sm">
            <span className="text-gray-500">Status</span>
            <Badge
              className={clsx(
                "font-medium rounded-sm px-3 py-1",
                (profile.status === "Active" || profile.status === "active") ? "bg-green-200/40 text-green-600" : "bg-gray-200 text-gray-900"
              )}
            >
              {profile.status || "Unknown"}
            </Badge>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-500">Services</span>
            <span className="text-blue-900 font-medium">{(profile.services || []).length} assigned</span>
          </div>

        </div>

        {/* Action Buttons - push to bottom on tall cards */}
        <div className="mt-auto w-full flex gap-2">
          <Button
            onClick={() => stylist && onEdit?.(stylist)}
            disabled={!stylist || !onEdit}
            className="flex-1 bg-primary-gradient border-gray-300 text-white rounded-sm disabled:opacity-50"
          >
            <SquarePen className="w-4 h-4 mr-2 text-white" />
            Edit
          </Button>
          <Button
            onClick={() => confirmDelete(profile)}
            variant="outline"
            className="flex-1 bg-transparent border-red-500 text-red-500 rounded-sm"
          >
            <Trash2 className="w-4 h-4 mr-2 text-red-500" />
            Delete
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}