"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import IconRefresh from "@/components/icon/icon-refresh";
import IconPlus from "@/components/icon/icon-plus";
import IconTrashLines from "@/components/icon/icon-trash-lines";
import IconServer from "@/components/icon/icon-server";
import IconLoader from "@/components/icon/icon-loader";

const API_BASE_URL = "/api/hestia";

const SSLChecker = () => {
  const [domains, setDomains] = useState<any[]>([]);
  const [filteredDomains, setFilteredDomains] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState<{ [key: string]: string | null }>({});
  const [globalLoading, setGlobalLoading] = useState(false);
  const [checkingExpiry, setCheckingExpiry] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  // Filter states
  const [search, setSearch] = useState("");
  const [filterStatus, setFilterStatus] = useState<'all' | 'secured' | 'unsecured' | 'expiring'>('all');

  const fetchDomains = async () => {
    setLoading(true);
    try {
      const res = await axios.get(`${API_BASE_URL}/dns/domains`);
      const rawParsed = res.data.rawParsed || [];
      // If rawParsed is empty but domains exists (simple list), mapped it to objects for consistency
      // but user provided rawParsed structure, so we prioritize that.
      setDomains(rawParsed);
      setFilteredDomains(rawParsed);
    } catch (error) {
      console.error("Error fetching domains:", error);
      setMessage({ type: 'error', text: "Failed to fetch domains." });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDomains();
  }, []);

  // Filter Logic
  useEffect(() => {
    let result = domains;

    // Search
    if (search) {
      result = result.filter(d => d.domain.toLowerCase().includes(search.toLowerCase()));
    }

    // Status Filter
    if (filterStatus === 'secured') {
      result = result.filter(d => d.ssl && d.ssl.success);
    } else if (filterStatus === 'unsecured') {
      result = result.filter(d => !d.ssl || !d.ssl.success);
    } else if (filterStatus === 'expiring') {
      const today = new Date();
      const oneDayMs = 24 * 60 * 60 * 1000;
      result = result.filter(d => {
        if (!d.ssl || !d.ssl.success || !d.ssl.notAfter) return false;
        const expiryDate = new Date(d.ssl.notAfter);
        const diffTime = expiryDate.getTime() - today.getTime();
        const diffDays = Math.ceil(diffTime / oneDayMs);
        return diffDays <= 7; // Show warning for 7 days in UI, though email is 1 day
      });
    }

    setFilteredDomains(result);
  }, [search, filterStatus, domains]);


  const handleAction = async (domain: string, action: 'add' | 'remove' | 'refresh') => {
    setActionLoading(prev => ({ ...prev, [domain]: action }));
    setMessage(null);
    try {
      const endpoint = action === 'add' ? '/ssl/add'
        : action === 'remove' ? '/ssl/remove'
          : '/ssl/refresh';

      // Note: The API likely expects just { domain: "example.com" }
      await axios.post(`${API_BASE_URL}${endpoint}`, { domain });
      setMessage({ type: 'success', text: `Successfully ${action}ed SSL for ${domain}` });

      // Refresh list to update status
      fetchDomains();
    } catch (error: any) {
      console.error(`Error during ${action} SSL:`, error);
      setMessage({ type: 'error', text: `Failed to ${action} SSL for ${domain}: ${error.response?.data?.message || error.message}` });
    } finally {
      setActionLoading(prev => ({ ...prev, [domain]: null }));
    }
  };

  const handleRefreshAll = async () => {
    setGlobalLoading(true);
    setMessage(null);
    try {
      await axios.post(`${API_BASE_URL}/ssl/refresh-all`);
      setMessage({ type: 'success', text: "Initiated SSL refresh for all domains." });
      setTimeout(fetchDomains, 2000); // Wait a bit then refresh list
    } catch (error: any) {
      console.error("Error refreshing all SSL:", error);
      setMessage({ type: 'error', text: `Failed to refresh all SSL: ${error.response?.data?.message || error.message}` });
    } finally {
      setGlobalLoading(false);
    }
  };

  const handleCheckExpiryAndNotify = async () => {
    setCheckingExpiry(true);
    setMessage(null);
    try {
      const res = await axios.post('/api/send-expiry-alert', { domains });
      if (res.data.success) {
        setMessage({ type: 'success', text: res.data.message });
      } else {
        setMessage({ type: 'error', text: "Failed to process expiry check." });
      }
    } catch (error: any) {
      console.error("Error checking expiry:", error);
      setMessage({ type: 'error', text: "Error checking expiry: " + error.message });
    } finally {
      setCheckingExpiry(false);
    }
  };

  const getDaysRemaining = (dateStr?: string) => {
    if (!dateStr) return null;
    const today = new Date();
    const expiryDate = new Date(dateStr);
    const diffTime = expiryDate.getTime() - today.getTime();
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  };

  return (
    <div className="panel">
      <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h5 className="text-lg font-semibold dark:text-white-light">SSL Management</h5>
        <div className="flex gap-2">
          <button
            onClick={handleCheckExpiryAndNotify}
            disabled={checkingExpiry}
            className="btn btn-warning flex items-center gap-2"
            title="Check for expiring certs and send email alert"
          >
            {checkingExpiry ? <IconLoader className="animate-spin" /> : null}
            Check & Notify Expiry
          </button>
          <button
            onClick={handleRefreshAll}
            disabled={globalLoading}
            className="btn btn-primary flex items-center gap-2"
          >
            {globalLoading ? <IconLoader className="animate-spin" /> : <IconRefresh />}
            Refresh All SSL
          </button>
        </div>
      </div>

      {message && (
        <div className={`mb-4 rounded p-4 text-white ${message.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
          {message.text}
        </div>
      )}

      <div className="mb-5 flex flex-col gap-4 md:flex-row md:items-center">
        <div className="flex-1">
          <input
            type="text"
            className="form-input"
            placeholder="Search domains..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        <div className="flex gap-2">
          <button type="button" className={`btn ${filterStatus === 'all' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setFilterStatus('all')}>All</button>
          <button type="button" className={`btn ${filterStatus === 'secured' ? 'btn-success' : 'btn-outline-success'}`} onClick={() => setFilterStatus('secured')}>Secured</button>
          <button type="button" className={`btn ${filterStatus === 'unsecured' ? 'btn-danger' : 'btn-outline-danger'}`} onClick={() => setFilterStatus('unsecured')}>No SSL</button>
          <button type="button" className={`btn ${filterStatus === 'expiring' ? 'btn-warning' : 'btn-outline-warning'}`} onClick={() => setFilterStatus('expiring')}>Expiring Soon</button>
        </div>
      </div>

      <div className="table-responsive">
        <table className="table-hover table-striped">
          <thead>
            <tr>
              <th>Domain</th>
              <th>IP Address</th>
              <th>SSL Status</th>
              <th>Expiry</th>
              <th className="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td colSpan={5} className="text-center py-5">
                  <div className="flex justify-center items-center">
                    <IconLoader className="animate-spin w-8 h-8 text-primary" />
                  </div>
                </td>
              </tr>
            ) : filteredDomains.length === 0 ? (
              <tr>
                <td colSpan={5} className="text-center py-5">No domains found matching criteria.</td>
              </tr>
            ) : (
              filteredDomains.map((item: any, index: number) => {
                const hasSSL = item.ssl && item.ssl.success;
                const daysLeft = getDaysRemaining(item.ssl?.notAfter);
                const isExpiring = daysLeft !== null && daysLeft <= 30; // Visible warning for 30 days
                const isCritical = daysLeft !== null && daysLeft <= 3;  // Critical warning

                return (
                  <tr key={index} className={isCritical ? "bg-red-50 dark:bg-red-900/20" : ""}>
                    <td className="font-medium">{item.domain}</td>
                    <td>{item.ip}</td>
                    <td>
                      {hasSSL ? (
                        <span className="badge badge-outline-success">Secured</span>
                      ) : (
                        <span className="badge badge-outline-danger">Not Secured</span>
                      )}
                    </td>
                    <td>
                      {hasSSL && item.ssl.notAfter ? (
                        <div className="flex flex-col">
                          <span className={`text-xs ${isExpiring ? 'text-red-500 font-bold' : ''}`}>
                            {new Date(item.ssl.notAfter).toLocaleDateString()}
                          </span>
                          <span className="text-[10px] text-gray-500">
                            {daysLeft} days left
                          </span>
                        </div>
                      ) : (
                        <span className="text-gray-400">-</span>
                      )}
                    </td>
                    <td>
                      <div className="flex items-center justify-center gap-2">
                        {!hasSSL && (
                          <button
                            onClick={() => handleAction(item.domain, 'add')}
                            disabled={!!actionLoading[item.domain]}
                            className="btn btn-sm btn-outline-success flex items-center gap-1"
                            title="Add SSL"
                          >
                            {actionLoading[item.domain] === 'add' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconPlus className="w-4 h-4" />}
                            Add
                          </button>
                        )}

                        <button
                          onClick={() => handleAction(item.domain, 'refresh')}
                          disabled={!!actionLoading[item.domain]}
                          className="btn btn-sm btn-outline-primary flex items-center gap-1"
                          title="Refresh SSL"
                        >
                          {actionLoading[item.domain] === 'refresh' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconRefresh className="w-4 h-4" />}
                          Renew
                        </button>

                        <button
                          onClick={() => handleAction(item.domain, 'remove')}
                          disabled={!!actionLoading[item.domain]}
                          className="btn btn-sm btn-outline-danger flex items-center gap-1"
                          title="Remove SSL"
                        >
                          {actionLoading[item.domain] === 'remove' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconTrashLines className="w-4 h-4" />}
                          Remove
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default SSLChecker;