import { useNavigate, useParams } from 'react-router-dom';
import { Modal } from '../components/reusable';
import { CallsView } from '../components/rv';
import { CallDetail } from '../components/dv';
import { useState } from 'react';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { ORDER_BOOKING } from '../api/config';
import { orderBookingClient } from '../api/clients';

export function CallsPage() {
  const params = useParams();
  const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
  const navigate = useNavigate();
  const [isCreating, setIsCreating] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);
  const [activeActivity, setActiveActivity] = useState<{ id: string; name: string } | null>(null);
  const [isFabOpen, setIsFabOpen] = useState(false);

  return (
    <>
      <CallsView
        refreshKey={refreshKey}
        onRowClick={(row) => {
          const id = row.instance_id as number | string | undefined;
          if (id != null) navigate(`/calls/${id}`);
        }}
        headerActions={
          <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
            Log Visit
          </Button>
        }
      />

      <Modal
        open={isCreating}
        onClose={() => setIsCreating(false)}
        title="Log Visit"
        width="md"
      >
        <DynamicForm
          client={orderBookingClient}
          activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
          onSuccess={() => {
            setIsCreating(false);
            setRefreshKey(k => k + 1);
          }}
          onCancel={() => setIsCreating(false)}
        />
      </Modal>

      <Modal
        open={instanceId != null}
        onClose={() => { navigate(`/calls`); setIsFabOpen(false); }}
        title={instanceId != null ? `Call #${instanceId}` : undefined}
        width="lg"
      >
        {instanceId != null && (
          <>
            <CallDetail instanceId={instanceId} />
            <div className="absolute bottom-6 right-6 flex flex-col items-end gap-3 z-50">
              {isFabOpen && (
                <div className="flex flex-col gap-2 bg-white p-3 rounded-sm shadow-xl border border-border-subtle animate-in fade-in slide-in-from-bottom-2">
                  <Button size="sm" variant="secondary" onClick={() => { setActiveActivity({ id: ORDER_BOOKING.activities.POTENTIAL_MINING.uid, name: 'Potential Mining' }); setIsFabOpen(false); }}>
                    Potential Mining
                  </Button>
                  <Button size="sm" onClick={() => { setActiveActivity({ id: ORDER_BOOKING.activities.PLACE_ORDER.uid, name: 'Place Order' }); setIsFabOpen(false); }}>
                    Place Order
                  </Button>
                </div>
              )}
              <Button size='fab'
                className="rounded-full shadow-xl flex items-center justify-center !p-0"
                onClick={() => setIsFabOpen(!isFabOpen)}
              >
                <Plus size={24} className={`transition-transform duration-200 ${isFabOpen ? "rotate-45" : ""}`} />
              </Button>
            </div>
          </>
        )}
      </Modal>

      <Modal
        open={activeActivity != null}
        onClose={() => setActiveActivity(null)}
        title={activeActivity?.name}
        width="md"
      >
        {activeActivity && instanceId != null && (
          <DynamicForm
            client={orderBookingClient}
            activityId={activeActivity.id}
            instanceId={instanceId}
            ignorePrefill={activeActivity.id === ORDER_BOOKING.activities.PLACE_ORDER.uid}
            onSuccess={() => {
              setActiveActivity(null);
              setRefreshKey(k => k + 1);
            }}
            onCancel={() => setActiveActivity(null)}
          />
        )}
      </Modal>
    </>
  );
}