import { useState, useEffect, useCallback } from 'react';
import {
  Mail,
  Plus,
  Edit2,
  Trash2,
  X,
  RefreshCw,
  Search,
  Type,
  FileText,
  User,
  CheckCircle2
} from 'lucide-react';
import { comms } from '@/communication';
import { MailFormItem } from '@/types';
import { clsx } from 'clsx';

const initialFormData: Partial<MailFormItem> = {
  cate: '',
  title: '',
  tolist: '',
  bcc: '',
  cc: '',
  subject: '',
  tail: '',
  body: '',
  selfTo: false,
  selfCC: false,
  selfBCC: false,
  exceptmail: '',
  exceptmailcc: '',
};

export function MailFormPage() {
  const [loading, setLoading] = useState(false);
  const [mailForms, setMailForms] = useState<MailFormItem[]>([]);
  const [searchKey, setSearchKey] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [editingItem, setEditingItem] = useState<MailFormItem | null>(null);
  const [formData, setFormData] = useState<Partial<MailFormItem>>(initialFormData);
  const [saving, setSaving] = useState(false);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const response = await comms.getMailFormList();
      if (response.Success && response.Data) {
        setMailForms(response.Data);
      }
    } catch (error) {
      console.error('데이터 로드 오류:', error);
      alert('데이터를 불러오는 중 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  }, []);

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

  const filteredItems = mailForms.filter(item =>
    !searchKey ||
    item.title?.toLowerCase().includes(searchKey.toLowerCase()) ||
    item.cate?.toLowerCase().includes(searchKey.toLowerCase()) ||
    item.subject?.toLowerCase().includes(searchKey.toLowerCase())
  );

  const openAddModal = () => {
    setEditingItem(null);
    setFormData(initialFormData);
    setShowModal(true);
  };

  const openEditModal = (item: MailFormItem) => {
    setEditingItem(item);
    setFormData({
      cate: item.cate || '',
      title: item.title || '',
      tolist: item.tolist || '',
      bcc: item.bcc || '',
      cc: item.cc || '',
      subject: item.subject || '',
      tail: item.tail || '',
      body: item.body || '',
      selfTo: item.selfTo || false,
      selfCC: item.selfCC || false,
      selfBCC: item.selfBCC || false,
      exceptmail: item.exceptmail || '',
      exceptmailcc: item.exceptmailcc || '',
    });
    setShowModal(true);
  };

  const handleSave = async () => {
    if (!formData.title?.trim()) {
      alert('양식명을 입력해주세요.');
      return;
    }

    setSaving(true);
    try {
      let response;
      if (editingItem) {
        response = await comms.editMailForm(
          editingItem.idx,
          formData.cate || '',
          formData.title || '',
          formData.tolist || '',
          formData.bcc || '',
          formData.cc || '',
          formData.subject || '',
          formData.tail || '',
          formData.body || '',
          formData.selfTo || false,
          formData.selfCC || false,
          formData.selfBCC || false,
          formData.exceptmail || '',
          formData.exceptmailcc || ''
        );
      } else {
        response = await comms.addMailForm(
          formData.cate || '',
          formData.title || '',
          formData.tolist || '',
          formData.bcc || '',
          formData.cc || '',
          formData.subject || '',
          formData.tail || '',
          formData.body || '',
          formData.selfTo || false,
          formData.selfCC || false,
          formData.selfBCC || false,
          formData.exceptmail || '',
          formData.exceptmailcc || ''
        );
      }

      if (response.Success) {
        setShowModal(false);
        loadData();
      } else {
        alert(response.Message || '저장에 실패했습니다.');
      }
    } catch (error) {
      console.error('저장 오류:', error);
      alert('저장 중 오류가 발생했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (item: MailFormItem) => {
    if (!confirm(`"${item.title}" 양식을 삭제하시겠습니까?`)) return;

    try {
      const response = await comms.deleteMailForm(item.idx);
      if (response.Success) {
        loadData();
      } else {
        alert(response.Message || '삭제에 실패했습니다.');
      }
    } catch (error) {
      console.error('삭제 오류:', error);
      alert('삭제 중 오류가 발생했습니다.');
    }
  };

  return (
    <div className="space-y-6 animate-fade-in pb-4 h-full">
      {/* 메일양식 메인 카드 */}
      <div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10 flex flex-col h-full max-h-[calc(100vh-140px)]">
        <div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 bg-white/[0.02] shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-primary-500/20 rounded-lg">
              <Mail className="w-5 h-5 text-primary-400" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-white tracking-tight">메일양식 관리</h3>
              <p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
                Email Template System
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            {/* 검색창 */}
            <div className="relative group w-48 md:w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/40 group-focus-within:text-primary-400 transition-colors" />
              <input
                type="text"
                value={searchKey}
                onChange={(e) => setSearchKey(e.target.value)}
                placeholder="양식명, 제목, 분류 검색..."
                className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-white placeholder-white/20 focus:outline-none focus:ring-1 focus:ring-primary-500/50 transition-all backdrop-blur-sm h-[40px]"
              />
            </div>

            {/* 개수 */}
            <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[40px]">
              <span className="text-primary-400 font-bold text-sm">{filteredItems.length}</span>
              <span className="text-white/40 text-[10px] uppercase">건</span>
            </div>

            {/* 새로고침 */}
            <button
              onClick={loadData}
              disabled={loading}
              className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white/70 hover:text-white transition-all disabled:opacity-50 h-[40px] w-[40px] flex items-center justify-center"
              title="새로고침"
            >
              <RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
            </button>

            {/* 추가 버튼 */}
            <button
              onClick={openAddModal}
              className="p-2 bg-primary-500 hover:bg-primary-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-primary-500/20 active:scale-95 h-[40px] w-[40px] flex items-center justify-center group"
              title="새 양식 추가"
            >
              <Plus className="w-4 h-4 group-hover:rotate-90 transition-transform" />
            </button>
          </div>
        </div>

        {/* 리스트 헤더 */}
        <div className="bg-white/5 px-6 py-3 border-b border-white/5 flex items-center text-[10px] font-bold text-white/30 uppercase tracking-widest shrink-0">
          <div className="w-24 px-4 text-center">분류</div>
          <div className="flex-1 px-4">양식 정보</div>
          <div className="w-64 px-4">메일 제목</div>
          <div className="w-32 px-4 text-center">수신 옵션</div>
          <div className="w-20 text-center">작업</div>
        </div>

        <div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
          {loading ? (
            <div className="py-20 text-center">
              <RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" />
              <p className="text-white/50 font-medium text-sm">양식 데이터를 불러오는 중...</p>
            </div>
          ) : filteredItems.length === 0 ? (
            <div className="py-32 text-center">
              <Mail className="w-16 h-16 mx-auto text-white/10 mb-4" />
              <p className="text-white/30 text-base font-bold">등록된 메일양식이 없습니다</p>
              <p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No email templates available</p>
            </div>
          ) : (
            filteredItems.map((item) => (
              <div
                key={item.idx}
                className="px-6 py-3 hover:bg-white/[0.03] transition-all group flex items-center"
              >
                {/* 분류 */}
                <div className="w-24 px-4 text-center">
                  <span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/40 font-bold uppercase truncate block">
                    {item.cate || '미분류'}
                  </span>
                </div>

                {/* 양식명 */}
                <div className="flex-1 px-4 flex flex-col">
                  <div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
                    {item.title}
                  </div>
                  <div className="text-[10px] text-white/20 mt-0.5 flex items-center gap-1.5">
                    <FileText className="w-2.5 h-2.5" />
                    ID: {item.idx}
                  </div>
                </div>

                {/* 제목 */}
                <div className="w-64 px-4 text-xs text-white/50 truncate italic">
                  {item.subject || '(제목 없음)'}
                </div>

                {/* 발신 옵션 (To/CC/BCC Self) */}
                <div className="w-32 px-4 flex justify-center gap-1.5">
                  {[
                    { label: 'T', active: item.selfTo, color: 'text-primary-400', bg: 'bg-primary-500/10' },
                    { label: 'C', active: item.selfCC, color: 'text-amber-400', bg: 'bg-amber-500/10' },
                    { label: 'B', active: item.selfBCC, color: 'text-emerald-400', bg: 'bg-emerald-500/10' }
                  ].map((opt, i) => (
                    <div
                      key={i}
                      className={clsx(
                        "w-6 h-6 rounded flex items-center justify-center text-[10px] font-bold border border-white/5",
                        opt.active ? `${opt.bg} ${opt.color} border-${opt.color}/20` : "bg-white/5 text-white/10"
                      )}
                      title={`${opt.label === 'T' ? 'To' : opt.label === 'C' ? 'CC' : 'BCC'} Self-include`}
                    >
                      {opt.label}
                    </div>
                  ))}
                </div>

                {/* 작업 버튼 */}
                <div className="w-20 flex justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button
                    onClick={() => openEditModal(item)}
                    className="p-1.5 hover:bg-white/10 rounded-lg text-white/40 hover:text-white transition-colors"
                  >
                    <Edit2 className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDelete(item)}
                    className="p-1.5 hover:bg-red-500/10 rounded-lg text-white/40 hover:text-red-400 transition-colors"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))
          )}
        </div>

        {/* 푸터 */}
        <div className="px-6 py-2 flex items-center justify-between bg-white/[0.02] border-t border-white/5 shrink-0">
          <div className="text-white/20 text-[9px] font-bold uppercase tracking-[0.2em] py-2">
            Template Management Hub <span className="text-white/5 mx-2">/</span>
            Total <span className="text-primary-400/50 font-mono tracking-normal">{filteredItems.length}</span>
          </div>
          <div className="text-[9px] text-white/10 italic">
            Reference date: {new Date().toLocaleDateString()}
          </div>
        </div>
      </div>

      {/* 편집 모달 */}
      {showModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
            onClick={() => setShowModal(false)}
          />

          <div className="relative w-full max-w-4xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
            {/* 모달 헤더 */}
            <div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
                  <Mail className="w-5 h-5" />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-white tracking-tight">
                    {editingItem ? '메일양식 수정' : '새 메일양식 등록'}
                  </h2>
                  <p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
                    Template Configuration
                  </p>
                </div>
              </div>
              <button
                onClick={() => setShowModal(false)}
                className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* 모달 내용 */}
            <div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
              {/* 기본 정보 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 mb-2">
                  <Type className="w-4 h-4 text-primary-500" />
                  <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">분류 및 명칭</h4>
                  <div className="flex-1 h-px bg-white/5"></div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                    <label className="text-[10px] font-bold text-white/30 uppercase pl-1">분류 (Category)</label>
                    <input
                      type="text"
                      value={formData.cate || ''}
                      onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
                      className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                      placeholder="업무, 공지 등"
                    />
                  </div>
                  <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                    <label className="text-[10px] font-bold text-white/30 uppercase pl-1">양식 명칭 *</label>
                    <input
                      type="text"
                      value={formData.title || ''}
                      onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                      className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                      placeholder="구분이 쉬운 양식 이름을 입력하세요"
                    />
                  </div>
                </div>

                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">메일 제목 (Subject)</label>
                  <input
                    type="text"
                    value={formData.subject || ''}
                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                    placeholder="발송 시 자동으로 채워질 제목"
                  />
                </div>
              </section>

              {/* 수신자 설정 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 mb-2">
                  <User className="w-4 h-4 text-amber-500" />
                  <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">수신자 기본값</h4>
                  <div className="flex-1 h-px bg-white/5"></div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {/* To */}
                  <div className="space-y-3">
                    <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                      <label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
                        To (수신)
                        <span className="flex items-center gap-1.5 cursor-pointer text-primary-400">
                          <input
                            type="checkbox"
                            checked={formData.selfTo || false}
                            onChange={(e) => setFormData({ ...formData, selfTo: e.target.checked })}
                            className="w-3 h-3 rounded"
                          />
                          Self
                        </span>
                      </label>
                      <textarea
                        value={formData.tolist || ''}
                        onChange={(e) => setFormData({ ...formData, tolist: e.target.value })}
                        rows={3}
                        className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
                        placeholder="주소를 입력하세요 (줄바꿈 구분)"
                      />
                    </div>
                  </div>

                  {/* CC */}
                  <div className="space-y-3">
                    <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                      <label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
                        CC (참조)
                        <span className="flex items-center gap-2 cursor-pointer text-amber-400">
                          <input
                            type="checkbox"
                            checked={formData.selfCC || false}
                            onChange={(e) => setFormData({ ...formData, selfCC: e.target.checked })}
                            className="w-3 h-3 rounded"
                          />
                          Self
                        </span>
                      </label>
                      <textarea
                        value={formData.cc || ''}
                        onChange={(e) => setFormData({ ...formData, cc: e.target.value })}
                        rows={3}
                        className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
                        placeholder="주소를 입력하세요 (줄바꿈 구분)"
                      />
                    </div>
                  </div>

                  {/* BCC */}
                  <div className="space-y-3">
                    <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                      <label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
                        BCC (숨은참조)
                        <span className="flex items-center gap-2 cursor-pointer text-emerald-400">
                          <input
                            type="checkbox"
                            checked={formData.selfBCC || false}
                            onChange={(e) => setFormData({ ...formData, selfBCC: e.target.checked })}
                            className="w-3 h-3 rounded"
                          />
                          Self
                        </span>
                      </label>
                      <textarea
                        value={formData.bcc || ''}
                        onChange={(e) => setFormData({ ...formData, bcc: e.target.value })}
                        rows={3}
                        className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
                        placeholder="주소를 입력하세요 (줄바꿈 구분)"
                      />
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                    <label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail (To 제외 주소)</label>
                    <input
                      type="text"
                      value={formData.exceptmail || ''}
                      onChange={(e) => setFormData({ ...formData, exceptmail: e.target.value })}
                      className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                    />
                  </div>
                  <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                    <label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail CC (참조 제외 주소)</label>
                    <input
                      type="text"
                      value={formData.exceptmailcc || ''}
                      onChange={(e) => setFormData({ ...formData, exceptmailcc: e.target.value })}
                      className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                    />
                  </div>
                </div>
              </section>

              {/* 본문 에디터 영역 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 mb-2">
                  <FileText className="w-4 h-4 text-emerald-500" />
                  <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">본문 및 꼬리말</h4>
                  <div className="flex-1 h-px bg-white/5"></div>
                </div>

                <div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">메일 본문 (HTML 가능)</label>
                  <textarea
                    value={formData.body || ''}
                    onChange={(e) => setFormData({ ...formData, body: e.target.value })}
                    rows={8}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1 font-mono"
                    placeholder="메일 본문 내용을 입력하세요"
                  />
                </div>

                <div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">꼬리말 (Tail/Signature)</label>
                  <textarea
                    value={formData.tail || ''}
                    onChange={(e) => setFormData({ ...formData, tail: e.target.value })}
                    rows={3}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
                    placeholder="하단에 공통으로 표시될 꼬리말"
                  />
                </div>
              </section>
            </div>

            {/* 모달 푸터 */}
            <div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-end gap-3 shrink-0">
              <button
                onClick={() => setShowModal(false)}
                className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
              >
                취소
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-primary-500/20 transition-all disabled:opacity-50 active:scale-95"
              >
                {saving ? (
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                ) : (
                  <CheckCircle2 className="w-3.5 h-3.5" />
                )}
                <span>{editingItem ? '양식 변경 사항 저장' : '새 메일양식 저장'}</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}