import { AppLayout } from '@/components/layout';
import { ProgressCard } from '@/components/progress-card';
import { TaskCard } from '@/components/task-card';
import { sharePoint } from '@/lib/sharepoint';

export default async function DashboardPage() {
  const candidate = await sharePoint.getCandidate();
  const tasks = await sharePoint.getTasks();
  const incomplete = tasks.filter(t => t.status !== 'Completed');

  return (
    <AppLayout>
      <div className="page-title">
        <div>
          <h2>Welcome, {candidate.firstName}</h2>
          <p>{candidate.workerType} onboarding for <strong>{candidate.role}</strong>. Complete the required tasks below before final admin review.</p>
        </div>
        <span className="status progress">{candidate.status}</span>
      </div>

      <div className="grid grid-3">
        <ProgressCard percent={candidate.progressPercent} />
        <div className="card">
          <h3>Candidate</h3>
          <p><strong>{candidate.legalName}</strong><br />{candidate.email}<br />{candidate.phone}</p>
        </div>
        <div className="card">
          <h3>Next required item</h3>
          <p>{incomplete[0]?.taskName ?? 'All required tasks are complete.'}</p>
        </div>
      </div>

      <section className="card" style={{ marginTop: 22 }}>
        <h3>Required Checklist</h3>
        <p>Tasks are written to the SharePoint task list and recalculated after each update.</p>
        {tasks.map(task => <TaskCard key={task.taskId} task={task} />)}
      </section>
    </AppLayout>
  );
}