import { CheckCircle } from 'lucide-react';

import { WALKTHROUGH_FORM_CATEGORIES } from '@/shared/constants/walkthrough';
import { Button } from '@/components/ui/button';
import type { WalkthroughFormViewProps } from '@/components/walkthrough-form/types';

export function WalkthroughSubmitBar({ state, actions, submitting }: WalkthroughFormViewProps) {
  if (!state.teacherNameTrimmed || !state.classroomTrimmed) {
    return null;
  }

  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${state.canSubmit ? 'bg-emerald-400' : 'bg-amber-400'}`} />
        <p className="text-xs text-slate-500">
          {state.ratedCount}/{WALKTHROUGH_FORM_CATEGORIES.length} categories rated
        </p>
      </div>
      <Button
        type="button"
        onClick={() => {
          void actions.submit();
        }}
        disabled={!state.canSubmit || submitting}
        loading={submitting}
        loadingLabel="Submitting..."
        leadingIcon={<CheckCircle size={16} />}
        className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-semibold text-sm transition-all shadow-lg ${
          state.canSubmit && !submitting
            ? 'bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:from-indigo-600 hover:to-violet-600 shadow-indigo-500/25'
            : 'bg-slate-700/50 text-slate-500 cursor-not-allowed'
        }`}
      >
        Submit Walk-Through
      </Button>
    </div>
  );
}
