"use client";

import Link from "next/link";
import { Home, MapPin } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { useDataProvider } from "@/lib/demo/data-provider-context";
import type { MyResidenceResponse } from "@/lib/api/residences";

interface ResidenceCardProps {
  data: MyResidenceResponse;
}

export function ResidenceCard({ data }: ResidenceCardProps) {
  const { residence, task_summary } = data;
  const { basePath } = useDataProvider();

  const address = [residence.street_address, residence.city, residence.state_province]
    .filter(Boolean)
    .join(", ");

  return (
    <Link href={`${basePath}/residences/${residence.id}`} className="block group">
      <div className="rounded-2xl border border-border bg-card overflow-hidden transition-all duration-200 hover:shadow-[var(--shadow-warm-md)] hover:-translate-y-0.5 hover:border-primary/30">
        <div className="h-1 bg-gradient-to-r from-primary/60 to-primary/20" />
        <div className="p-5">
          <div className="flex items-start gap-3 mb-3">
            <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
              <Home className="size-5 text-primary" />
            </div>
            <div className="min-w-0">
              <h3 className="font-heading font-bold text-base leading-tight group-hover:text-primary transition-colors">
                {residence.name}
              </h3>
              {address && (
                <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1">
                  <MapPin className="size-3.5 shrink-0" aria-hidden="true" />
                  <span className="sr-only">Address:</span>
                  <span className="truncate">{address}</span>
                </div>
              )}
            </div>
          </div>
          <div className="flex flex-wrap gap-2">
            {task_summary.overdue > 0 && (
              <Badge variant="destructive" className="rounded-lg">
                {task_summary.overdue} overdue
              </Badge>
            )}
            {task_summary.due_soon > 0 && (
              <Badge variant="secondary" className="rounded-lg">
                {task_summary.due_soon} due soon
              </Badge>
            )}
            <Badge variant="outline" className="rounded-lg">
              {task_summary.total} {task_summary.total === 1 ? "task" : "tasks"}
            </Badge>
          </div>
        </div>
      </div>
    </Link>
  );
}
