import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { notFound } from "next/navigation";
import { SegmentDetailShell } from "@/components/segments/segment-detail-shell";
import { SegmentActions } from "@/components/segments/segment-actions";
import { SegmentMembersClient } from "@/components/segments/segment-members-client";
import { EMAIL_STATUS_LABELS } from "@/lib/segment-email-filters";
import { StaticSegmentManager } from "@/components/segments/static-segment-manager";
import { toClientJson } from "@/lib/serialize";
import type { SegmentMemberRow } from "@/lib/segment-display";
import { countSegmentMembers, getSegment, getSegmentMembers } from "@/server/services/segment.service";

const TARGET_LABELS: Record<string, string> = {
  companies: "شركات",
  people: "أشخاص",
  contact_points: "نقاط اتصال",
  all: "الكل",
};

const FILTER_LABELS: Record<string, string> = {
  q: "بحث",
  entityType: "نوع الكيان",
  sector: "القطاع",
  city: "المدينة",
  priority: "الأولوية",
  dataConfidence: "الثقة",
  hasEmail: "لديه بريد",
  hasMobile: "لديه جوال",
  minLeadScore: "أقل نقاط",
  recommendedService: "الخدمة المقترحة",
  companyId: "الشركة",
  jobTitle: "المسمى",
  seniorityLevel: "المستوى",
  isDecisionMaker: "صانع قرار",
  contactType: "نوع الاتصال",
  isVerified: "موثق",
  emailStatuses: "جودة البريد",
};

function formatFilterValue(key: string, value: unknown): string {
  if (key === "emailStatuses" && Array.isArray(value)) {
    return value
      .map((item) => EMAIL_STATUS_LABELS[item as keyof typeof EMAIL_STATUS_LABELS] ?? String(item))
      .join("، ");
  }
  if (typeof value === "boolean") return value ? "نعم" : "لا";
  return String(value);
}

export default async function SegmentDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const segment = await getSegment(id);
  if (!segment) notFound();

  const [count, members] = await Promise.all([
    countSegmentMembers(id),
    getSegmentMembers(id, { page: 1, limit: 1000 }),
  ]);

  const sample = toClientJson<SegmentMemberRow[]>(members?.data ?? []);
  const targetType = segment.targetType as string;

  return (
    <SegmentDetailShell
      id={id}
      name={segment.name}
      description={segment.description}
      targetType={segment.targetType}
      type={segment.type}
      status={segment.status}
      memberCount={count ?? 0}
      actions={<SegmentActions id={id} status={segment.status as "active" | "inactive"} />}
    >
      {segment.type === "dynamic" ? (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">الفلاتر النشطة</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              نوع الهدف: {TARGET_LABELS[targetType] ?? targetType}
            </p>
            <ul className="mt-3 grid gap-2 text-sm sm:grid-cols-2">
              {Object.entries((segment.filters ?? {}) as Record<string, unknown>)
                .filter(([, v]) => v !== "" && v !== undefined && v !== null)
                .map(([key, value]) => (
                  <li
                    key={key}
                    className="rounded-lg border border-border bg-muted/30 px-3 py-2"
                  >
                    <span className="text-muted-foreground">
                      {FILTER_LABELS[key] ?? key}:{" "}
                    </span>
                    <span className="font-medium">{formatFilterValue(key, value)}</span>
                  </li>
                ))}
            </ul>
          </CardContent>
        </Card>
      ) : (
        <StaticSegmentManager
          segmentId={id}
          targetType={
            targetType as "companies" | "people" | "contact_points" | "all"
          }
        />
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">معاينة الأعضاء</CardTitle>
        </CardHeader>
        <CardContent>
          <SegmentMembersClient
            segmentId={id}
            targetType={targetType}
            targetChannel={(segment.targetChannel as string) ?? "any"}
            initialStats={members?.dedup ?? undefined}
            initialRows={sample}
            initialPagination={
              members?.pagination ?? {
                page: 1,
                limit: 1000,
                total: count ?? 0,
                totalPages: 1,
              }
            }
          />
        </CardContent>
      </Card>
    </SegmentDetailShell>
  );
}