"use client";

import { CheckCircle, DotsThree, PencilSimple, Trash, User } from "@/lib/icons";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Activity } from "@/lib/appwrite/schema";
import { ACTIVITY_TYPE_LABELS } from "@/lib/appwrite/schema";
import type { TeamMember } from "./activity-form-sheet";

interface Props {
  activities: Activity[];
  members: TeamMember[];
  currentUserId: string;
  onEdit: (a: Activity) => void;
  onComplete: (a: Activity) => void;
  onDelete: (a: Activity) => void;
}

export function ActivityTeamView({
  activities,
  members,
  currentUserId,
  onEdit,
  onComplete,
  onDelete,
}: Props) {
  const memberIds = new Set(members.map((m) => m.id));

  // Group by effective assignee (assigneeId ?? createdBy)
  const groups = members
    .map((member) => ({
      member,
      activities: activities.filter((a) => {
        const effective = a.assigneeId || a.createdBy;
        return effective === member.id;
      }),
    }))
    .filter((g) => g.activities.length > 0);

  // Activities not belonging to any known member
  const orphaned = activities.filter((a) => {
    const effective = a.assigneeId || a.createdBy;
    return !memberIds.has(effective);
  });

  if (groups.length === 0 && orphaned.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center">
        <User className="size-10 text-muted-foreground/30 mb-3" />
        <p className="text-muted-foreground text-sm">Henüz aktivite bulunmuyor.</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      {groups.map(({ member, activities: memberActivities }) => (
        <MemberSection
          key={member.id}
          member={member}
          isCurrentUser={member.id === currentUserId}
          activities={memberActivities}
          onEdit={onEdit}
          onComplete={onComplete}
          onDelete={onDelete}
        />
      ))}
      {orphaned.length > 0 && (
        <MemberSection
          member={{ id: "", name: "Atanmamış" }}
          isCurrentUser={false}
          activities={orphaned}
          onEdit={onEdit}
          onComplete={onComplete}
          onDelete={onDelete}
        />
      )}
    </div>
  );
}

function MemberSection({
  member,
  isCurrentUser,
  activities,
  onEdit,
  onComplete,
  onDelete,
}: {
  member: TeamMember;
  isCurrentUser: boolean;
  activities: Activity[];
  onEdit: (a: Activity) => void;
  onComplete: (a: Activity) => void;
  onDelete: (a: Activity) => void;
}) {
  const pending = activities.filter((a) => !a.completedAt).length;

  return (
    <div className="rounded-xl border bg-card">
      {/* Section header */}
      <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/40 rounded-t-xl">
        <div className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold shrink-0">
          {member.name.charAt(0).toUpperCase()}
        </div>
        <div className="flex-1 min-w-0">
          <span className="font-semibold text-sm">
            {member.name}
            {isCurrentUser && (
              <span className="text-muted-foreground font-normal ml-1">(ben)</span>
            )}
          </span>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {pending > 0 && (
            <Badge variant="secondary" className="text-xs">
              {pending} bekliyor
            </Badge>
          )}
          <Badge variant="outline" className="text-xs">
            {activities.length} toplam
          </Badge>
        </div>
      </div>

      {/* Activities */}
      <div className="divide-y">
        {activities.map((a) => (
          <ActivityRow
            key={a.$id}
            activity={a}
            onEdit={onEdit}
            onComplete={onComplete}
            onDelete={onDelete}
          />
        ))}
      </div>
    </div>
  );
}

function ActivityRow({
  activity: a,
  onEdit,
  onComplete,
  onDelete,
}: {
  activity: Activity;
  onEdit: (a: Activity) => void;
  onComplete: (a: Activity) => void;
  onDelete: (a: Activity) => void;
}) {
  const isCompleted = !!a.completedAt;
  const isOverdue =
    !isCompleted && a.dueDate && new Date(a.dueDate) < new Date(new Date().setHours(0, 0, 0, 0));

  return (
    <div className="flex items-start gap-3 px-4 py-3 hover:bg-muted/30 transition-colors group">
      {/* Completion indicator */}
      <button
        type="button"
        onClick={() => !isCompleted && onComplete(a)}
        disabled={isCompleted}
        title={isCompleted ? "Tamamlandı" : "Tamamla"}
        className={`mt-0.5 shrink-0 rounded-full transition-colors ${
          isCompleted
            ? "text-green-500 cursor-default"
            : "text-muted-foreground/40 hover:text-green-500 cursor-pointer"
        }`}
      >
        <CheckCircle className="size-5" weight={isCompleted ? "fill" : "regular"} />
      </button>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <p className={`text-sm font-medium leading-snug truncate ${isCompleted ? "line-through text-muted-foreground" : ""}`}>
          {a.title}
        </p>
        <div className="flex items-center gap-2 mt-1 flex-wrap">
          <Badge variant="secondary" className="text-xs py-0">
            {ACTIVITY_TYPE_LABELS[a.type] ?? a.type}
          </Badge>
          {a.dueDate && (
            <span className={`text-xs ${isOverdue ? "text-destructive font-medium" : "text-muted-foreground"}`}>
              {new Date(a.dueDate).toLocaleDateString("tr-TR", { day: "numeric", month: "short" })}
              {isOverdue && " · Gecikmiş"}
            </span>
          )}
          {a.description && (
            <span className="text-xs text-muted-foreground truncate max-w-[200px]">
              {a.description}
            </span>
          )}
        </div>
      </div>

      {/* Actions */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="size-7 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
          >
            <DotsThree className="size-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          {!isCompleted && (
            <DropdownMenuItem onClick={() => onComplete(a)}>
              <CheckCircle className="size-4 mr-2" />
              Tamamla
            </DropdownMenuItem>
          )}
          <DropdownMenuItem onClick={() => onEdit(a)}>
            <PencilSimple className="size-4 mr-2" />
            Düzenle
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => onDelete(a)}
            className="text-destructive focus:text-destructive"
          >
            <Trash className="size-4 mr-2" />
            Sil
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
