import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { AppLayout } from '@/components/layout';
import { StatusBadge } from '@/components/status-badge';
import { sharePoint } from '@/lib/sharepoint';

export default async function ReviewPage() {
  const tasks = await sharePoint.getTasks();
  const blockers = tasks.filter(t => t.required && !['Completed', 'Waived'].includes(t.status));
  const canSubmit = blockers.length === 0;

  return (
    <AppLayout>
      <div className="page-title">
        <div>
          <h2>Final Review</h2>
          <p>Review completion status before submitting your onboarding packet for admin approval.</p>
        </div>
        <span className={canSubmit ? 'status completed' : 'status locked'}>{canSubmit ? 'Ready to Submit' : 'Locked'}</span>
      </div>

      <div className="grid grid-2">
        <section className="card">
          <h3>Completion Summary</h3>
          {tasks.map(task => (
            <div className="summary-row" key={task.taskId}>
              <div>
                <strong>{task.taskName}</strong>
                <p className="task-meta" style={{ margin: '4px 0 0' }}>{task.category}</p>
              </div>
              <StatusBadge status={task.status} />
            </div>
          ))}
        </section>

        <section className="card">
          <h3>{canSubmit ? 'Ready for admin review' : 'Outstanding items'}</h3>
          {canSubmit ? (
            <>
              <p>All required tasks are complete. Submit your packet for Grid Electric admin review.</p>
              <Link className="btn btn-primary" href="/complete">Submit Onboarding Packet</Link>
            </>
          ) : (
            <>
              <p>Complete or correct the following required tasks before final submission:</p>
              {blockers.map(task => (
                <Link className="task-card task-card-clickable task-card-interactive" href={task.href} key={task.taskId}>
                  <div className="task-card-content">
                    <div className="task-info">
                      <p className="task-title">{task.taskName}</p>
                      <p className="task-meta">{task.description}</p>
                    </div>
                  </div>
                  <div className="task-chevron">
                    <ChevronRight size={20} className="chevron-icon" />
                  </div>
                </Link>
              ))}
            </>
          )}
        </section>
      </div>
    </AppLayout>
  );
}