import type { Session } from "agents-shared/contract";
import type { Part, Reason } from "agents-shared/find";
import { repositories, repositoryLinks, sessionKey } from "agents-shared/repos";
import { age, sessionTitle, statusLabel } from "agents-shared/sessions";
import * as Clipboard from "expo-clipboard";
import { Link } from "expo-router";
import { memo } from "react";
import { Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
import { haptic } from "@/haptics";
import { color, inset } from "@/theme";
import { type } from "@/type";
import { useCalendar } from "@/zone";
import { HarnessBadge } from "./Harness";
import { Highlight, MatchReason } from "./Highlight";
import { openLink, RepoRail } from "./RepoRail";

export const SessionRow = memo(function SessionRow({ session: s, now, match }: { session: Session; now: number; match?: { title: Part[]; reason: Reason } }) {
  const cal = useCalendar();
  const recent = s.status === "recent";
  const repos = repositoryLinks(repositories(s));
  const when = age(s.updated, cal, now);
  const large = useWindowDimensions().fontScale > 1.35;
  const place = s.worktree || s.project || "No project";
  const flags = [s.subagent && "Subagent", s.archived && "Archived"].filter(Boolean).join(" · ");
  return (
    <View style={styles.item}>
      <Link href={{ pathname: "/session/[key]", params: { key: sessionKey(s.provider, s.id) } }} asChild>
        <Link.Trigger>
          <Pressable accessibilityRole="button" accessibilityLabel={`${sessionTitle(s)}. ${place}${s.host ? ", " + s.host : ""}. ${statusLabel(s.status)}${flags ? ", " + flags : ""}. ${when}`}>
            {({ pressed }) => (
              <View style={[styles.row, pressed && { backgroundColor: color.border }]}>
                <HarnessBadge providers={[s.provider]} recent={recent} />
                <View style={styles.content}>
                  <View style={styles.titleLine}>
                    {match ? (
                      <View style={{ flex: 1 }}>
                        <Highlight parts={match.title} style={[type.row, { color: color.ink }]} lines={large ? 4 : 2} />
                      </View>
                    ) : (
                      <Text style={[type.row, { color: color.ink, flex: 1 }]} numberOfLines={large ? 4 : 2}>
                        {sessionTitle(s)}
                      </Text>
                    )}
                    {large ? null : <Text style={[type.meta, type.numeric, { color: recent ? color.accent : color.muted }]}>{when}</Text>}
                  </View>
                  <Text style={[type.meta, { color: color.muted }]} numberOfLines={large ? 3 : 1}>
                    {large ? `${when} · ` : ""}
                    {place}
                    {s.host ? ` · ${s.host}` : ""}
                    {" · "}
                    <Text style={recent ? { color: color.accent, fontWeight: "600" } : undefined}>{statusLabel(s.status)}</Text>
                    {flags ? ` · ${flags}` : ""}
                  </Text>
                  {match ? <MatchReason reason={match.reason} /> : null}
                </View>
              </View>
            )}
          </Pressable>
        </Link.Trigger>
        <Link.Menu>
          <Link.MenuAction
            title="Copy session ID"
            icon="doc.on.doc"
            onPress={() => {
              void Clipboard.setStringAsync(s.id);
              haptic.success();
            }}
          />
          {repos.map((repo) => (
            <Link.MenuAction key={repo.href} title={`Open ${repo.label}`} icon="arrow.up.right.square" onPress={() => openLink(repo.href)} />
          ))}
        </Link.Menu>
      </Link>
      {repos.length ? (
        <View style={styles.rail}>
          <RepoRail contexts={repositories(s)} />
        </View>
      ) : null}
    </View>
  );
});

const styles = StyleSheet.create({
  item: { backgroundColor: color.surface, paddingBottom: 10 },
  row: { flexDirection: "row", alignItems: "flex-start", gap: 12, paddingHorizontal: inset, paddingTop: 10 },
  content: { flex: 1, gap: 2 },
  titleLine: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
  rail: { marginTop: 6 },
});