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

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

export const OrgStructureManager: React.FC = () => {
  const [deputies, setDeputies] = useState<Deputy[]>([]);
  const [selectedDeputy, setSelectedDeputy] = useState<string>('secretariat');
  const [imageIdUrl, setImageIdUrl] = useState('');
  const [imageEnUrl, setImageEnUrl] = useState('');
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('');

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

  const loadOrgStructure = async (deputyKey: string) => {
    try {
      const data = await fetchApi(`/organization?deputy_key=${deputyKey}`);
      if (data && data.length > 0) {
        setImageIdUrl(data[0].image_id_url || '');
        setImageEnUrl(data[0].image_en_url || '');
      } else {
        setImageIdUrl(`/assets/organization/id/${deputyKey}.png`);
        setImageEnUrl(`/assets/organization/en/${deputyKey}.png`);
      }
    } catch (err) {
      console.error(err);
    }
  };

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

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>, lang: 'id' | 'en') => {
    if (!e.target.files || e.target.files.length === 0) return;
    const file = e.target.files[0];
    setUploading(true);

    try {
      const result = await uploadFile(file);
      if (lang === 'id') {
        setImageIdUrl(result.url);
      } else {
        setImageEnUrl(result.url);
      }
      setMessage(`Bagan struktur organisasi berhasil diunggah!`);
    } catch (err: any) {
      alert(err.message || 'Gagal mengunggah gambar.');
    } finally {
      setUploading(false);
    }
  };

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

    try {
      await fetchApi(`/organization/${selectedDeputy}`, {
        method: 'PUT',
        body: JSON.stringify({
          image_id_url: imageIdUrl,
          image_en_url: imageEnUrl || imageIdUrl,
        }),
      });
      setMessage('Struktur Organisasi berhasil diperbarui di database!');
    } catch (err: any) {
      alert(err.message || 'Gagal memperbarui struktur organisasi.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div style={styles.headerRow}>
        <h1 style={{ fontSize: '22px', fontWeight: 700, margin: 0 }}>Kelola Struktur Organisasi</h1>

        <select
          value={selectedDeputy}
          onChange={(e) => {
            setSelectedDeputy(e.target.value);
            setMessage('');
          }}
          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>}

      <div style={styles.card}>
        <h3 style={{ margin: '0 0 16px 0', color: '#60a5fa' }}>
          🏢 Bagan Struktur Organisasi - {deputies.find((d) => d.key_name === selectedDeputy)?.title_id}
        </h3>

        <form onSubmit={handleSubmit} style={styles.form}>
          <div style={styles.row}>
            <div style={{ flex: 1 }}>
              <label style={styles.label}>Bagan Bahasa Indonesia (URL / Unggah Gambar)</label>
              <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                <input
                  type="text"
                  value={imageIdUrl}
                  onChange={(e) => setImageIdUrl(e.target.value)}
                  required
                  style={{ ...styles.input, flex: 1 }}
                />
                <label style={styles.uploadBtn}>
                  📁 Unggah Gambar
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handleFileUpload(e, 'id')}
                    style={{ display: 'none' }}
                  />
                </label>
              </div>

              {imageIdUrl && (
                <div style={styles.previewBox}>
                  <p style={styles.previewTitle}>Preview (Bahasa Indonesia):</p>
                  <img src={imageIdUrl} alt="Structure ID" style={styles.previewImg} />
                </div>
              )}
            </div>

            <div style={{ flex: 1 }}>
              <label style={styles.label}>Bagan Bahasa Inggris (URL / Unggah Gambar)</label>
              <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                <input
                  type="text"
                  value={imageEnUrl}
                  onChange={(e) => setImageEnUrl(e.target.value)}
                  placeholder="URL versi Inggris (Opsional)..."
                  style={{ ...styles.input, flex: 1 }}
                />
                <label style={styles.uploadBtn}>
                  📁 Unggah Gambar
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handleFileUpload(e, 'en')}
                    style={{ display: 'none' }}
                  />
                </label>
              </div>

              {imageEnUrl && (
                <div style={styles.previewBox}>
                  <p style={styles.previewTitle}>Preview (Bahasa Inggris):</p>
                  <img src={imageEnUrl} alt="Structure EN" style={styles.previewImg} />
                </div>
              )}
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
            <button type="submit" disabled={saving || uploading} style={styles.saveBtn}>
              {saving ? 'Menyimpan...' : 'Simpan Bagan Struktur Organisasi'}
            </button>
          </div>
        </form>
      </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',
  },
  card: {
    backgroundColor: '#1e293b',
    borderRadius: '12px',
    padding: '24px',
    border: '1px solid #334155',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
  },
  row: {
    display: 'flex',
    gap: '24px',
  },
  label: {
    display: 'block',
    fontSize: '13px',
    fontWeight: 600,
    color: '#cbd5e1',
    marginBottom: '6px',
  },
  input: {
    padding: '10px 14px',
    borderRadius: '8px',
    border: '1px solid #475569',
    backgroundColor: '#0f172a',
    color: '#ffffff',
    fontSize: '14px',
  },
  uploadBtn: {
    padding: '10px 16px',
    borderRadius: '8px',
    backgroundColor: '#334155',
    color: '#ffffff',
    fontSize: '13px',
    fontWeight: 600,
    cursor: 'pointer',
    whiteSpace: 'nowrap',
    display: 'flex',
    alignItems: 'center',
  },
  previewBox: {
    backgroundColor: '#0f172a',
    borderRadius: '8px',
    padding: '16px',
    border: '1px solid #334155',
    textAlign: 'center',
  },
  previewTitle: {
    fontSize: '12px',
    color: '#94a3b8',
    margin: '0 0 8px 0',
  },
  previewImg: {
    maxWidth: '100%',
    maxHeight: '300px',
    objectFit: 'contain',
    borderRadius: '6px',
  },
  saveBtn: {
    padding: '12px 28px',
    borderRadius: '8px',
    backgroundColor: '#2563eb',
    color: '#ffffff',
    border: 'none',
    fontWeight: 600,
    cursor: 'pointer',
    fontSize: '14px',
  },
  successAlert: {
    backgroundColor: '#064e3b',
    color: '#a7f3d0',
    padding: '12px 16px',
    borderRadius: '8px',
    marginBottom: '20px',
    fontSize: '14px',
    border: '1px solid #047857',
  },
};