import { useEffect, useState } from 'react';
import api from '../services/api';
import toast from 'react-hot-toast';
import { BuildingStorefrontIcon } from '@heroicons/react/24/outline';

export default function StoreSettings() {
  const [form, setForm] = useState({
    business_name: '',
    business_address: '',
    business_phone: '',
    receipt_message: '',
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api.get('/settings').then(res => {
      const s = res.data.data;
      setForm({
        business_name:    s.business_name    || '',
        business_address: s.business_address || '',
        business_phone:   s.business_phone   || '',
        receipt_message:  s.receipt_message  || '',
      });
    }).finally(() => setLoading(false));
  }, []);

  async function handleSave(e) {
    e.preventDefault();
    if (!form.business_name.trim()) return toast.error('Nama usaha wajib diisi');
    setSaving(true);
    try {
      await api.put('/settings', form);
      toast.success('Pengaturan berhasil disimpan');
    } finally { setSaving(false); }
  }

  const f = (k, v) => setForm(p => ({ ...p, [k]: v }));

  if (loading) return (
    <div className="flex items-center justify-center py-20 text-gray-400">Memuat...</div>
  );

  return (
    <div className="max-w-xl space-y-6">
      <div className="card p-6">
        <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
          <div className="w-10 h-10 rounded-xl bg-orange-100 flex items-center justify-center">
            <BuildingStorefrontIcon className="w-5 h-5 text-orange-500" />
          </div>
          <div>
            <h2 className="font-semibold text-gray-800">Informasi Usaha</h2>
            <p className="text-xs text-gray-400">Ditampilkan pada struk / invoice</p>
          </div>
        </div>

        <form onSubmit={handleSave} className="space-y-4">
          <div>
            <label className="label">Nama Usaha *</label>
            <input className="input" value={form.business_name}
              onChange={e => f('business_name', e.target.value)}
              placeholder="Contoh: Antang Garage Oli" />
          </div>

          <div>
            <label className="label">Alamat Usaha</label>
            <textarea className="input resize-none" rows={2} value={form.business_address}
              onChange={e => f('business_address', e.target.value)}
              placeholder="Jl. Antang Raya No. 102 Kota Makassar" />
          </div>

          <div>
            <label className="label">Nomor Telepon / WhatsApp</label>
            <input className="input" value={form.business_phone}
              onChange={e => f('business_phone', e.target.value)}
              placeholder="0811425907" />
          </div>

          <div>
            <label className="label">Pesan Singkat di Struk</label>
            <input className="input" value={form.receipt_message}
              onChange={e => f('receipt_message', e.target.value)}
              placeholder="Terima kasih telah berkunjung!" maxLength={300} />
            <p className="text-xs text-gray-400 mt-1">{form.receipt_message.length}/300 karakter</p>
          </div>

          <div className="pt-2 border-t border-gray-100">
            <div className="bg-gray-50 rounded-xl p-4 mb-4 text-xs text-gray-500 space-y-0.5 font-mono">
              <p className="font-bold text-gray-700 text-center">{form.business_name || 'Nama Usaha'}</p>
              <p className="text-center">{form.business_address || 'Alamat usaha'}</p>
              <p className="text-center">Telp: {form.business_phone || '—'}</p>
              <p className="text-center text-gray-400 pt-1">— — — — — — — —</p>
              <p className="text-center italic">{form.receipt_message || 'Pesan singkat'}</p>
            </div>
            <button type="submit" disabled={saving} className="btn-primary w-full justify-center">
              {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
