import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Modal } from '../components/reusable';
import { StoresView } from '../components/rv';
import { StoreDetail } from '../components/dv';

import { Store } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { STORE } from '../api/config';
import { storeClient } from '../api/clients';

export function StoresPage() {
  const params = useParams();
  const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
  const navigate = useNavigate();
  const [isCreating, setIsCreating] = useState(false);
  const [createTitle, setCreateTitle] = useState("Create Store");
  const [editingInstanceId, setEditingInstanceId] = useState<number | string | null>(null);
  const [editTitle, setEditTitle] = useState("Edit Store");
  const [refreshKey, setRefreshKey] = useState(0);

  if (instanceId != null && !isCreating) {
    return (
      <div className="flex flex-col h-full bg-transparent w-full relative">
         <div className="flex-1 pb-24 w-full overflow-y-auto">
           <StoreDetail instanceId={instanceId} refreshKey={refreshKey} onBack={() => navigate(`/stores`)} />
         </div>

         {/* Edit store modal can still open over the detail view if needed */}
         <Modal
          open={editingInstanceId != null}
          onClose={() => setEditingInstanceId(null)}
          title={editTitle}
          width="md"
        >
          {editingInstanceId != null && (
            <DynamicForm 
              client={storeClient} 
              activityId={STORE.activities.EDIT_STORE.uid}
              instanceId={editingInstanceId}
              onSuccess={() => {
                setEditingInstanceId(null);
                setRefreshKey(k => k + 1);
              }}
              onCancel={() => setEditingInstanceId(null)}
              onActivityChange={(name) => setEditTitle(name)}
            />
          )}
        </Modal>
      </div>
    );
  }

  return (
    <>
      <StoresView 
        refreshKey={refreshKey}
        onRowClick={(row) => {
          const id = row.instance_id as number | string | undefined;
          if (id != null) navigate(`/stores/${id}`);
        }} 
        onEditRow={(row) => {
          setEditingInstanceId(row.instance_id as string | number);
          setEditTitle("Edit Store");
        }}
      />

      {/* Global Floating Action Button for Create Store */}
      <button
        onClick={() => { setIsCreating(true); setCreateTitle("Create Store"); }}
        className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-primary rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
      >
        <Store size={24} className="text-white" />
      </button>

      <Modal
        open={isCreating}
        onClose={() => setIsCreating(false)}
        title={createTitle}
        width="md"
      >
        <DynamicForm 
          client={storeClient} 
          activityId={STORE.activities.INIT.uid}
          onSuccess={() => {
            setIsCreating(false);
            setRefreshKey(k => k + 1);
          }}
          onCancel={() => setIsCreating(false)}
          onActivityChange={(name) => setCreateTitle(name)}
        />
      </Modal>

      <Modal
        open={editingInstanceId != null}
        onClose={() => setEditingInstanceId(null)}
        title={editTitle}
        width="md"
      >
        {editingInstanceId != null && (
          <DynamicForm 
            client={storeClient} 
            activityId={STORE.activities.EDIT_STORE.uid}
            instanceId={editingInstanceId}
            onSuccess={() => {
              setEditingInstanceId(null);
              setRefreshKey(k => k + 1);
            }}
            onCancel={() => setEditingInstanceId(null)}
            onActivityChange={(name) => setEditTitle(name)}
          />
        )}
      </Modal>
    </>
  );
}