'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { api } from '@/lib/api';

interface ActionItem {
  priority: string;
  category: string;
  title: string;
  detail: string;
  url: string;
}

interface SummaryData {
  is_recruiter: boolean;
  is_hiring_manager: boolean;
  action_items: ActionItem[];
  interviews_today: any[];
  pending_approvals: any[];
}

interface PreviewResponse {
  ok: boolean;
  user_id: number;
  user_email: string;
  role: string;
  action_point_count: number;
  interviews_today_count: number;
  pending_approvals_count: number;
  ai_insight: string;
  summary_data: SummaryData;
  generated_html: string;
}

interface AgentLog {
  id: number;
  user_id: number;
  role: string;
  email_sent_to: string;
  subject: string;
  action_point_count: number;
  interviews_today_count: number;
  pending_approvals_count: number;
  email_status: string;
  ai_insight: string;
  generated_html?: string;
  error_message: string;
  created_at: string;
}

export default function MorningEfficiencyAgentPage() {
  const [loading, setLoading] = useState(true);
  const [previewData, setPreviewData] = useState<PreviewResponse | null>(null);
  const [logs, setLogs] = useState<AgentLog[]>([]);
  const [logsLoading, setLogsLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalLogs, setTotalLogs] = useState(0);
  const pageSize = 10;

  const [triggering, setTriggering] = useState(false);
  const [dryRun, setDryRun] = useState(true);
  const [selectedRole, setSelectedRole] = useState<string>('ALL');
  const [toastMessage, setToastMessage] = useState<string | null>(null);
  const [selectedLogModal, setSelectedLogModal] = useState<AgentLog | null>(null);

  const fetchPreview = async () => {
    setLoading(true);
    try {
      const res: any = await api.get('/agents/morning-efficiency/preview/');
      const data = res?.data ?? res;
      if (data && (data.ok || data.generated_html)) {
        setPreviewData(data);
      }
    } catch (err) {
      console.error('Failed fetching preview:', err);
    } finally {
      setLoading(false);
    }
  };

  const fetchLogs = async (page = 1) => {
    setLogsLoading(true);
    try {
      const res: any = await api.get(`/agents/morning-efficiency/logs/?page=${page}&page_size=${pageSize}`);
      const data = res?.data ?? res;
      if (data && data.logs) {
        setLogs(data.logs || []);
        setCurrentPage(data.current_page || page);
        setTotalPages(data.total_pages || 1);
        setTotalLogs(data.total_count || 0);
      }
    } catch (err) {
      console.error('Failed fetching logs:', err);
    } finally {
      setLogsLoading(false);
    }
  };

  useEffect(() => {
    fetchPreview();
    fetchLogs(1);
  }, []);

  const handleTrigger = async () => {
    setTriggering(true);
    try {
      const rolesPayload = selectedRole === 'ALL' ? null : [selectedRole];
      const data = (await api.post('/agents/morning-efficiency/trigger/', {
        roles: rolesPayload,
        dry_run: dryRun,
      })) as any;

      if (data && data.ok) {
        setToastMessage(
          `Success: Agent triggered for ${data.total_processed} users (${dryRun ? 'Dry Run Mode' : 'Emails Dispatched'})`
        );
        fetchLogs();
      } else {
        setToastMessage(`Error: ${data?.message || 'Trigger failed.'}`);
      }
    } catch (err) {
      setToastMessage('Error triggering agent execution.');
    } finally {
      setTriggering(false);
      setTimeout(() => setToastMessage(null), 5000);
    }
  };

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-8">
      {/* Toast Alert */}
      {toastMessage && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-indigo-600 text-white px-5 py-3 rounded-lg shadow-lg flex justify-between items-center"
        >
          <span className="font-semibold text-sm">{toastMessage}</span>
          <button
            onClick={() => setToastMessage(null)}
            className="text-white/80 hover:text-white text-xs font-bold"
          >
            ✕
          </button>
        </motion.div>
      )}

      {/* Top Banner / Hero Card */}
      <div className="bg-gradient-to-r from-[#405189] via-indigo-600 to-purple-600 rounded-2xl p-8 text-white shadow-xl relative overflow-hidden">
        <div className="absolute right-0 top-0 translate-x-10 -translate-y-10 opacity-10 pointer-events-none">
          <svg className="w-96 h-96" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
          </svg>
        </div>

        <div className="relative z-10 space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-md text-xs font-bold uppercase tracking-wider">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-ping" />
            AI Efficiency Agent Core
          </div>
          <h1 className="text-3xl font-extrabold tracking-tight">
            Morning Action Briefing Agent
          </h1>
          <p className="text-indigo-100 max-w-2xl text-sm leading-relaxed">
            Automatically aggregates daily high-priority action items for Recruiters, Project Managers, and Hiring Managers every morning. Uses LLM AI models to generate tailored efficiency strategies and delivers formatted email briefings.
          </p>

          <div className="pt-2 flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/15">
              <label className="text-xs font-medium">Target Role:</label>
              <select
                value={selectedRole}
                onChange={(e) => setSelectedRole(e.target.value)}
                className="bg-transparent text-xs font-bold focus:outline-none cursor-pointer border-b border-white/40 pb-0.5"
              >
                <option value="ALL" className="text-slate-900">All Stakeholders</option>
                <option value="RECRUITER" className="text-slate-900">Recruiters Only</option>
                <option value="ADMIN" className="text-slate-900">Admins & PMs Only</option>
                <option value="INTERVIEWER" className="text-slate-900">Interviewer Managers</option>
              </select>
            </div>

            <div className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/15">
              <input
                type="checkbox"
                id="dryRunCheck"
                checked={dryRun}
                onChange={(e) => setDryRun(e.target.checked)}
                className="rounded border-white/30 text-indigo-500 focus:ring-0 cursor-pointer"
              />
              <label htmlFor="dryRunCheck" className="text-xs font-bold cursor-pointer select-none">
                Dry-Run Mode (Preview Only)
              </label>
            </div>

            <button
              onClick={handleTrigger}
              disabled={triggering}
              className="bg-white text-indigo-900 hover:bg-indigo-50 px-6 py-2.5 rounded-lg font-bold text-sm shadow-md transition duration-200 flex items-center gap-2 disabled:opacity-50"
            >
              {triggering ? (
                <>
                  <svg className="animate-spin h-4 w-4 text-indigo-900" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                  </svg>
                  Processing Agent...
                </>
              ) : (
                <>
                  <span>⚡</span> Trigger Morning Agent
                </>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Main Grid Section: Preview & Live Stats */}
      <div className="grid grid-[#121212] lg:grid-cols-12 gap-8">
        
        {/* Left Column: Live Email Preview (8 cols) */}
        <div className="lg:col-span-8 space-y-4">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-lg font-bold text-slate-800 dark:text-slate-100">
                Live Briefing Email Preview
              </h2>
              <p className="text-xs text-slate-500">
                Actual HTML rendered & delivered to users by the Efficiency Agent
              </p>
            </div>
            <button
              onClick={fetchPreview}
              className="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:underline flex items-center gap-1"
            >
              🔄 Refresh Preview
            </button>
          </div>

          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-sm">
            {loading ? (
              <div className="p-12 text-center text-slate-400 text-sm font-medium">
                Generating live email preview...
              </div>
            ) : previewData ? (
              <div className="flex flex-col h-[700px]">
                {/* Email Header Info Bar */}
                <div className="bg-slate-50 dark:bg-slate-800/60 p-4 border-b border-slate-200 dark:border-slate-800 text-xs space-y-1">
                  <div className="flex justify-between">
                    <span className="text-slate-500 font-medium">To:</span>
                    <span className="font-bold text-slate-800 dark:text-slate-200">
                      {previewData.user_email} ({previewData.role})
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-slate-500 font-medium">Subject:</span>
                    <span className="font-semibold text-indigo-600 dark:text-indigo-400">
                      ⚡ Morning Action Briefing: {previewData.action_point_count} Action Point(s)
                    </span>
                  </div>
                </div>

                {/* HTML IFrame Container */}
                <iframe
                  title="Morning Email Preview"
                  srcDoc={previewData.generated_html}
                  className="w-full flex-1 border-none"
                />
              </div>
            ) : (
              <div className="p-8 text-center text-red-500 text-sm">
                Failed to load briefing preview.
              </div>
            )}
          </div>
        </div>

        {/* Right Column: Key Breakdown & Stats (4 cols) */}
        <div className="lg:col-span-4 space-y-6">
          <h2 className="text-lg font-bold text-slate-800 dark:text-slate-100">
            Detected Action Points
          </h2>

          {previewData && (
            <div className="space-y-4">
              {/* Stat Cards */}
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
                  <span className="text-xs text-slate-400 uppercase font-bold tracking-wider">Action Items</span>
                  <div className="text-2xl font-black text-indigo-600 dark:text-indigo-400 mt-1">
                    {previewData.action_point_count}
                  </div>
                </div>
                <div className="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
                  <span className="text-xs text-slate-400 uppercase font-bold tracking-wider">Interviews Today</span>
                  <div className="text-2xl font-black text-purple-600 dark:text-purple-400 mt-1">
                    {previewData.interviews_today_count}
                  </div>
                </div>
              </div>

              {/* Action List Breakdown */}
              <div className="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm space-y-3">
                <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">
                  Summary Checklist
                </h3>
                <div className="space-y-2 max-h-[350px] overflow-y-auto pr-1">
                  {previewData.summary_data.action_items.map((item, idx) => (
                    <div
                      key={idx}
                      className="p-3 rounded-lg bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-700/50 space-y-1"
                    >
                      <div className="flex justify-between items-center">
                        <span className="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-950 dark:text-indigo-300">
                          {item.category}
                        </span>
                        <span className="text-[10px] font-bold text-amber-600 bg-amber-50 dark:bg-amber-950/40 px-1.5 py-0.5 rounded">
                          {item.priority}
                        </span>
                      </div>
                      <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
                        {item.title}
                      </p>
                      <p className="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-2">
                        {item.detail}
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              {/* AI Strategy Box */}
              <div className="bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950/40 dark:to-purple-950/40 p-4 rounded-xl border border-indigo-100 dark:border-indigo-900/40 shadow-sm space-y-2">
                <div className="flex items-center gap-2 text-xs font-bold text-indigo-700 dark:text-indigo-300 uppercase tracking-wider">
                  <span>🚀</span> AI Generated Strategy
                </div>
                <p className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed font-medium">
                  {previewData.ai_insight}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Execution Audit Log Section */}
      <div className="space-y-4 pt-4">
        <div className="flex justify-between items-center">
          <div>
            <h2 className="text-lg font-bold text-slate-800 dark:text-slate-100">
              Recent Execution Logs
            </h2>
            <p className="text-xs text-slate-500">
              Audit trails for dispatched morning briefing emails
            </p>
          </div>
        </div>

        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-sm">
          {logs.length === 0 ? (
            <div className="p-8 text-center text-slate-400 text-sm">
              No morning agent dispatches recorded yet.
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead className="bg-slate-50 dark:bg-slate-800/60 text-slate-500 font-bold border-b border-slate-200 dark:border-slate-800">
                  <tr>
                    <th className="px-4 py-3">Timestamp</th>
                    <th className="px-4 py-3">Recipient Email</th>
                    <th className="px-4 py-3">Role</th>
                    <th className="px-4 py-3">Action Points</th>
                    <th className="px-4 py-3">Status</th>
                    <th className="px-4 py-3">AI Strategy</th>
                    <th className="px-4 py-3 text-right">Action</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                  {logs.map((log) => (
                    <tr key={log.id} className="hover:bg-slate-50/50 dark:hover:bg-slate-800/30">
                      <td className="px-4 py-3 text-slate-500">
                        {new Date(log.created_at).toLocaleString()}
                      </td>
                      <td className="px-4 py-3 font-semibold text-slate-800 dark:text-slate-200">
                        {log.email_sent_to}
                      </td>
                      <td className="px-4 py-3 text-slate-600 dark:text-slate-400 font-medium">
                        {log.role}
                      </td>
                      <td className="px-4 py-3 font-bold text-indigo-600 dark:text-indigo-400">
                        {log.action_point_count}
                      </td>
                      <td className="px-4 py-3">
                        <span
                          className={`px-2 py-0.5 rounded text-[10px] font-extrabold ${
                            log.email_status === 'SENT'
                              ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
                              : log.email_status === 'DRY_RUN'
                              ? 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300'
                              : 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300'
                          }`}
                        >
                          {log.email_status}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-slate-500 max-w-xs truncate">
                        {log.ai_insight}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <button
                          onClick={() => setSelectedLogModal(log)}
                          className="px-3 py-1 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-950 dark:hover:bg-indigo-900 dark:text-indigo-300 font-bold rounded-lg text-[11px] transition duration-150 flex items-center gap-1.5 shadow-sm ml-auto"
                        >
                          <span>👁️</span> View Email
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Pagination Controls */}
          {logs.length > 0 && (
            <div className="px-4 py-3 bg-slate-50 dark:bg-slate-800/40 border-t border-slate-200 dark:border-slate-800 flex flex-wrap items-center justify-between gap-4 text-xs">
              <div className="text-slate-500 font-medium">
                Showing <strong className="text-slate-800 dark:text-slate-200">{(currentPage - 1) * pageSize + 1}</strong> to{' '}
                <strong className="text-slate-800 dark:text-slate-200">{Math.min(currentPage * pageSize, totalLogs)}</strong> of{' '}
                <strong className="text-slate-800 dark:text-slate-200">{totalLogs}</strong> logs
              </div>

              <div className="flex items-center gap-1">
                <button
                  onClick={() => fetchLogs(currentPage - 1)}
                  disabled={currentPage <= 1 || logsLoading}
                  className="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition"
                >
                  ◀ Prev
                </button>

                <div className="flex items-center gap-1 px-1 overflow-x-auto">
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
                    <button
                      key={pageNum}
                      onClick={() => fetchLogs(pageNum)}
                      disabled={logsLoading}
                      className={`w-7 h-7 rounded-lg text-xs font-bold transition ${
                        pageNum === currentPage
                          ? 'bg-indigo-600 text-white shadow-sm'
                          : 'text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800'
                      }`}
                    >
                      {pageNum}
                    </button>
                  ))}
                </div>

                <button
                  onClick={() => fetchLogs(currentPage + 1)}
                  disabled={currentPage >= totalPages || logsLoading}
                  className="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition"
                >
                  Next ▶
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Log Email Viewer Modal */}
      {selectedLogModal && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl overflow-hidden"
          >
            {/* Modal Header */}
            <div className="p-5 bg-gradient-to-r from-[#405189] to-indigo-700 text-white flex justify-between items-center">
              <div>
                <span className="text-[10px] font-extrabold uppercase bg-white/20 px-2 py-0.5 rounded tracking-wider">
                  Log Record #{selectedLogModal.id}
                </span>
                <h3 className="text-lg font-extrabold mt-1">
                  Sent to: {selectedLogModal.email_sent_to} ({selectedLogModal.role})
                </h3>
                <p className="text-xs text-indigo-100 mt-0.5 font-medium">
                  Subject: {selectedLogModal.subject} | Date: {new Date(selectedLogModal.created_at).toLocaleString()}
                </p>
              </div>

              <button
                onClick={() => setSelectedLogModal(null)}
                className="bg-white/15 hover:bg-white/30 text-white text-xs font-bold px-3 py-1.5 rounded-lg transition"
              >
                ✕ Close
              </button>
            </div>

            {/* Email Body IFrame Container */}
            <div className="flex-1 p-4 bg-slate-100 dark:bg-slate-950 overflow-hidden flex flex-col min-h-[500px]">
              {selectedLogModal.generated_html ? (
                <iframe
                  title="Historical Email View"
                  srcDoc={selectedLogModal.generated_html}
                  className="w-full flex-1 border-none bg-white rounded-xl shadow-inner"
                />
              ) : (
                <div className="p-8 text-center text-slate-500 text-sm">
                  No HTML snapshot saved for this record.
                </div>
              )}
            </div>

            {/* Modal Footer */}
            <div className="p-4 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 flex justify-between items-center text-xs">
              <span className="text-slate-500 font-medium">
                Action Points: <strong className="text-indigo-600 dark:text-indigo-400">{selectedLogModal.action_point_count}</strong> | Status: <strong className="uppercase">{selectedLogModal.email_status}</strong>
              </span>
              <button
                onClick={() => setSelectedLogModal(null)}
                className="px-5 py-2 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-lg transition"
              >
                Close Preview
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}