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 SharingHelpPage() {
  return (
    <HelpArticle
      title="Sharing & Household Members"
      description="Invite family members to your residences, share contractor contacts, and collaborate on home maintenance together."
    >
      <HelpSection id="share-codes" title="Invite with Share Codes">
        <p>
          Every residence has a unique share code that lets you invite household
          members. When someone joins with your code, they get full access to that
          residence&apos;s tasks, documents, and contractors.
        </p>
        <ScreenshotPlaceholder alt="Share code dialog showing the invite code and copy button" />
        <p>To generate a share code:</p>
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Open the residence you want to share.</li>
          <li>Tap the <strong>Share</strong> button or go to residence settings.</li>
          <li>Copy the generated code and send it to your household member.</li>
        </ol>
        <HelpCallout type="tip">
          Share codes are single-use for security. Generate a new one for each person you invite.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="joining" title="Joining a Residence">
        <p>
          If someone shared a code with you, you can join their residence from
          the residences screen.
        </p>
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to your <strong>Residences</strong> list.</li>
          <li>Tap <strong>Join Residence</strong>.</li>
          <li>Enter the share code you received.</li>
          <li>The residence will appear in your list immediately.</li>
        </ol>
        <ScreenshotPlaceholder alt="Join residence screen with share code input field" />
      </HelpSection>

      <HelpSection id="household-members" title="Managing Household Members">
        <p>
          Once someone joins your residence, they can view and manage tasks,
          contractors, and documents for that property. All changes sync
          automatically for everyone.
        </p>
        <ScreenshotPlaceholder alt="Residence members list showing household users" />
        <HelpCallout type="note">
          The residence owner can remove members at any time from the residence
          settings page.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="contractor-sharing" title="Sharing Contractors">
        <p>
          Contractors can be shared between household members who are part of the
          same residence. When you add a contractor to a residence, everyone in
          that household can see and use them.
        </p>
        <p>
          You can also export your contractors as a <strong>.honeydue file</strong> to
          share with anyone — even people who aren&apos;t in your household yet.
        </p>
      </HelpSection>

      <HelpSection id="honeydue-files" title="The .honeydue File Format">
        <p>
          A <code className="text-sm bg-[#F2EFE9] px-1.5 py-0.5 rounded">.honeydue</code> file
          is a portable way to share contractor contacts. It contains names,
          specialties, phone numbers, and notes — everything someone needs to
          import your trusted pros.
        </p>
        <ScreenshotPlaceholder alt="Export contractors dialog with .honeydue file download" />
        <p><strong>To export:</strong></p>
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to your <strong>Contractors</strong> list.</li>
          <li>Tap the <strong>Export</strong> button.</li>
          <li>Choose which contractors to include.</li>
          <li>Download or share the .honeydue file.</li>
        </ol>
        <p className="mt-4"><strong>To import:</strong></p>
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to your <strong>Contractors</strong> list.</li>
          <li>Tap <strong>Import</strong>.</li>
          <li>Select a .honeydue file from your device.</li>
          <li>Review the contractors and confirm the import.</li>
        </ol>
        <HelpCallout type="tip">
          Importing won&apos;t create duplicates — if a contractor with the same name
          and phone number already exists, it will be skipped.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="privacy" title="Privacy & Permissions">
        <p>
          Your data stays private. Sharing a residence only gives access to that
          specific property — not your other homes or personal account details.
        </p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li>Household members can only see residences they&apos;ve been invited to.</li>
          <li>Removing a member revokes their access immediately.</li>
          <li>Exported .honeydue files contain only contractor data, never personal information.</li>
          <li>Share codes expire and cannot be reused.</li>
        </ul>
      </HelpSection>
    </HelpArticle>
  );
}
