import React, { useRef, useState } from 'react';
import type { Attachment } from 'fhir/r4';
import type { ResolvedOrgTask } from '../../utils/orgSystemTasks';
import { usePhotoUploadService } from '../../services/PhotoUploadService';

export type OnboardingTaskFocusProps = {
  task: ResolvedOrgTask;
  totalSteps: number;
  /**
 * The workspace this step lives under, when the viewer does not hold it.
 *
 * Present means the action is replaced by a sentence naming who does it. Absent is the ordinary case.
 */
  unavailableWorkspaceNote?: string;
  onAction: () => void;
  onUploadLogo: (photo: Attachment) => Promise<void>;
  onSkip: () => void;
};

const LogoUploadButton = ({
  label,
  onUpload,
}: {
  label: string;
  onUpload: (photo: Attachment) => Promise<void>;
}) => {
  const { uploadPhoto } = usePhotoUploadService();
  const inputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    try {
      const { key, contentType, size } = await uploadPhoto(file, 'org-asset');
      const photo: Attachment = {
        // Named by key only: the server fills the bytes once this exact upload scans clean.
        contentType,
        url: key,
        title: file.name,
        size,
        creation: new Date().toISOString(),
      };
      await onUpload(photo);
    } finally {
      setUploading(false);
      if (e.target) e.target.value = '';
    }
  };

  return (
    <>
      <input ref={inputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />
      <button
        type="button"
        className="btn btn-blue"
        disabled={uploading}
        onClick={() => inputRef.current?.click()}
      >
        {uploading ? 'Uploading…' : label}
      </button>
    </>
  );
};

const OnboardingTaskFocus = ({
  task,
  totalSteps,
  unavailableWorkspaceNote,
  onAction,
  onUploadLogo,
  onSkip,
}: OnboardingTaskFocusProps) => {
  const isLogo = task.action?.kind === 'modal' && task.action.modalId === 'logo';
  // A step can legitimately have no button: the https step is a condition satisfied on the practice's web
  // host, and nothing in Akashic can change it. The footer is then not rendered at all rather than
  // rendered empty - an empty action row reads as a control that failed to load.
  const showFooter = Boolean(task.action) || !task.required;

  return (
    <div className="flex h-full flex-col gap-3">
      <div className="text-xs font-medium uppercase tracking-wide text-secondary">
        Step {task.order} of {totalSteps}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <h3 className="text-lg font-bold">{task.title}</h3>
        {task.required && (
          <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
            Required
          </span>
        )}
      </div>

      <div className="space-y-2 text-sm">
        <p>{task.whatItDoes}</p>
        <p className="text-secondary">{task.whyItMatters}</p>
        {task.dependencyNote && (
          <p className="rounded-md bg-amber-50 px-3 py-2 text-xs text-amber-ink">
            {task.dependencyNote}
          </p>
        )}
        {task.checklistItems && task.checklistItems.length > 0 && (
          <ul className="mt-2 flex flex-col gap-1 text-sm">
            {task.checklistItems.map((item) => (
              <li key={item.id} className="flex items-center gap-2">
                <span className="w-4 text-center" aria-hidden>{item.completed ? '✓' : '○'}</span>
                <span className={item.completed ? 'text-secondary line-through' : ''}>{item.label}</span>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* 🧭 CARD 697 — a step somebody else's hat owns says so, instead of offering a control that cannot
          work. The Platform Manager is often not an employee of the practice at all — it is the IT person
          or the web agency — so an admin who does not hold that hat is told who does. ⛔ What this replaces
          is the defect: a button that closed the dialog and changed nothing. */}
      {unavailableWorkspaceNote && (
        <p className="pt-2 text-sm text-secondary">
          This step is done in the <strong>{unavailableWorkspaceNote}</strong> workspace, which you do not
          have. Ask whoever manages your Akashic setup to do it.
        </p>
      )}

      {showFooter && (
        <div className="mt-auto flex items-center gap-4 pt-2">
          {/* ⭐ The ACTION is suppressed, not the whole footer: a step somebody else owns is still one this
              admin may mark not-applicable, and taking Skip away with the button would strand them on it. */}
          {isLogo ? (
            <LogoUploadButton label={task.actionLabel} onUpload={onUploadLogo} />
          ) : (
            task.action && !unavailableWorkspaceNote && (
              <button type="button" className="btn btn-blue" onClick={onAction}>
                {task.actionLabel}
              </button>
            )
          )}
          {!task.required && (
            <button
              type="button"
              className="text-sm text-secondary underline hover:no-underline"
              onClick={onSkip}
            >
              Skip / not applicable
            </button>
          )}
        </div>
      )}
    </div>
  );
};

export default OnboardingTaskFocus;