'use client';
import { useState, useRef } from 'react';
import { useHRStamp } from '../../../lib/hrStampStore';

export default function HRStampSection() {
  const { stamp, signature, setStamp, setSignature } = useHRStamp();
  const [toast, setToast] = useState('');
  const stampInputRef = useRef<HTMLInputElement>(null);
  const sigInputRef = useRef<HTMLInputElement>(null);

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3500); };

  const handleFile = (file: File, type: 'stamp' | 'sig') => {
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) { showToast('File too large. Maximum 2MB.'); return; }
    const reader = new FileReader();
    reader.onload = (e) => {
      const b64 = e.target?.result as string;
      if (type === 'stamp') { setStamp(b64); showToast('Office stamp saved successfully.'); }
      else { setSignature(b64); showToast('HR signature saved successfully.'); }
    };
    reader.readAsDataURL(file);
  };

  return (
    <div className="space-y-6">
      {toast && (
        <div className="fixed top-5 right-5 z-[100] bg-green-600 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium flex items-center gap-2">
          <i className="ri-checkbox-circle-line"></i> {toast}
        </div>
      )}

      <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 flex items-start gap-2">
        <i className="ri-information-line text-blue-600 mt-0.5"></i>
        <p className="text-xs text-blue-800">
          Upload your office stamp and HR officer signature. Once saved, they are <strong>automatically embedded</strong> at the bottom of all Leave Computation Forms downloaded from this portal, the HOD portal, and employee portals — but only after the HOS/CEO has approved the leave request.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
              <i className="ri-mark-pen-line text-purple-600 text-lg"></i>
            </div>
            <div>
              <h3 className="font-bold text-gray-800">Office Stamp</h3>
              <p className="text-xs text-gray-500">Scanned stamp to appear on computation forms</p>
            </div>
          </div>

          {stamp ? (
            <div className="mb-4 border-2 border-dashed border-purple-200 rounded-xl p-4 text-center bg-purple-50">
              <img src={stamp} alt="Office Stamp" className="h-28 w-auto object-contain mx-auto mb-2" />
              <p className="text-xs text-green-600 font-semibold"><i className="ri-checkbox-circle-fill mr-1"></i>Stamp uploaded — will be embedded in computation forms</p>
            </div>
          ) : (
            <div className="mb-4 border-2 border-dashed border-gray-200 rounded-xl p-6 text-center">
              <div className="w-12 h-12 flex items-center justify-center mx-auto mb-2 rounded-xl bg-gray-100">
                <i className="ri-mark-pen-line text-2xl text-gray-400"></i>
              </div>
              <p className="text-xs text-gray-500">No stamp uploaded yet</p>
              <p className="text-xs text-gray-400 mt-0.5">PNG, JPG up to 2MB</p>
            </div>
          )}

          <div className="flex gap-2">
            <button
              onClick={() => stampInputRef.current?.click()}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer whitespace-nowrap"
              style={{ background: '#b828a0' }}>
              <i className="ri-upload-cloud-line"></i>
              {stamp ? 'Replace Stamp' : 'Upload Stamp'}
            </button>
            {stamp && (
              <button
                onClick={() => { setStamp(null); showToast('Stamp removed.'); }}
                className="px-3 py-2.5 rounded-xl text-sm font-medium text-red-600 bg-red-50 border border-red-200 cursor-pointer whitespace-nowrap">
                <i className="ri-delete-bin-line"></i>
              </button>
            )}
          </div>
          <input
            ref={stampInputRef} type="file" accept="image/png,image/jpeg,image/jpg" className="hidden"
            onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'stamp'); e.target.value = ''; }}
          />
        </div>

        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
              <i className="ri-pen-nib-line text-blue-600 text-lg"></i>
            </div>
            <div>
              <h3 className="font-bold text-gray-800">HR Officer Signature</h3>
              <p className="text-xs text-gray-500">Scanned signature for computation forms</p>
            </div>
          </div>

          {signature ? (
            <div className="mb-4 border-2 border-dashed border-blue-200 rounded-xl p-4 text-center bg-blue-50">
              <img src={signature} alt="HR Signature" className="h-20 w-auto object-contain mx-auto mb-2" />
              <p className="text-xs text-green-600 font-semibold"><i className="ri-checkbox-circle-fill mr-1"></i>Signature uploaded — will be embedded in computation forms</p>
            </div>
          ) : (
            <div className="mb-4 border-2 border-dashed border-gray-200 rounded-xl p-6 text-center">
              <div className="w-12 h-12 flex items-center justify-center mx-auto mb-2 rounded-xl bg-gray-100">
                <i className="ri-pen-nib-line text-2xl text-gray-400"></i>
              </div>
              <p className="text-xs text-gray-500">No signature uploaded yet</p>
              <p className="text-xs text-gray-400 mt-0.5">PNG, JPG up to 2MB</p>
            </div>
          )}

          <div className="flex gap-2">
            <button
              onClick={() => sigInputRef.current?.click()}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer whitespace-nowrap"
              style={{ background: '#2563eb' }}>
              <i className="ri-upload-cloud-line"></i>
              {signature ? 'Replace Signature' : 'Upload Signature'}
            </button>
            {signature && (
              <button
                onClick={() => { setSignature(null); showToast('Signature removed.'); }}
                className="px-3 py-2.5 rounded-xl text-sm font-medium text-red-600 bg-red-50 border border-red-200 cursor-pointer whitespace-nowrap">
                <i className="ri-delete-bin-line"></i>
              </button>
            )}
          </div>
          <input
            ref={sigInputRef} type="file" accept="image/png,image/jpeg,image/jpg" className="hidden"
            onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'sig'); e.target.value = ''; }}
          />
        </div>
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3">
        <p className="text-xs font-semibold text-amber-700 mb-1"><i className="ri-lightbulb-line mr-1"></i>How it works</p>
        <ul className="text-xs text-amber-700 space-y-0.5 list-disc list-inside">
          <li>Upload your scanned office stamp and signature once — they are stored securely in this browser.</li>
          <li>When any user downloads a Leave Computation Form (after HOS approval), the stamp and signature are automatically embedded at the bottom.</li>
          <li>The stamp and signature will appear in the &quot;Authorized Signatures&quot; section of the form.</li>
          <li>To update, simply upload a new image — the old one is replaced automatically.</li>
        </ul>
      </div>
    </div>
  );
}