import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { notFound } from "next/navigation";
import { toClientJson } from "@/lib/serialize";
import { CampaignActionsBar } from "@/components/campaigns/campaign-actions-bar";
import { CampaignDetailShell } from "@/components/campaigns/campaign-detail-shell";
import { CampaignOperations } from "@/components/campaigns/campaign-operations";
import { CampaignRecipientPreview } from "@/components/campaigns/campaign-recipient-preview";
import { CampaignDuplicateButton } from "@/components/campaigns/campaign-duplicate-button";
import { CreateSequenceFromCampaignButton } from "@/components/campaigns/create-sequence-from-campaign";
import { CampaignStats } from "@/components/campaigns/campaign-stats";
import { ActivityTimeline } from "@/components/timeline/activity-timeline";
import {
  getCampaign,
  getCampaignRecipientPreviewFromDb,
  getCampaignRecipientSummary,
  getCampaignRecipients,
} from "@/server/services/campaign.service";
import { getDefaultMailbox } from "@/server/services/mailbox-settings.service";

function extractRefId(value: unknown): string {
  if (!value) return "";
  if (typeof value === "string") return value;
  if (typeof value === "object" && value !== null && "_id" in value) {
    return String((value as { _id?: unknown })._id ?? "");
  }
  return String(value);
}

const EMPTY_STATS = {
  totalRecipients: 0,
  sent: 0,
  delivered: 0,
  opened: 0,
  clicked: 0,
  replied: 0,
  bounced: 0,
  unsubscribed: 0,
  convertedToLead: 0,
};

export default async function CampaignDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const campaign = await getCampaign(id);
  if (!campaign) notFound();

  const [recipients, preview, recipientSummary, defaultMailbox] = await Promise.all([
    getCampaignRecipients(id, { page: 1, limit: 25 }),
    getCampaignRecipientPreviewFromDb(id),
    getCampaignRecipientSummary(id),
    getDefaultMailbox(),
  ]);

  const mailboxPopulated = campaign.mailboxId as
    | { name?: string; email?: string; _id?: unknown }
    | string
    | null
    | undefined;
  const mailboxIdStr =
    typeof mailboxPopulated === "object" && mailboxPopulated !== null && "_id" in mailboxPopulated
      ? String(mailboxPopulated._id)
      : mailboxPopulated
        ? String(mailboxPopulated)
        : null;
  const mailboxLabel =
    typeof mailboxPopulated === "object" && mailboxPopulated !== null
      ? `${mailboxPopulated.name ?? ""} <${mailboxPopulated.email ?? ""}>`.trim()
      : defaultMailbox
        ? `${defaultMailbox.name} <${defaultMailbox.email}>`
        : null;
  const usesEnvFallback = !mailboxIdStr && !defaultMailbox;

  const firstPendingRecipientId = (recipients?.data ?? []).find((r) =>
    ["pending", "queued"].includes(r.status)
  )?._id;

  return (
    <CampaignDetailShell
      id={id}
      name={campaign.name}
      description={campaign.description}
      status={campaign.status}
      segmentName={(campaign.segmentId as { name?: string })?.name}
      templateName={(campaign.templateId as { name?: string })?.name}
      mailboxLabel={mailboxLabel}
      usesEnvFallback={usesEnvFallback}
    >
      <CampaignActionsBar>
        <CampaignOperations
          campaignId={id}
          status={campaign.status as "draft" | "scheduled" | "sending" | "sent" | "paused" | "completed" | "failed" | "archived"}
          mailboxId={mailboxIdStr}
          defaultMailboxId={defaultMailbox?._id ? String(defaultMailbox._id) : null}
          sentCount={recipientSummary.sent}
          recipientTotal={recipientSummary.total}
          firstPendingRecipientId={
            firstPendingRecipientId ? String(firstPendingRecipientId) : undefined
          }
        />
      </CampaignActionsBar>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">تفاصيل الحملة</CardTitle>
        </CardHeader>
        <CardContent>
        <dl className="grid gap-2 text-sm md:grid-cols-2">
          <div>
            <dt className="text-muted-foreground">البريد المرسل</dt>
            <dd>{campaign.senderEmail ?? "—"}</dd>
          </div>
          <div>
            <dt className="text-muted-foreground">الحالة</dt>
            <dd>{campaign.status}</dd>
          </div>
        </dl>
        <div className="mt-4 flex flex-wrap gap-2">
          <CreateSequenceFromCampaignButton campaignId={id} />
          {["sent", "completed"].includes(campaign.status) ? (
            <CampaignDuplicateButton
              campaignId={id}
              templateId={extractRefId(campaign.templateId) || undefined}
              label="نسخ كحملة جديدة لتغيير القالب"
            />
          ) : null}
        </div>
        </CardContent>
      </Card>

      <CampaignStats stats={toClientJson(campaign.stats ?? EMPTY_STATS)} />

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">إحصائيات المستلمين</CardTitle>
        </CardHeader>
        <CardContent>
          <dl className="grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-5">
            <div>
              <dt className="text-muted-foreground">إجمالي المستلمين</dt>
              <dd className="font-medium">{recipientSummary.totalRecipients}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">قيد الإرسال</dt>
              <dd className="font-medium">{recipientSummary.pending}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">مرسل</dt>
              <dd className="font-medium">{recipientSummary.sent}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">فاشل</dt>
              <dd className="font-medium">{recipientSummary.failed}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">مكرر (متخطى)</dt>
              <dd className="font-medium">{recipientSummary.skippedDuplicate}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">مستبعد</dt>
              <dd className="font-medium">{recipientSummary.skippedSuppressed}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">بريد غير صالح</dt>
              <dd className="font-medium">{recipientSummary.skippedInvalid}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">مفتوح</dt>
              <dd className="font-medium">{recipientSummary.opened}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">نقر</dt>
              <dd className="font-medium">{recipientSummary.clicked}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">رد</dt>
              <dd className="font-medium">{recipientSummary.replied}</dd>
            </div>
          </dl>
        </CardContent>
      </Card>

      <CampaignRecipientPreview preview={preview ? toClientJson(preview) : null} />

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">سجل النشاط</CardTitle>
        </CardHeader>
        <CardContent>
          <ActivityTimeline campaignId={id} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">المستلمين (المحفوظين)</CardTitle>
        </CardHeader>
        <CardContent>
        <div className="data-table-scroll overflow-x-auto rounded-xl border border-border">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="bg-muted text-muted-foreground">
                <th className="px-3 py-2 text-right">الشركة</th>
                <th className="px-3 py-2 text-right">الشخص</th>
                <th className="px-3 py-2 text-right">البريد</th>
                <th className="px-3 py-2 text-right">الحالة</th>
                <th className="px-3 py-2 text-right">تاريخ الإرسال</th>
                <th className="px-3 py-2 text-right">الفتح</th>
                <th className="px-3 py-2 text-right">النقر</th>
                <th className="px-3 py-2 text-right">سبب التخطي</th>
              </tr>
            </thead>
            <tbody>
              {(recipients?.data ?? []).map((recipient) => (
                <tr key={String(recipient._id)} className="border-t border-border/50 hover:bg-primary/5">
                  <td className="px-3 py-2">{recipient.companyName || "—"}</td>
                  <td className="px-3 py-2">{recipient.personName || "—"}</td>
                  <td className="px-3 py-2">{recipient.email || "—"}</td>
                  <td className="px-3 py-2">{recipient.status}</td>
                  <td className="px-3 py-2">{recipient.sentAt ? new Date(recipient.sentAt).toLocaleString("ar-SA") : "—"}</td>
                  <td className="px-3 py-2">{recipient.openedAt ? new Date(recipient.openedAt).toLocaleString("ar-SA") : "—"}</td>
                  <td className="px-3 py-2">{recipient.clickedAt ? new Date(recipient.clickedAt).toLocaleString("ar-SA") : "—"}</td>
                  <td className="px-3 py-2">{recipient.skipReason || recipient.errorMessage || "—"}</td>
                </tr>
              ))}
              {(recipients?.data?.length ?? 0) === 0 ? (
                <tr>
                  <td colSpan={8} className="px-3 py-4 text-center text-muted-foreground">
                    لا يوجد مستلمين محفوظين — استخدم «توليد المستلمين» من شريط الإجراءات
                  </td>
                </tr>
              ) : null}
            </tbody>
          </table>
        </div>
        </CardContent>
      </Card>
    </CampaignDetailShell>
  );
}