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

import { ClipboardList } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { DAILY_REPORTS } from '../api/config';
import { dailyReportsClient } from '../api/clients';

export function AllDailyLogsPage() {
  const params = useParams();
  const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
  const navigate = useNavigate();
  const [isCreating, setIsCreating] = useState(false);
  const [createTitle, setCreateTitle] = useState("Punch In");
  const [punchOutInstanceId, setPunchOutInstanceId] = useState<number | string | null>(null);
  const [punchOutTitle, setPunchOutTitle] = useState("Punch Out");
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <>
      <DailyLogsView 
        refreshKey={refreshKey}
        preset_alias={undefined}
        title="All Daily Logs"
        onRowClick={(row) => {
          const id = row.instance_id as number | string | undefined;
          if (id != null) navigate(`/all-daily/${id}`);
        }} 
        onPunchOutRow={(row) => {
          setPunchOutInstanceId(row.instance_id as string | number);
          setPunchOutTitle("Punch Out");
        }}
      />

      {/* Global Floating Action Button for Punch In */}
      <button
        onClick={() => { setIsCreating(true); setCreateTitle("Punch In"); }}
        className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] 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"
      >
        <ClipboardList size={24} className="text-white" />
      </button>

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

      <Modal
        open={punchOutInstanceId != null}
        onClose={() => setPunchOutInstanceId(null)}
        title={punchOutTitle}
        width="md"
      >
        {punchOutInstanceId != null && (
          <DynamicForm 
            client={dailyReportsClient} 
            activityId={DAILY_REPORTS.activities.PUNCH_OUT.uid}
            instanceId={punchOutInstanceId}
            onSuccess={() => {
              setPunchOutInstanceId(null);
              setRefreshKey(k => k + 1);
            }}
            onCancel={() => setPunchOutInstanceId(null)}
            onActivityChange={(name) => setPunchOutTitle(name)}
          />
        )}
      </Modal>

      <Modal
        open={instanceId != null}
        onClose={() => navigate(`/all-daily`)}
        title={instanceId != null ? `Daily Log #${instanceId}` : undefined}
        width="lg"
      >
        {instanceId != null && <DailyLogDetail instanceId={instanceId} />}
      </Modal>
    </>
  );
}