import { useQuery } from "@tanstack/react-query";
import { Link, useParams, useSearch } from "@tanstack/react-router";
import { api } from "../api/client";
import { Card } from "../components/ui/Card";

interface ChangesSearch {
  channel?: string;
}

export function ChangesPage() {
  const { owner, name } = useParams({ from: "/$owner/$name/changes" });
  const { channel: channelParam } = useSearch({ from: "/$owner/$name/changes" }) as ChangesSearch;

  const { data: repo } = useQuery({
    queryKey: ["repo", owner, name],
    queryFn: () => api.repos.get(owner, name),
  });

  const channel = channelParam ?? repo?.defaultChannel ?? "main";

  const { data: changes = [], isLoading } = useQuery({
    queryKey: ["repo", owner, name, "log", channel],
    queryFn: () => api.repos.log(owner, name, channel),
    enabled: !!repo,
  });

  return (
    <div className="max-w-5xl mx-auto px-6 py-8">
      <div className="flex items-center gap-2 text-[15px] mb-6">
        <Link to="/$owner/$name" params={{ owner, name }} className="text-[#0071e3] hover:underline">
          {owner}/{name}
        </Link>
        <span className="text-[#6e6e73]">/</span>
        <span className="font-semibold text-[#1d1d1f]">Changes</span>
      </div>

      {isLoading ? (
        <div className="text-center py-20 text-[#6e6e73]">Loading…</div>
      ) : changes.length === 0 ? (
        <Card className="flex items-center justify-center py-16">
          <p className="text-[15px] text-[#6e6e73]">No changes yet</p>
        </Card>
      ) : (
        <div className="flex flex-col gap-2">
          {changes.map((change) => (
            <Link
              key={change.hash}
              to="/$owner/$name/change/$hash"
              params={{ owner, name, hash: change.hash }}
              className="block"
            >
              <Card className="px-5 py-4 hover:border-[#0071e3]/30 hover:shadow-[0_1px_3px_rgba(0,0,0,0.08),0_4px_20px_rgba(0,113,227,0.08)] transition-all duration-200 cursor-pointer">
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0">
                    <p className="text-[14px] font-medium text-[#1d1d1f] mb-1 truncate">
                      {change.message || "(no message)"}
                    </p>
                    <div className="flex items-center gap-3 text-[12px] text-[#6e6e73]">
                      <span>{change.authors.map((a) => a.name).join(", ")}</span>
                      <code className="font-mono bg-black/5 px-1.5 py-0.5 rounded text-[11px]">
                        {change.hash.slice(0, 8)}
                      </code>
                    </div>
                  </div>
                  <span className="text-[12px] text-[#6e6e73] shrink-0">
                    {change.timestamp ? new Date(change.timestamp).toLocaleDateString() : ""}
                  </span>
                </div>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}