import { HelpArticle } from "@/components/help/help-article";
import { HelpSection } from "@/components/help/help-section";
import { HelpCallout } from "@/components/help/help-callout";
import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder";

export default function TasksHelpPage() {
  return (
    <HelpArticle
      title="Tasks"
      description="Create, organize, and complete home maintenance tasks with kanban boards, recurring schedules, and priority tracking."
    >
      <HelpSection id="creating" title="Creating Tasks">
        <p>
          Tasks represent anything you need to do for your home — from replacing
          a filter to scheduling an annual inspection.
        </p>
        <ScreenshotPlaceholder alt="Create task form with title, category, priority, due date, and frequency fields" />
        <p>When creating a task, you can set:</p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li><strong>Title</strong> — A short description (e.g., &quot;Replace HVAC filter&quot;)</li>
          <li><strong>Category</strong> — Group tasks by area (plumbing, electrical, exterior, etc.)</li>
          <li><strong>Priority</strong> — Low, medium, or high</li>
          <li><strong>Due date</strong> — When the task should be completed</li>
          <li><strong>Frequency</strong> — For recurring tasks (weekly, monthly, quarterly, etc.)</li>
          <li><strong>Notes</strong> — Additional details or instructions</li>
          <li><strong>Contractor</strong> — Link a service provider to the task</li>
        </ul>
        <HelpCallout type="tip">
          Use task templates for common maintenance items. Start typing and
          suggestions will appear based on popular home maintenance tasks.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="kanban" title="Kanban Board">
        <p>
          Tasks are organized on a kanban board with columns that automatically
          sort based on due dates and completion status:
        </p>
        <ScreenshotPlaceholder alt="Kanban board showing overdue, due soon, in progress, not started, and completed columns" />
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li><strong>Overdue</strong> — Tasks past their due date</li>
          <li><strong>Due Soon</strong> — Tasks due within the next 30 days</li>
          <li><strong>In Progress</strong> — Tasks you&apos;ve started working on</li>
          <li><strong>Not Started</strong> — Future tasks with no due date pressure</li>
          <li><strong>Completed</strong> — Finished tasks</li>
        </ul>
        <p>
          Drag and drop tasks between columns to update their status, or tap a
          task to edit its details.
        </p>
      </HelpSection>

      <HelpSection id="recurring" title="Recurring Tasks">
        <p>
          Many home maintenance items happen on a schedule. Set a frequency when
          creating a task, and honeyDue will automatically create the next
          occurrence after you complete the current one.
        </p>
        <ScreenshotPlaceholder alt="Task with recurring frequency set to monthly" />
        <p>Available frequencies include:</p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li>Weekly</li>
          <li>Bi-weekly</li>
          <li>Monthly</li>
          <li>Quarterly</li>
          <li>Semi-annually</li>
          <li>Annually</li>
        </ul>
        <HelpCallout type="note">
          When you complete a recurring task, the next due date is automatically
          calculated based on the frequency. The task moves back to the
          appropriate kanban column.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="completing" title="Completing Tasks">
        <p>
          Mark a task as complete by tapping the completion button. You can
          optionally add a note and attach photos documenting the work.
        </p>
        <ScreenshotPlaceholder alt="Task completion dialog with notes field and photo upload" />
        <p>
          Completion records are saved as a history — useful for tracking when
          maintenance was last performed and what was done.
        </p>
      </HelpSection>

      <HelpSection id="contractors" title="Linking Contractors">
        <p>
          Associate a contractor with a task to remember who did the work. This
          is especially helpful for recurring tasks where you want to call the
          same plumber or electrician each time.
        </p>
        <HelpCallout type="tip">
          Linked contractors appear on the task card for quick access to their
          contact information.
        </HelpCallout>
      </HelpSection>
    </HelpArticle>
  );
}
