import { Phone, Envelope, CalendarCheck } from '@/lib/icons';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { CUSTOMER_STAGE_LABELS, CUSTOMER_TYPE_LABELS, type Customer } from "@/lib/appwrite/schema";

function isOverdue(date: string) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return new Date(date) < today;
}

export function FollowUpWidget({ customers }: { customers: Customer[] }) {
  const empty = customers.length === 0;

  return (
    <Card className="overflow-hidden flex flex-col lg:h-full">
      <CardHeader className="shrink-0">
        <CardTitle className="text-base flex items-center gap-2">
          <CalendarCheck className={`size-4 ${empty ? "text-muted-foreground" : "text-amber-500"}`} />
          Bugünkü Takipler
          {!empty && (
            <Badge variant="secondary" className="ml-auto text-xs">{customers.length}</Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent className="px-0 pb-3 lg:flex-1 lg:min-h-0 lg:overflow-y-auto">
        {empty ? (
          <p className="text-sm text-muted-foreground text-center py-6 px-4">
            Bekleyen takip yok
          </p>
        ) : (
          <ul className="divide-y">
            {customers.map((c) => {
              const overdue = c.nextFollowUpDate ? isOverdue(c.nextFollowUpDate) : false;
              return (
                <li key={c.$id} className="flex items-center gap-3 px-6 py-3">
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{c.name}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {CUSTOMER_TYPE_LABELS[c.type] ?? c.type}
                      {c.stage ? ` · ${CUSTOMER_STAGE_LABELS[c.stage] ?? c.stage}` : ""}
                    </p>
                  </div>
                  <div className="flex items-center gap-1.5 shrink-0">
                    {overdue && (
                      <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
                        Gecikti
                      </span>
                    )}
                    {c.phone && (
                      <a
                        href={`tel:${c.phone}`}
                        title={c.phone}
                        className="size-7 rounded-md bg-muted flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                      >
                        <Phone className="size-3.5" />
                      </a>
                    )}
                    {c.email && (
                      <a
                        href={`mailto:${c.email}`}
                        title={c.email}
                        className="size-7 rounded-md bg-muted flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                      >
                        <Envelope className="size-3.5" />
                      </a>
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
