import { MessageSquare, Phone, BookOpen } from "lucide-react";
import type { Lang } from "@/lib/config";
import type { FeatureName } from "@/components/dashboard/hooks/useFeatureAccess";
import type { IntegrationConfig } from "@/lib/types/dashboard.types";
import type { OrgRole } from "@/lib/types/organization.types";

interface IntegrationStatusCardsProps {
  lang: Lang;
  integrationConfig?: IntegrationConfig;
  knowledgeBaseDocCount: number;
  hasFeature: (feature: FeatureName) => boolean;
  organizationRole: OrgRole | null;
}

export function IntegrationStatusCards({
  lang,
  integrationConfig,
  knowledgeBaseDocCount,
  hasFeature,
  organizationRole,
}: IntegrationStatusCardsProps) {
  if (!integrationConfig || organizationRole === "STAFF") {
    return null;
  }

  const isAr = lang === "ar";

  return (
    <div className="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {hasFeature("whatsapp") && (
        integrationConfig.hasWhatsApp ? (
          <div className="rounded-xl p-4 border bg-emerald-50 border-emerald-200">
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-emerald-500">
                <MessageSquare className="w-5 h-5 text-white" />
              </div>
              <div>
                <p className="text-sm font-semibold text-slate-700">
                  {isAr ? "واتساب" : "WhatsApp"}
                </p>
                <p className="text-xs text-emerald-600">
                  {isAr ? "متصل" : "Connected"}
                </p>
              </div>
            </div>
          </div>
        ) : (
          <a
            href="?tab=whatsapp"
            className="rounded-xl p-4 border bg-slate-50 border-slate-200 cursor-pointer hover:bg-slate-100 hover:border-slate-300 transition-colors block"
          >
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-slate-300">
                <MessageSquare className="w-5 h-5 text-white" />
              </div>
              <div>
                <p className="text-sm font-semibold text-slate-700">
                  {isAr ? "واتساب" : "WhatsApp"}
                </p>
                <p className="text-xs text-slate-500">
                  {isAr ? "في انتظار الإعداد" : "Pending setup"}
                </p>
              </div>
            </div>
          </a>
        )
      )}

      {hasFeature("voiceReceptionist") && (
        <div
          className={`rounded-xl p-4 border ${integrationConfig.hasVoiceAgent ? "bg-emerald-50 border-emerald-200" : "bg-slate-50 border-slate-200"}`}
        >
          <div className="flex items-center gap-3">
            <div
              className={`p-2 rounded-lg ${integrationConfig.hasVoiceAgent ? "bg-emerald-500" : "bg-slate-300"}`}
            >
              <Phone className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-sm font-semibold text-slate-700">
                {isAr
                  ? "\u0648\u0643\u064a\u0644 \u0635\u0648\u062a\u064a"
                  : "Voice Agent"}
              </p>
              <p
                className={`text-xs ${integrationConfig.hasVoiceAgent ? "text-emerald-600" : "text-slate-500"}`}
              >
                {integrationConfig.hasVoiceAgent
                  ? isAr
                    ? "\u0646\u0634\u0637"
                    : "Active"
                  : isAr
                    ? "\u0641\u064a \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0644\u0625\u0639\u062f\u0627\u062f"
                    : "Pending setup"}
              </p>
            </div>
          </div>
        </div>
      )}

      {hasFeature("aiAgent") && (
        <div
          className={`rounded-xl p-4 border ${knowledgeBaseDocCount > 0 ? "bg-emerald-50 border-emerald-200" : "bg-slate-50 border-slate-200"}`}
        >
          <div className="flex items-center gap-3">
            <div
              className={`p-2 rounded-lg ${knowledgeBaseDocCount > 0 ? "bg-emerald-500" : "bg-slate-300"}`}
            >
              <BookOpen className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-sm font-semibold text-slate-700">
                {isAr
                  ? "\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u0639\u0631\u0641\u0629"
                  : "Knowledge Base"}
              </p>
              <p
                className={`text-xs ${knowledgeBaseDocCount > 0 ? "text-emerald-600" : "text-slate-500"}`}
              >
                {knowledgeBaseDocCount > 0
                  ? isAr
                    ? `${knowledgeBaseDocCount} \u0645\u0633\u062a\u0646\u062f`
                    : `${knowledgeBaseDocCount} document${knowledgeBaseDocCount > 1 ? "s" : ""}`
                  : isAr
                    ? "\u0641\u064a \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0644\u0625\u0639\u062f\u0627\u062f"
                    : "Pending setup"}
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default IntegrationStatusCards;