import React from 'react';
import { AuthProvider, useAuth } from './context/AuthContext.tsx';
import { FarmProvider } from './context/FarmContext.tsx';
import AuthPage from './components/auth/AuthPage.tsx';
import FeedInButtonPanel from './components/feedInButton/FeedInButtonPanel.tsx';
import { Banner, Spinner } from './components/ui/Feedback.tsx';
import { useFarm } from './context/FarmContext.tsx';

const ButtonContent: React.FC = () => {
  const { error } = useFarm();

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col">
      <header className="bg-white border-b border-gray-200 px-6 py-4">
        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            <img src="/favicon.png" alt="Logo" className="h-10 object-contain" />
            <div>
              <h1 className="text-xl font-bold text-gray-800">Feed In/Out Button</h1>
              <p className="text-sm text-gray-500">Pilih kandang untuk memulai hitung feed in</p>
            </div>
          </div>
          <a
            href="/"
            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 hover:text-red-600 shrink-0"
          >
            <i className="fa-solid fa-arrow-left" />
            Kembali ke Dashboard
          </a>
        </div>
      </header>
      <main className="flex-1 px-6 py-10">
        {error && (
          <div className="max-w-5xl mx-auto mb-6">
            <Banner kind="error">{error}</Banner>
          </div>
        )}
        <FeedInButtonPanel variant="kiosk" />
      </main>
    </div>
  );
};

const Gate: React.FC = () => {
  const { user, loading } = useAuth();
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-100">
        <Spinner />
      </div>
    );
  }
  if (!user) return <AuthPage />;
  return (
    <FarmProvider>
      <ButtonContent />
    </FarmProvider>
  );
};

const ButtonApp: React.FC = () => (
  <AuthProvider>
    <Gate />
  </AuthProvider>
);

export default ButtonApp;