import { Link } from "react-router";
import { ChevronRight, Clock, Lock, Activity, Users } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { client } from "@/client";
import { workspaceColor, workspaceInitial } from "@/components/shell/shared";

export function WorkspaceList({ workspaces }: { workspaces: { name: string; avatar_url: string; description: string; owner: boolean }[] | undefined }) {
  return (
    <section>
      <div className="flex items-center justify-between">
        <h2 className="font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
          Workspaces
        </h2>
        <Link
          className="flex items-center gap-1 font-mono text-xs text-muted-foreground hover:text-foreground transition-colors"
          to="/me/repos"
        >
          View all <ChevronRight className="size-3" />
        </Link>
      </div>
      <div className="mt-4 space-y-4">
        {(workspaces ?? []).slice(0, 5).map((ws) => (
          <Link
            className="group flex items-center gap-3 rounded-lg -mx-2 px-2 py-2 transition-colors hover:bg-accent/50"
            key={ws.name}
            to={`/${ws.name}/repos`}
          >
            <span
              className={`grid size-7 place-items-center rounded-lg bg-gradient-to-br text-xs font-bold text-white ${workspaceColor(ws.name)}`}
            >
              {ws.avatar_url ? <img alt="" className="size-full object-cover" src={ws.avatar_url} /> : workspaceInitial(ws.name)}
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1.5">
                <span className="font-heading font-semibold text-foreground truncate">{ws.name}</span>
                {ws.owner && <Lock className="size-3 text-muted-foreground" />}
              </div>
              <p className="text-xs text-muted-foreground truncate">{ws.description}</p>
            </div>
          </Link>
        ))}
        {(workspaces ?? []).length === 0 && (
          <p className="py-4 text-center text-sm text-muted-foreground">No workspaces yet</p>
        )}
      </div>
    </section>
  );
}

export function ActivityFeed({ relationCounts }: { relationCounts: { followers: number; following: number } | undefined }) {
  const { data: joinApplies } = useQuery({
    queryKey: ["workspace", "join-applies"],
    queryFn: async () => {
      const res = await client.workspaceMyJoinApplies();
      return res.data;
    },
    retry: false,
  });

  const pending = (joinApplies ?? []).filter((a) => a.status === "pending");

  return (
    <section>
      <h2 className="font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
        Recent activity
      </h2>
      <div className="mt-4 divide-y divide-border">
        {pending.slice(0, 2).map((apply) => (
          <div className="flex items-start gap-3 py-3" key={`${apply.workspace_name}-${apply.username}`}>
            <span
              className={`grid size-6 place-items-center rounded-md bg-gradient-to-br text-xs font-bold text-white ${workspaceColor(apply.workspace_name)}`}
            >
              {workspaceInitial(apply.workspace_name)}
            </span>
            <div className="min-w-0 flex-1">
              <p className="font-heading font-medium text-foreground">
                Requested to join {apply.workspace_name}
              </p>
              <p className="font-mono text-xs text-muted-foreground">
                <Clock className="inline size-3 mr-1" />
                {new Date(apply.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
              </p>
            </div>
            <span className="rounded-md border border-warning/20 bg-warning/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-warning">
              Pending
            </span>
          </div>
        ))}
        {pending.length === 0 && (
          <div className="flex items-start gap-3 py-3">
            <Activity className="size-4 text-muted-foreground mt-0.5" />
            <div>
              <p className="font-heading font-medium text-foreground">Signed in</p>
              <p className="font-mono text-xs text-muted-foreground">Today</p>
            </div>
          </div>
        )}
      </div>

      {relationCounts && (
        <div className="mt-6">
          <Link
            className="group flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:border-primary/20"
            to="/me/following"
          >
            <Users className="size-4 text-muted-foreground group-hover:text-primary transition-colors" />
            <div className="flex-1">
              <p className="font-heading font-medium text-foreground">
                {relationCounts.followers} followers · {relationCounts.following} following
              </p>
            </div>
            <ChevronRight className="size-4 text-muted-foreground" />
          </Link>
        </div>
      )}
    </section>
  );
}