import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useLoaderData } from "@remix-run/react";
import { requireAuthLevel } from "~/utils/auth.server";
import { testEmailConnection } from "~/utils/mail.server";
import DashboardLayout from "~/components/DashboardLayout";
import { useState } from "react";
import { prisma } from "~/utils/db.server";
import { encryptMailSettings, decryptMailSettings, safeEncryptPassword, migrateEncryption } from "~/utils/encryption.server";

export async function loader({ request }: LoaderFunctionArgs) {
  // Require auth level 3 to access mail settings
  const user = await requireAuthLevel(request, 3);

  const encryptedMailSettings = await prisma.mailSettings.findFirst();
  
  // Decrypt settings for display (but mask the password)
  let mailSettings = null;
  if (encryptedMailSettings) {
    try {
      const decrypted = decryptMailSettings(encryptedMailSettings);
      mailSettings = {
        ...decrypted,
        password: '••••••••' // Mask password for security
      };
    } catch (error) {
      console.error('Failed to decrypt mail settings:', error);
      // Return settings with masked password if decryption fails
      mailSettings = {
        host: encryptedMailSettings.host,
        port: encryptedMailSettings.port,
        secure: encryptedMailSettings.secure,
        username: encryptedMailSettings.username,
        password: '••••••••', // Mask password
        fromName: encryptedMailSettings.fromName,
        fromEmail: encryptedMailSettings.fromEmail,
      };
    }
  }

  return json({ mailSettings, user });
}

export async function action({ request }: ActionFunctionArgs) {
  // Require auth level 3 to modify mail settings
  await requireAuthLevel(request, 3);

  const formData = await request.formData();
  const action = formData.get("_action");

  if (action === "test") {
    const result = await testEmailConnection();
    return json(result);
  }

  const host = formData.get("host") as string;
  const port = parseInt(formData.get("port") as string);
  const secure = formData.get("secure") === "on";
  const username = formData.get("username") as string;
  const password = formData.get("password") as string;
  const fromName = formData.get("fromName") as string;
  const fromEmail = formData.get("fromEmail") as string;

  if (!host || !port || !username || !password || !fromName || !fromEmail) {
    return json({ error: "All fields are required" }, { status: 400 });
  }

  try {
    // Encrypt the password before saving
    let encryptedPassword: string;
    
    // If password is the masked value, keep the existing password
    if (password === '••••••••') {
      const existingSettings = await prisma.mailSettings.findFirst();
      if (existingSettings) {
        // Migrate existing password to new format if needed
        encryptedPassword = migrateEncryption(existingSettings.password);
      } else {
        return json({ error: "Cannot save without a valid password" }, { status: 400 });
      }
    } else {
      encryptedPassword = safeEncryptPassword(password);
    }
    
    // Check if settings exist
    const existingSettings = await prisma.mailSettings.findFirst();

    if (existingSettings) {
      // Update existing settings
      await prisma.mailSettings.update({
        where: { id: existingSettings.id },
        data: {
          host,
          port,
          secure,
          username,
          password: encryptedPassword, // Store encrypted password
          fromName,
          fromEmail,
        },
      });
    } else {
      // Create new settings
      await prisma.mailSettings.create({
        data: {
          host,
          port,
          secure,
          username,
          password: encryptedPassword, // Store encrypted password
          fromName,
          fromEmail,
        },
      });
    }

    return json({ success: "Mail settings saved successfully" });
  } catch (error) {
    console.error("Mail settings save error:", error);
    return json({ error: "Failed to save mail settings" }, { status: 500 });
  }
}

export default function MailSettings() {
  const { mailSettings, user } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const [showPassword, setShowPassword] = useState(false);

  return (
    <DashboardLayout user={user}>
      <div className="max-w-2xl mx-auto p-4 sm:p-6">
        <h1 className="text-xl sm:text-2xl font-bold mb-6">Mail Settings</h1>

        {/* SMTP Configuration Examples */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
          <h3 className="text-base sm:text-lg font-semibold text-blue-800 mb-2">Common SMTP Settings</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
            <div>
              <h4 className="font-medium text-blue-700">Gmail</h4>
              <p>Host: smtp.gmail.com</p>
              <p>Port: 587 (TLS) or 465 (SSL)</p>
              <p>Note: Use App Password, not regular password</p>
            </div>
            <div>
              <h4 className="font-medium text-blue-700">Outlook/Hotmail</h4>
              <p>Host: smtp-mail.outlook.com</p>
              <p>Port: 587 (TLS)</p>
              <p>Secure: No (uses STARTTLS)</p>
            </div>
            <div>
              <h4 className="font-medium text-blue-700">Yahoo</h4>
              <p>Host: smtp.mail.yahoo.com</p>
              <p>Port: 587 (TLS) or 465 (SSL)</p>
              <p>Note: Enable "Less secure apps"</p>
            </div>
            <div>
              <h4 className="font-medium text-blue-700">Custom SMTP</h4>
              <p>Contact your email provider</p>
              <p>Port 587 (TLS) is most common</p>
              <p>Port 465 (SSL) for secure connections</p>
            </div>
          </div>
        </div>

        {actionData?.error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {actionData.error}
          </div>
        )}

        {actionData?.success && (
          <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {actionData.success}
          </div>
        )}

        <Form method="post" className="space-y-4">
          <div>
            <label htmlFor="host" className="block text-sm font-medium text-gray-700">
              SMTP Host
            </label>
            <input
              type="text"
              id="host"
              name="host"
              defaultValue={mailSettings?.host || ""}
              className="mt-1 p-2 h-9 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              placeholder="smtp.gmail.com"
              required
            />
          </div>

          <div>
            <label htmlFor="port" className="block text-sm font-medium text-gray-700">
              SMTP Port
            </label>
            <input
              type="number"
              id="port"
              name="port"
              defaultValue={mailSettings?.port || 587}
              className="mt-1 block p-2 h-9 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              required
            />
          </div>

          <div>
            <label className="flex items-center">
              <input
                type="checkbox"
                name="secure"
                defaultChecked={mailSettings?.secure || false}
                className="rounded p-2 h-9 border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              />
              <span className="ml-2 text-sm text-gray-700">Use SSL/TLS</span>
            </label>
          </div>

          <div>
            <label htmlFor="username" className="block text-sm font-medium text-gray-700">
              Username
            </label>
            <input
              type="text"
              id="username"
              name="username"
              defaultValue={mailSettings?.username || ""}
              className="mt-1 block p-2 h-9 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              required
            />
          </div>

          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              Password
            </label>
            <div className="relative">
              <input
                type={showPassword ? "text" : "password"}
                id="password"
                name="password"
                defaultValue={mailSettings?.password || ""}
                className="mt-1 block w-full p-2 h-9 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 pr-10"
                required
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
              >
                {showPassword ? "Hide" : "Show"}
              </button>
            </div>
          </div>

          <div>
            <label htmlFor="fromName" className="block text-sm font-medium text-gray-700">
              From Name
            </label>
            <input
              type="text"
              id="fromName"
              name="fromName"
              defaultValue={mailSettings?.fromName || ""}
              className="mt-1 block w-full p-2 h-9 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              placeholder="Your Company Name"
              required
            />
          </div>

          <div>
            <label htmlFor="fromEmail" className="block text-sm font-medium text-gray-700">
              From Email
            </label>
            <input
              type="email"
              id="fromEmail"
              name="fromEmail"
              defaultValue={mailSettings?.fromEmail || ""}
              className="mt-1 block p-2 h-9 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              placeholder="noreply@yourcompany.com"
              required
            />
          </div>

          <div className="flex flex-col sm:flex-row sm:space-x-4 space-y-2 sm:space-y-0">
            <button
              type="submit"
              className="flex-1 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Save Mail Settings
            </button>

            <button
              type="submit"
              name="_action"
              value="test"
              className="flex-1 flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Test Connection
            </button>
          </div>
        </Form>
      </div>
    </DashboardLayout>
  );
}