"use client";

import { Mail, Workflow } from "lucide-react";
import { ProfileHero } from "@/components/design-system/profile-hero";
import { Badge } from "@/components/ui/badge";
import { useLocale } from "@/components/providers/locale-provider";

export function SequenceDetailShell({
  name,
  description,
  status,
  segmentName,
  mailboxLabel,
  usesEnvFallback,
  children,
}: {
  id: string;
  name: string;
  description?: string | null;
  status: string;
  segmentName?: string;
  mailboxLabel?: string | null;
  usesEnvFallback?: boolean;
  children: React.ReactNode;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";

  return (
    <div className="animate-fade-in space-y-6">
      <ProfileHero
        icon={Workflow}
        title={name}
        subtitle={description ?? undefined}
        badges={
          <>
            <Badge variant="secondary">{status}</Badge>
            {segmentName ? (
              <Badge variant="secondary">
                {isAr ? "شريحة" : "Segment"}: {segmentName}
              </Badge>
            ) : null}
          </>
        }
        backHref="/sequences"
        backLabel={isAr ? "← العودة للسلاسل" : "← Back to sequences"}
      />

      <div className="surface-elevated flex flex-col gap-2 rounded-xl border border-border p-4 text-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-6">
        <div className="flex min-w-0 items-start gap-2">
          <Mail className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
          <div>
            <p className="text-muted-foreground">{isAr ? "الإرسال عبر" : "Sending via"}</p>
            {usesEnvFallback ? (
              <p className="text-amber-700">
                {isAr
                  ? "لم يتم اختيار صندوق بريد. سيتم استخدام إعدادات البيئة .env إن وجدت."
                  : "No mailbox selected. Environment .env settings will be used if configured."}
              </p>
            ) : (
              <p className="font-medium">{mailboxLabel ?? "—"}</p>
            )}
          </div>
        </div>
      </div>

      {children}
    </div>
  );
}