import React, { useEffect, useState } from 'react';
import { fetchApi } from '../../utils/api';

interface Deputy {
  key_name: string;
  title_id: string;
}

interface NewsItem {
  id: number;
  deputy_key: string;
  order_num: number;
  title_id: string;
  title_en: string;
  content_id: string;
  content_en: string;
}

export const NewsManager: React.FC = () => {
  const [deputies, setDeputies] = useState<Deputy[]>([]);
  const [selectedDeputy, setSelectedDeputy] = useState<string>('secretariat');
  const [newsList, setNewsList] = useState<NewsItem[]>([]);
  const [loading, setLoading] = useState(false);

  // Form State
  const [isEditing, setIsEditing] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [titleId, setTitleId] = useState('');
  const [titleEn, setTitleEn] = useState('');
  const [contentId, setContentId] = useState('');
  const [contentEn, setContentEn] = useState('');
  const [orderNum, setOrderNum] = useState(1);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetchApi('/deputies').then((data) => setDeputies(data)).catch(console.error);
  }, []);

  const loadNews = async (deputyKey: string) => {
    setLoading(true);
    try {
      const data = await fetchApi(`/news?deputy_key=${deputyKey}`);
      setNewsList(data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (selectedDeputy) {
      loadNews(selectedDeputy);
    }
  }, [selectedDeputy]);

  const resetForm = () => {
    setIsEditing(false);
    setEditId(null);
    setTitleId('');
    setTitleEn('');
    setContentId('');
    setContentEn('');
    setOrderNum(newsList.length + 1);
  };

  const handleEdit = (item: NewsItem) => {
    setIsEditing(true);
    setEditId(item.id);
    setTitleId(item.title_id || '');
    setTitleEn(item.title_en || '');
    setContentId(item.content_id || '');
    setContentEn(item.content_en || '');
    setOrderNum(item.order_num || 1);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleDelete = async (id: number) => {
    if (!window.confirm('Apakah Anda yakin ingin menghapus berita ini?')) return;
    try {
      await fetchApi(`/news/${id}`, { method: 'DELETE' });
      setMessage('Berita berhasil dihapus.');
      loadNews(selectedDeputy);
    } catch (err: any) {
      alert(err.message || 'Gagal menghapus berita.');
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setMessage('');

    try {
      const payload = {
        deputy_key: selectedDeputy,
        title_id: titleId,
        title_en: titleEn || titleId,
        content_id: contentId,
        content_en: contentEn || contentId,
        order_num: Number(orderNum),
      };

      if (isEditing && editId) {
        await fetchApi(`/news/${editId}`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        });
        setMessage('Berita berhasil diperbarui!');
      } else {
        await fetchApi('/news', {
          method: 'POST',
          body: JSON.stringify(payload),
        });
        setMessage('Berita baru berhasil ditambahkan!');
      }

      resetForm();
      loadNews(selectedDeputy);
    } catch (err: any) {
      alert(err.message || 'Gagal menyimpan berita.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div style={styles.headerRow}>
        <h1 style={{ fontSize: '22px', fontWeight: 700, margin: 0 }}>Kelola Berita & Informasi</h1>
        
        {/* Deputy Selector Filter */}
        <select
          value={selectedDeputy}
          onChange={(e) => {
            setSelectedDeputy(e.target.value);
            resetForm();
          }}
          style={styles.select}
        >
          {deputies.map((d) => (
            <option key={d.key_name} value={d.key_name}>
              {d.title_id} ({d.key_name})
            </option>
          ))}
        </select>
      </div>

      {message && <div style={styles.successAlert}>{message}</div>}

      {/* Form Add / Edit */}
      <div style={styles.formCard}>
        <h3 style={{ margin: '0 0 16px 0', color: '#60a5fa' }}>
          {isEditing ? '✏️ Edit Berita' : '➕ Tambah Berita Baru'}
        </h3>
        <form onSubmit={handleSubmit} style={styles.form}>
          <div style={styles.row}>
            <div style={{ flex: 1 }}>
              <label style={styles.label}>Judul Berita (Bahasa Indonesia)</label>
              <input
                type="text"
                value={titleId}
                onChange={(e) => setTitleId(e.target.value)}
                placeholder="Masukkan judul berita"
                required
                style={styles.input}
              />
            </div>
            <div style={{ flex: 1 }}>
              <label style={styles.label}>Judul Berita (Bahasa Inggris)</label>
              <input
                type="text"
                value={titleEn}
                onChange={(e) => setTitleEn(e.target.value)}
                placeholder="Masukkan judul (opsional)"
                style={styles.input}
              />
            </div>
            <div style={{ width: '100px' }}>
              <label style={styles.label}>Urutan</label>
              <input
                type="number"
                value={orderNum}
                onChange={(e) => setOrderNum(Number(e.target.value))}
                style={styles.input}
              />
            </div>
          </div>

          <div style={styles.row}>
            <div style={{ flex: 1 }}>
              <label style={styles.label}>Konten (Bahasa Indonesia - mendukung tag HTML/text)</label>
              <textarea
                rows={6}
                value={contentId}
                onChange={(e) => setContentId(e.target.value)}
                placeholder="Masukkan isi berita lengkap..."
                required
                style={styles.textarea}
              />
            </div>
            <div style={{ flex: 1 }}>
              <label style={styles.label}>Konten (Bahasa Inggris)</label>
              <textarea
                rows={6}
                value={contentEn}
                onChange={(e) => setContentEn(e.target.value)}
                placeholder="Masukkan isi berita versi bahasa Inggris..."
                style={styles.textarea}
              />
            </div>
          </div>

          <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
            {isEditing && (
              <button type="button" onClick={resetForm} style={styles.cancelBtn}>
                Batal
              </button>
            )}
            <button type="submit" disabled={saving} style={styles.saveBtn}>
              {saving ? 'Menyimpan...' : isEditing ? 'Simpan Perubahan' : 'Tambah Berita'}
            </button>
          </div>
        </form>
      </div>

      {/* News Articles Table */}
      <div style={styles.tableCard}>
        <h3 style={{ margin: '0 0 16px 0' }}>Daftar Berita ({newsList.length} artikel)</h3>
        {loading ? (
          <div style={{ color: '#94a3b8' }}>Memuat berita...</div>
        ) : newsList.length === 0 ? (
          <div style={{ color: '#94a3b8' }}>Belum ada berita untuk kedeputian ini.</div>
        ) : (
          <table style={styles.table}>
            <thead>
              <tr>
                <th style={{ ...styles.th, width: '60px' }}>No</th>
                <th style={styles.th}>Judul Berita (ID)</th>
                <th style={styles.th}>Ringkasan Konten</th>
                <th style={{ ...styles.th, width: '140px', textAlign: 'center' }}>Aksi</th>
              </tr>
            </thead>
            <tbody>
              {newsList.map((item, idx) => (
                <tr key={item.id} style={styles.tr}>
                  <td style={{ ...styles.td, textAlign: 'center' }}>{item.order_num || idx + 1}</td>
                  <td style={{ ...styles.td, fontWeight: 600 }}>{item.title_id}</td>
                  <td style={styles.td}>
                    {item.content_id?.replace(/<[^>]*>?/gm, '').slice(0, 100)}...
                  </td>
                  <td style={{ ...styles.td, textAlign: 'center' }}>
                    <button onClick={() => handleEdit(item)} style={styles.editBtn}>
                      Edit
                    </button>
                    <button onClick={() => handleDelete(item.id)} style={styles.deleteBtn}>
                      Hapus
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

const styles: { [key: string]: React.CSSProperties } = {
  headerRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '24px',
  },
  select: {
    padding: '10px 16px',
    borderRadius: '8px',
    backgroundColor: '#1e293b',
    color: '#ffffff',
    border: '1px solid #475569',
    fontSize: '14px',
    outline: 'none',
  },
  formCard: {
    backgroundColor: '#1e293b',
    borderRadius: '12px',
    padding: '24px',
    marginBottom: '32px',
    border: '1px solid #334155',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
  },
  row: {
    display: 'flex',
    gap: '16px',
  },
  label: {
    display: 'block',
    fontSize: '13px',
    fontWeight: 600,
    color: '#cbd5e1',
    marginBottom: '6px',
  },
  input: {
    width: '100%',
    padding: '10px 14px',
    borderRadius: '8px',
    border: '1px solid #475569',
    backgroundColor: '#0f172a',
    color: '#ffffff',
    fontSize: '14px',
    boxSizing: 'border-box',
  },
  textarea: {
    width: '100%',
    padding: '10px 14px',
    borderRadius: '8px',
    border: '1px solid #475569',
    backgroundColor: '#0f172a',
    color: '#ffffff',
    fontSize: '14px',
    fontFamily: 'inherit',
    boxSizing: 'border-box',
  },
  saveBtn: {
    padding: '10px 24px',
    borderRadius: '8px',
    backgroundColor: '#2563eb',
    color: '#ffffff',
    border: 'none',
    fontWeight: 600,
    cursor: 'pointer',
  },
  cancelBtn: {
    padding: '10px 20px',
    borderRadius: '8px',
    backgroundColor: '#475569',
    color: '#ffffff',
    border: 'none',
    cursor: 'pointer',
  },
  tableCard: {
    backgroundColor: '#1e293b',
    borderRadius: '12px',
    padding: '24px',
    border: '1px solid #334155',
  },
  table: {
    width: '100%',
    borderCollapse: 'collapse',
    fontSize: '14px',
  },
  th: {
    backgroundColor: '#0f172a',
    padding: '12px 16px',
    textAlign: 'left',
    color: '#94a3b8',
    borderBottom: '1px solid #334155',
  },
  tr: {
    borderBottom: '1px solid #334155',
  },
  td: {
    padding: '12px 16px',
    color: '#e2e8f0',
  },
  editBtn: {
    padding: '6px 12px',
    borderRadius: '6px',
    backgroundColor: '#d97706',
    color: '#ffffff',
    border: 'none',
    fontSize: '12px',
    fontWeight: 600,
    cursor: 'pointer',
    marginRight: '6px',
  },
  deleteBtn: {
    padding: '6px 12px',
    borderRadius: '6px',
    backgroundColor: '#dc2626',
    color: '#ffffff',
    border: 'none',
    fontSize: '12px',
    fontWeight: 600,
    cursor: 'pointer',
  },
  successAlert: {
    backgroundColor: '#064e3b',
    color: '#a7f3d0',
    padding: '12px 16px',
    borderRadius: '8px',
    marginBottom: '20px',
    fontSize: '14px',
    border: '1px solid #047857',
  },
};