/**
 * Danger Zone Tab Component
 * Data export and account deletion
 */

"use client";

import { useState } from "react";
import type { Lang } from "@/lib/config";

interface DangerZoneTabProps {
  lang: Lang;
}

export default function DangerZoneTab({ lang }: DangerZoneTabProps) {
  const isAr = lang === "ar";
  const [exportingData, setExportingData] = useState(false);
  const [exportSuccess, setExportSuccess] = useState(false);

  const handleExportData = async () => {
    setExportingData(true);
    setExportSuccess(false);

    try {
      const csrfResponse = await fetch("/api/csrf");
      const { csrfToken } = await csrfResponse.json();

      const response = await fetch("/api/user/export-data", {
        method: "POST",
        headers: {
          "x-csrf-token": csrfToken,
        },
      });

      const data = await response.json();

      if (data.success) {
        setExportSuccess(true);
        alert(
          isAr
            ? "✓ تم طلب تصدير البيانات. ستتلقى رابط التنزيل عبر البريد الإلكتروني خلال دقائق."
            : "✓ Data export requested. You will receive a download link via email within minutes.",
        );
      } else {
        alert(
          data.error || (isAr ? "فشل تصدير البيانات" : "Failed to export data"),
        );
      }
    } catch (err) {
      console.error("Failed to export data:", err);
      alert(isAr ? "حدث خطأ" : "An error occurred");
    } finally {
      setExportingData(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">
          {isAr ? "إعدادات متقدمة" : "Advanced Settings"}
        </h2>
        <p className="text-sm text-slate-600 mt-1">
          {isAr
            ? "تصدير البيانات وإدارة الحساب"
            : "Data export and account management"}
        </p>
      </div>

      {/* Data Export Section */}
      <div className="rounded-lg border-2 border-blue-200 bg-blue-50 p-6">
        <div className="flex items-start gap-4">
          <div className="text-3xl">📦</div>
          <div className="flex-1">
            <h3 className="text-base font-semibold text-slate-900 mb-2">
              {isAr ? "تصدير بياناتك" : "Export Your Data"}
            </h3>
            <p className="text-sm text-slate-600 mb-4">
              {isAr
                ? "قم بتنزيل جميع بياناتك بتنسيق JSON. يشمل الملف الشخصي، الحجوزات، المحادثات، والفواتير."
                : "Download all your data in JSON format. Includes profile, bookings, conversations, and billing history."}
            </p>
            <button
              onClick={handleExportData}
              disabled={exportingData}
              className="rounded-lg border-2 border-blue-600 bg-white px-6 py-2.5 text-sm font-semibold text-blue-700 hover:bg-blue-50 transition-all disabled:opacity-50"
            >
              {exportingData
                ? isAr
                  ? "جاري التحضير..."
                  : "Preparing export..."
                : isAr
                  ? "📥 تصدير البيانات"
                  : "📥 Export Data"}
            </button>
            <p className="text-xs text-slate-500 mt-2">
              {isAr
                ? "ستتلقى رابط التنزيل عبر البريد الإلكتروني خلال 5-10 دقائق"
                : "You will receive a download link via email within 5-10 minutes"}
            </p>
          </div>
        </div>
      </div>

      {/* Account Deletion Section */}
      <div className="rounded-lg border-2 border-red-300 bg-red-50 p-6">
        <div className="flex items-start gap-4">
          <div className="text-3xl">⚠️</div>
          <div className="flex-1">
            <h3 className="text-base font-semibold text-red-900 mb-2">
              {isAr ? "حذف الحساب" : "Delete Account"}
            </h3>
            <p className="text-sm text-red-700 mb-4">
              {isAr
                ? "⚠️ تحذير: هذا الإجراء لا يمكن التراجع عنه. سيتم حذف جميع بياناتك بشكل دائم بعد 30 يومًا."
                : "⚠️ Warning: This action cannot be undone. All your data will be permanently deleted after 30 days."}
            </p>
            <Link
              href={`/${lang}/dashboard/delete-account`}
              className="rounded-lg border-2 border-red-600 bg-white px-6 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100 transition-all inline-block"
            >
              {isAr ? "🗑️ حذف الحساب" : "🗑️ Delete Account"}
            </Link>
            <p className="text-xs text-red-600 mt-3">
              {isAr
                ? "سيُطلب منك تأكيد متعدد وإدخال كلمة المرور"
                : "You will be required to provide multiple confirmations and enter your password"}
            </p>
          </div>
        </div>
      </div>

      {/* Support Info */}
      <div className="rounded-lg bg-slate-50 border border-slate-200 p-6">
        <h3 className="text-base font-semibold text-slate-900 mb-3">
          {isAr ? "تحتاج مساعدة إضافية؟" : "Need Additional Help?"}
        </h3>
        <div className="space-y-2 text-sm text-slate-700">
          <p>
            📧 <strong>{isAr ? "البريد الإلكتروني:" : "Email:"}</strong>{" "}
            <a
              href="mailto:support@mawidi.com"
              className="text-brand-green hover:underline"
            >
              support@mawidi.com
            </a>
          </p>
          <p>
            💬 <strong>{isAr ? "واتساب:" : "WhatsApp:"}</strong>{" "}
            <a
              href="https://wa.me/97412345678"
              className="text-brand-green hover:underline"
              target="_blank"
              rel="noopener noreferrer"
            >
              +974 1234 5678
            </a>
          </p>
          <p>
            🕐 <strong>{isAr ? "ساعات العمل:" : "Business Hours:"}</strong>{" "}
            {isAr
              ? "الأحد - الخميس، 9 صباحًا - 6 مساءً (GST)"
              : "Sunday - Thursday, 9 AM - 6 PM (GST)"}
          </p>
        </div>
      </div>
    </div>
  );
}