import { useState } from 'react';
import Swal from 'sweetalert2';
import { 
  Search, 
  Plus, 
  MessageCircle
} from 'lucide-react';
import { WAInvitation, UnitProdi, Leader, Aspect, Question } from '../../types';
import WAInvitationModal from './WAInvitationModal';
import WAInvitationTable from './WAInvitationTable';

interface WAInvitationsProps {
  invitations: WAInvitation[];
  units: UnitProdi[];
  leaders: Leader[];
  aspects: Aspect[];
  questions: Question[];
  onAddInvitation: (invite: Omit<WAInvitation, 'id' | 'sentCount'>) => void;
  onEditInvitation: (id: string, invite: Omit<WAInvitation, 'id' | 'sentCount'>) => void;
  onDeleteInvitation: (id: string) => void;
  onIncrementInvitationSent: (id: string) => void;
  triggerBanner: (msg: string) => void;
}

function calculateAspectProgress(
  invite: WAInvitation,
  leaders: Leader[],
  aspects: Aspect[],
  questions: Question[]
): Record<number, number> {
  const progress: Record<number, number> = {};
  aspects.forEach(a => {
    progress[a.id] = 0;
  });
  if (!leaders || leaders.length === 0) return progress;

  const aspectQuestionsCount: Record<number, number> = {};
  aspects.forEach(a => {
    aspectQuestionsCount[a.id] = questions.filter(q => q.aspectId === a.id).length;
  });

  if (invite.isCompleted) {
    aspects.forEach(a => {
      progress[a.id] = leaders.length * aspectQuestionsCount[a.id];
    });
    return progress;
  }

  if (!invite.draftData) return progress;

  try {
    const draft = typeof invite.draftData === 'string' ? JSON.parse(invite.draftData) : invite.draftData;
    if (!draft) return progress;

    const submittedSet = new Set<string>(draft.submittedLeaders || []);
    
    for (const leader of leaders) {
      if (submittedSet.has(leader.id)) {
        aspects.forEach(a => {
          progress[a.id] += aspectQuestionsCount[a.id];
        });
      } else {
        let scores: Record<number, number> = {};
        if (draft.leaderId === leader.id && draft.scores) {
          scores = draft.scores;
        } else if (draft.draftScores && draft.draftScores[leader.id]) {
          scores = draft.draftScores[leader.id];
        }

        for (const [qIdStr, score] of Object.entries(scores)) {
          const qId = parseInt(qIdStr);
          if (score > 0) {
            const question = questions.find(q => q.id === qId);
            if (question && progress[question.aspectId] !== undefined) {
              progress[question.aspectId] += 1;
            }
          }
        }
      }
    }
  } catch (err) {
    console.error('Failed to parse draftData for invitation progress:', err);
  }

  return progress;
}

export default function WAInvitations({
  invitations,
  units,
  leaders,
  aspects = [],
  questions = [],
  onAddInvitation,
  onEditInvitation,
  onDeleteInvitation,
  onIncrementInvitationSent
}: WAInvitationsProps) {
  // Modal / Editor States
  const [isInvitationModalOpen, setIsInvitationModalOpen] = useState(false);
  const [editingInvitation, setEditingInvitation] = useState<WAInvitation | null>(null);

  // Filters
  const [searchInvitationQuery, setSearchInvitationQuery] = useState('');
  const [filterInvitationRole, setFilterInvitationRole] = useState<string>('');
  const [filterInvitationUnit, setFilterInvitationUnit] = useState<string>('');
  const [filterInvitationStatus, setFilterInvitationStatus] = useState<string>('');
  const [currentPage, setCurrentPage] = useState(1);
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | 'none'>('none');

  // Filtered invitations list
  const filteredInvitations = invitations.filter(invite => {
    const matchSearch = invite.name.toLowerCase().includes(searchInvitationQuery.toLowerCase()) || 
                        invite.unit.toLowerCase().includes(searchInvitationQuery.toLowerCase()) ||
                        invite.phone.includes(searchInvitationQuery);
    const matchRole = filterInvitationRole === '' || invite.role === filterInvitationRole;
    const matchUnit = filterInvitationUnit === '' || invite.unit === filterInvitationUnit;
    
    let matchStatus = true;
    if (filterInvitationStatus === 'completed') {
      matchStatus = !!invite.isCompleted;
    } else if (filterInvitationStatus === 'incomplete') {
      matchStatus = !invite.isCompleted;
    }
    
    return matchSearch && matchRole && matchUnit && matchStatus;
  });

  const handleToggleSort = () => {
    setSortOrder(prev => {
      if (prev === 'none') return 'asc';
      if (prev === 'asc') return 'desc';
      return 'none';
    });
    setCurrentPage(1);
  };

  // Sort filtered list alphabetically by name if sortOrder is set
  const sortedInvitations = [...filteredInvitations];
  if (sortOrder !== 'none') {
    sortedInvitations.sort((a, b) => {
      return sortOrder === 'asc'
        ? a.name.localeCompare(b.name, 'id', { numeric: true, sensitivity: 'base' })
        : b.name.localeCompare(a.name, 'id', { numeric: true, sensitivity: 'base' });
    });
  }

  // Paging parameters
  const itemsPerPage = 10;
  const totalItems = sortedInvitations.length;
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  
  const activePage = Math.min(Math.max(1, currentPage), totalPages || 1);
  const startIndex = (activePage - 1) * itemsPerPage;
  const paginatedInvitations = sortedInvitations.slice(startIndex, startIndex + itemsPerPage);

  const handleInvitationSave = (inviteData: Omit<WAInvitation, 'id' | 'sentCount'>) => {
    if (editingInvitation) {
      onEditInvitation(editingInvitation.id, inviteData);
      Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: `Data undangan untuk '${inviteData.name}' berhasil diperbarui.`,
        timer: 2000,
        showConfirmButton: false
      });
    } else {
      if (invitations.some(i => i.phone === inviteData.phone)) {
        Swal.fire({
          icon: 'error',
          title: 'Gagal',
          text: `Nomor HP/WhatsApp ${inviteData.phone} sudah terdaftar.`
        });
        return;
      }
      onAddInvitation(inviteData);
      Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: `Peserta baru '${inviteData.name}' berhasil didaftarkan.`,
        timer: 2000,
        showConfirmButton: false
      });
    }

    setIsInvitationModalOpen(false);
    setEditingInvitation(null);
  };

  const generateInvitationLink = (invite: WAInvitation) => {
    const baseUrl = typeof window !== 'undefined'
      ? `${window.location.protocol}//${window.location.host}`
      : 'http://localhost:3000';

    return `${baseUrl}/r/${invite.id}`;
  };

  const handleSendToWhatsApp = (invite: WAInvitation) => {
    const directLink = generateInvitationLink(invite);
    const progress = calculateAspectProgress(invite, leaders, aspects, questions);
    
    const aspectNames: Record<number, string> = {};
    aspects.forEach(a => {
      aspectNames[a.id] = a.title;
    });

    const incompleteAspects: string[] = [];
    aspects.forEach(a => {
      const count = progress[a.id] || 0;
      const totalQuestionsForAspect = questions.filter(q => q.aspectId === a.id).length;
      const totalPerAspect = leaders.length * totalQuestionsForAspect;
      if (count < totalPerAspect) {
        incompleteAspects.push(`${a.title} (${count}/${totalPerAspect} butir)`);
      }
    });

    const hasStarted = Object.values(progress).some(p => p > 0);
    let message = '';

    if (invite.isCompleted) {
      message = `Halo Bapak/Ibu *${invite.name}*,\n\nKami mengucapkan terima kasih yang sebesar-besarnya atas partisipasi aktif Bapak/Ibu dalam mengisi kuesioner *Evaluasi Kinerja Pimpinan Institut Kesehatan Immanuel* (Rektor, Wakil Rektor, dan Pendeta Kampus) Yayasan Perguruan Tinggi - GKP.\n\nSistem mencatat bahwa pengisian kuesioner Anda telah *SELESAI dan tersimpan secara lengkap*.\n\nAspirasi serta kontribusi nyata Bapak/Ibu sangat berharga bagi kemajuan mutu akademik dan peningkatan tata kelola kampus kami.\n\nSalam,\nYPT-GKP`;
    } else if (hasStarted) {
      message = `Halo Bapak/Ibu *${invite.name}*,\n\nKami menginfokan bahwa pengisian kuesioner *Evaluasi Kinerja Pimpinan Institut Kesehatan Immanuel* (Rektor, Wakil Rektor, dan Pendeta Kampus) Yayasan Perguruan Tinggi - GKP melalui tautan pribadi Anda belum selesai.\n\nBerikut rincian aspek yang belum dilengkapi:\n${incompleteAspects.map(a => `• ${a}`).join('\n')}\n\nKuesioner ini sepenuhnya *ANONIM* demi kenyamanan Anda, dan draf jawaban sebelumnya telah tersimpan otomatis. Mohon melanjutkannya kembali melalui tautan pribadi berikut:\n\n${directLink}\n\nTerima kasih atas dedikasi dan kontribusi nyata Bapak/Ibu bagi kemajuan mutu akademik kampus.\n\nSalam,\nYPT-GKP`;
    } else {
      message = `Halo Bapak/Ibu *${invite.name}*,\n\nKami mohon kesediaan waktu Bapak/Ibu untuk berpartisipasi dalam mengisi kuesioner *Evaluasi Kinerja Pimpinan Institut Kesehatan Immanuel* (Rektor, Wakil Rektor, dan Pendeta Kampus) Yayasan Perguruan Tinggi - GKP.\n\nKuesioner ini sepenuhnya *ANONIM* demi kenyamanan responden, serta dapat diisi *tanpa perlu login* melalui tautan pribadi Bapak/Ibu berikut:\n\n${directLink}\n\nTerima kasih atas dedikasi dan kontribusi nyata Bapak/Ibu bagi kemajuan mutu akademik kampus.\n\nSalam,\nYPT-GKP`;
    }
    
    const encodedMessage = encodeURIComponent(message);
    const waUrl = `https://wa.me/${invite.phone}?text=${encodedMessage}`;
    
    window.open(waUrl, '_blank', 'noopener,noreferrer');
    onIncrementInvitationSent(invite.id);
    
    Swal.fire({
      icon: 'success',
      title: 'WhatsApp Dibuka',
      text: `Membuka WhatsApp untuk '${invite.name}'. Status pengiriman diperbarui.`,
      timer: 2000,
      showConfirmButton: false
    });
  };

  const handleCopyLink = (invite: WAInvitation) => {
    const directLink = generateInvitationLink(invite);
    navigator.clipboard.writeText(directLink).then(() => {
      Swal.fire({
        icon: 'success',
        title: 'Tersalin!',
        text: `Tautan pribadi '${invite.name}' disalin ke clipboard!`,
        timer: 1500,
        showConfirmButton: false
      });
    }).catch(() => {
      Swal.fire({
        icon: 'error',
        title: 'Gagal',
        text: 'Gagal menyalin tautan.'
      });
    });
  };

  const handleDeleteInvitation = (invite: WAInvitation) => {
    Swal.fire({
      title: 'Hapus Target Peserta?',
      text: `Yakin ingin menghapus target peserta '${invite.name}' dari database undangan?`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Ya, Hapus!',
      cancelButtonText: 'Batal'
    }).then((result) => {
      if (result.isConfirmed) {
        onDeleteInvitation(invite.id);
        Swal.fire({
          icon: 'success',
          title: 'Terhapus!',
          text: `Target peserta '${invite.name}' berhasil dihapus.`,
          timer: 2000,
          showConfirmButton: false
        });
      }
    });
  };

  return (
    <div className="space-y-6">
      {/* Philosophical Infobar */}
      <div className="bg-gradient-to-r from-blue-50 to-emerald-50 dark:from-slate-800/40 dark:to-emerald-950/20 border border-blue-100 dark:border-slate-700/60 p-5 rounded-2xl shadow-xs">
        <div className="flex gap-3">
          <div className="p-2.5 bg-white dark:bg-slate-900 rounded-xl shadow-xs text-emerald-500 scale-100 shrink-0">
            <MessageCircle className="h-5 w-5 fill-emerald-50 dark:fill-none" />
          </div>
          <div>
            <h3 className="font-extrabold text-slate-800 dark:text-white text-sm">Distribusi Kuesioner via WhatsApp (Tanpa Login)</h3>
            <p className="text-xs text-slate-600 dark:text-slate-300 mt-1.5 leading-relaxed">
              Fitur ini membantu Anda mengirimkan <strong>tautan personal dinamis</strong> secara langsung ke kontak WhatsApp perorangan sivitas akademika. 
              Ketika diklik oleh responden, sistem akan otomatis mengenali <strong>Status (Dosen/Tendik)</strong> dan <strong>Unit Kerja / Program Studi</strong> mereka, membuat proses pengisian menjadi sangat ringkas sembari sepenuhnya <strong>melindungi privasi identitas responden</strong> dengan cara menjaga jawaban kuesioner mereka tetap anonim (tanpa dikaitkan ke kontak).
            </p>
          </div>
        </div>
      </div>

      {/* Real-time statistics */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-5">
        <div className="bg-white dark:bg-slate-800 p-4.5 rounded-2xl border border-slate-100 dark:border-slate-700/50 shadow-xs">
          <span className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest block">Total Target Responden</span>
          <span className="text-xl font-black text-slate-800 dark:text-white mt-1 block">{invitations.length} orang</span>
        </div>
        <div className="bg-emerald-50/40 dark:bg-emerald-950/10 p-4.5 rounded-2xl border border-emerald-100/60 dark:border-emerald-900/40 shadow-xs">
          <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-widest block">Sudah Berpartisipasi (Selesai)</span>
          <span className="text-xl font-black text-emerald-700 dark:text-emerald-300 mt-1 block">
            {invitations.filter(i => i.isCompleted).length} orang
            <span className="text-xs font-semibold text-slate-500 ml-1.5">
              ({invitations.length > 0 ? Math.round((invitations.filter(i => i.isCompleted).length / invitations.length) * 100) : 0}%)
            </span>
          </span>
        </div>
        <div className="bg-amber-50/40 dark:bg-amber-950/10 p-4.5 rounded-2xl border border-amber-100/60 dark:border-amber-900/40 shadow-xs">
          <span className="text-[10px] font-bold text-amber-600 dark:text-amber-400 uppercase tracking-widest block">Belum Mengisi (Menunggu)</span>
          <span className="text-xl font-black text-amber-700 dark:text-amber-300 mt-1 block">
            {invitations.filter(i => !i.isCompleted).length} orang
          </span>
        </div>
      </div>

      {/* Toolbar */}
      <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-100 dark:border-slate-700/50 shadow-xs flex flex-col xl:flex-row justify-between items-center gap-4">
        <div className="flex flex-wrap items-center gap-3 w-full xl:w-auto">
          <div className="relative w-full sm:w-64">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400" />
            <input
              type="text"
              placeholder="Cari nama, nomor WA, atau unit..."
              value={searchInvitationQuery}
              onChange={(e) => {
                setSearchInvitationQuery(e.target.value);
                setCurrentPage(1);
              }}
              className="w-full text-xs pl-9 pr-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>

          <select
            value={filterInvitationRole}
            onChange={(e) => {
              setFilterInvitationRole(e.target.value);
              setCurrentPage(1);
            }}
            className="w-full sm:w-auto text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer"
          >
            <option value="">Semua Status</option>
            <option value="Dosen">Dosen</option>
            <option value="Tenaga Kependidikan">Tenaga Kependidikan (Tendik)</option>
          </select>

          <select
            value={filterInvitationUnit}
            onChange={(e) => {
              setFilterInvitationUnit(e.target.value);
              setCurrentPage(1);
            }}
            className="w-full sm:w-auto text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer"
          >
            <option value="">Semua Unit / Prodi</option>
            {units.map((u) => (
              <option key={u.id} value={u.nama}>{u.nama}</option>
            ))}
          </select>

          <select
            value={filterInvitationStatus}
            onChange={(e) => {
              setFilterInvitationStatus(e.target.value);
              setCurrentPage(1);
            }}
            className="w-full sm:w-auto text-xs px-3 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-800 dark:text-white rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer"
          >
            <option value="">Semua Partisipasi</option>
            <option value="incomplete">Belum Selesai</option>
            <option value="completed">Selesai</option>
          </select>
        </div>

        <button
          onClick={() => {
            setEditingInvitation(null);
            setIsInvitationModalOpen(true);
          }}
          className="w-full sm:w-auto px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl transition shadow-xs flex items-center justify-center gap-1.5 cursor-pointer"
        >
          <Plus className="h-4 w-4" />
          <span>Tambah Target Peserta</span>
        </button>
      </div>

      {/* List Table / Responsive grid */}
      {filteredInvitations.length === 0 ? (
        <div className="bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700/60 p-10 rounded-2xl text-center shadow-xs">
          <p className="text-slate-400 text-sm font-medium">Tidak ada target / peserta undangan WhatsApp yang pas dengan kriteria pencarian.</p>
        </div>
      ) : (
        <>
          <WAInvitationTable
            paginatedInvitations={paginatedInvitations}
            leaders={leaders}
            aspects={aspects}
            questions={questions}
            onSendToWhatsApp={handleSendToWhatsApp}
            onCopyLink={handleCopyLink}
            onEdit={(invite) => {
              setEditingInvitation(invite);
              setIsInvitationModalOpen(true);
            }}
            onDelete={handleDeleteInvitation}
            calculateAspectProgress={(invite, leads) => calculateAspectProgress(invite, leads, aspects, questions)}
            sortOrder={sortOrder}
            onToggleSort={handleToggleSort}
          />

          {/* Pagination Controls */}
          {totalPages > 1 && (
            <div className="bg-white dark:bg-slate-800 px-6 py-4.5 rounded-2xl border border-slate-100 dark:border-slate-700/50 shadow-xs flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
              <span className="text-xs text-slate-500 dark:text-slate-400 text-center sm:text-left">
                Menampilkan <strong className="text-slate-800 dark:text-white">{startIndex + 1}</strong> - <strong className="text-slate-800 dark:text-white">{Math.min(startIndex + itemsPerPage, totalItems)}</strong> dari <strong className="text-slate-800 dark:text-white">{totalItems}</strong> target peserta
              </span>
              
              {/* Desktop Pager */}
              <div className="hidden sm:flex items-center gap-1.5">
                <button
                  type="button"
                  onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                  disabled={activePage === 1}
                  className={`px-3 py-1.5 rounded-lg border text-xs font-bold transition cursor-pointer ${
                    activePage === 1
                      ? 'bg-slate-50 border-slate-200 text-slate-300 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-600 cursor-not-allowed'
                      : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'
                  }`}
                >
                  Sebelumnya
                </button>
                
                {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
                  <button
                    type="button"
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-xs font-black transition cursor-pointer flex items-center justify-center ${
                      activePage === page
                        ? 'bg-blue-600 border border-blue-600 text-white shadow-sm'
                        : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'
                    }`}
                  >
                    {page}
                  </button>
                ))}

                <button
                  type="button"
                  onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                  disabled={activePage === totalPages}
                  className={`px-3 py-1.5 rounded-lg border text-xs font-bold transition cursor-pointer ${
                    activePage === totalPages
                      ? 'bg-slate-50 border-slate-200 text-slate-300 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-600 cursor-not-allowed'
                      : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'
                  }`}
                >
                  Selanjutnya
                </button>
              </div>

              {/* Mobile Pager */}
              <div className="flex sm:hidden items-center justify-between w-full gap-3">
                <button
                  type="button"
                  onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                  disabled={activePage === 1}
                  className={`flex-1 py-2 px-3 rounded-xl border text-xs font-bold text-center transition cursor-pointer ${
                    activePage === 1
                      ? 'bg-slate-50 border-slate-200 text-slate-300 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-600 cursor-not-allowed'
                      : 'bg-white border-slate-250 text-slate-700 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'
                  }`}
                >
                  Sebelumnya
                </button>
                <span className="text-xs text-slate-500 dark:text-slate-400 font-mono font-bold shrink-0">
                  {activePage} / {totalPages}
                </span>
                <button
                  type="button"
                  onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                  disabled={activePage === totalPages}
                  className={`flex-1 py-2 px-3 rounded-xl border text-xs font-bold text-center transition cursor-pointer ${
                    activePage === totalPages
                      ? 'bg-slate-50 border-slate-200 text-slate-300 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-600 cursor-not-allowed'
                      : 'bg-white border-slate-250 text-slate-700 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'
                  }`}
                >
                  Selanjutnya
                </button>
              </div>
            </div>
          )}
        </>
      )}

      {/* --- ADD/EDIT WHATSAPP INVITATION TARGET MODAL --- */}
      <WAInvitationModal
        isOpen={isInvitationModalOpen}
        onClose={() => setIsInvitationModalOpen(false)}
        onSave={handleInvitationSave}
        editingInvitation={editingInvitation}
        units={units}
      />
    </div>
  );
}