'use client';

import Link from 'next/link';
import { Lock, Loader2, ArrowRight } from 'lucide-react';
import type { ReactNode } from 'react';
import { useVerification } from '@/lib/verification-context';

/**
 * Wrap doctor-only feature pages so they show a friendly locked state
 * until the admin approves the doctor's application. The backend also
 * rejects the relevant writes with a 403 — this is the UI polish on top.
 */
export function LockedFeatureGate({
  feature,
  children,
}: {
  feature: 'appointments' | 'prescriptions' | 'consultations';
  children: ReactNode;
}) {
  const { status, loading } = useVerification();

  if (loading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
      </div>
    );
  }

  // Verification API unreachable — fall open rather than locking the user out.
  if (!status || status.isApproved) {
    return <>{children}</>;
  }

  const featureCopy = FEATURE_COPY[feature];
  const docMissing =
    status.documents.requiredUploaded < status.documents.requiredTotal;
  const profileIncomplete = status.profileCompletion.percent < 100;

  let primaryMessage: string;
  let actionHref = '/documents';
  let actionLabel = 'Upload documents';

  if (status.isRejected) {
    primaryMessage =
      'Your application was not approved. Please update your documents and re-submit for review.';
  } else if (docMissing) {
    primaryMessage = `Upload your verification documents (${status.documents.requiredUploaded}/${status.documents.requiredTotal} done) to start the review process.`;
  } else if (profileIncomplete) {
    primaryMessage = `Finish your profile (${status.profileCompletion.percent}% complete) so our team can verify you.`;
    actionHref = '/profile';
    actionLabel = 'Finish profile';
  } else {
    primaryMessage =
      'Your profile is complete and under review. You will receive an email as soon as the admin approves your account.';
    actionLabel = 'View documents';
  }

  return (
    <div className="mx-auto max-w-2xl px-6 py-16">
      <div className="rounded-xl border border-denseSurface-border bg-white p-8 text-center shadow-sm">
        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-warning/10">
          <Lock className="h-6 w-6 text-warning" />
        </div>
        <h1 className="mt-4 text-lg font-bold text-ink-1">
          {featureCopy.title} are unlocked after verification
        </h1>
        <p className="mt-2 text-sm text-ink-2">{primaryMessage}</p>

        <div className="mt-5 inline-flex items-center justify-center rounded-full bg-denseSurface-bg px-3 py-1.5 text-xs font-semibold text-ink-2">
          Profile completion: {status.profileCompletion.percent}%
        </div>

        <div className="mt-6 flex justify-center gap-2">
          <Link
            href={actionHref}
            className="inline-flex items-center gap-1.5 rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600"
          >
            {actionLabel}
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link
            href="/dashboard"
            className="inline-flex items-center gap-1.5 rounded-md border border-denseSurface-border bg-white px-4 py-2 text-sm font-semibold text-ink-2 hover:border-brand-300"
          >
            Back to dashboard
          </Link>
        </div>

        <ul className="mt-8 space-y-1.5 text-left text-xs text-ink-2">
          {status.profileCompletion.sections.map((s) => (
            <li key={s.key} className="flex items-center gap-2">
              <span
                className={`inline-block h-2 w-2 rounded-full ${
                  s.done ? 'bg-success' : 'bg-coral-400'
                }`}
              />
              <span className={s.done ? 'line-through opacity-70' : ''}>
                {s.label}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

const FEATURE_COPY = {
  appointments: { title: 'Appointments' },
  prescriptions: { title: 'Prescriptions' },
  consultations: { title: 'Consultation notes' },
};