"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { StatusToast } from "@/components/ui/status-toast";

type BackfillResult = {
  companiesUpdated: number;
  peopleUpdated: number;
  contactsUpdated: number;
  emailsValidated: number;
  activitiesCreated: number;
  issues: string[];
};

export function MaintenanceClient() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<BackfillResult | null>(null);
  const [toast, setToast] = useState<{ message: string; variant: "success" | "error" } | null>(
    null
  );

  async function runBackfill() {
    if (loading) return;
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/admin/maintenance/backfill-crm-foundation", {
        method: "POST",
      });
      const json = await res.json();
      if (!res.ok) {
        setToast({ message: json.error ?? "فشل الإصلاح", variant: "error" });
        return;
      }
      setResult(json.data as BackfillResult);
      setToast({ message: "تم إصلاح وربط البيانات", variant: "success" });
    } catch {
      setToast({ message: "فشل الاتصال", variant: "error" });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-4">
      <StatusToast
        message={toast?.message ?? null}
        variant={toast?.variant}
        onDismiss={() => setToast(null)}
      />
      <p className="text-sm text-muted-foreground">
        يقوم هذا الإجراء بتطبيع البريد الإلكتروني، تصنيفه، ربط الأشخاص بالشركات، وربط نقاط
        الاتصال، وإنشاء سجلات زمنية مفقودة حيثما أمكن.
      </p>
      <Button type="button" onClick={() => void runBackfill()} disabled={loading}>
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
        {loading ? "جاري الإصلاح..." : "إصلاح وربط البيانات الحالية"}
      </Button>

      {result ? (
        <div className="rounded-lg border border-border bg-card p-4 text-sm">
          <p>شركات محدّثة: {result.companiesUpdated}</p>
          <p>أشخاص محدّثون: {result.peopleUpdated}</p>
          <p>جهات اتصال محدّثة: {result.contactsUpdated}</p>
          <p>بريد مصنّف: {result.emailsValidated}</p>
          <p>أنشطة أُنشئت: {result.activitiesCreated}</p>
          {result.issues.length > 0 ? (
            <div className="mt-3">
              <p className="font-medium">ملاحظات:</p>
              <ul className="mt-1 list-disc ps-5 text-muted-foreground">
                {result.issues.slice(0, 10).map((issue) => (
                  <li key={issue}>{issue}</li>
                ))}
              </ul>
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}