import Link from 'next/link';

import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

interface ChecklistItem {
  href: string;
  label: string;
  description: string;
}

const CHECKLIST: ChecklistItem[] = [
  {
    href: 'branding',
    label: 'Set port name, logo, primary colour',
    description: 'Branding flows into the navbar, emails, and EOI PDFs.',
  },
  {
    href: 'email',
    label: 'Configure outgoing email',
    description:
      'From-address, signature, footer, plus per-port SMTP overrides if you don’t use the global account.',
  },
  {
    href: 'documenso',
    label: 'Connect Documenso for EOIs',
    description:
      'API credentials and the EOI template id, plus the in-app vs Documenso pathway choice.',
  },
  {
    href: 'settings',
    label: 'Tune business rules + recommender weights',
    description:
      'Pipeline weights, net-10 discount, berth recommender knobs (heat weights, fall-through policy).',
  },
  {
    href: 'roles',
    label: 'Create roles & assign users',
    description: 'Per-port roles inherit from the global system roles; override permissions here.',
  },
  {
    href: 'invitations',
    label: 'Invite the rest of the team',
    description:
      'Invitations track pending, expired, and accepted state and can be resent or revoked.',
  },
  {
    href: 'tags',
    label: 'Define starter tags',
    description: 'Color-coded labels used across clients, yachts, companies, and interests.',
  },
  {
    href: 'forms',
    label: 'Wire the website intake forms',
    description:
      'Inquiry forms on the marketing site dual-write into the CRM via /api/public/website-inquiries.',
  },
];

export default function OnboardingPage() {
  return (
    <div>
      <PageHeader
        title="Port onboarding"
        description="Recommended order to bring a new port live. Each step links to the right admin page."
      />

      <Card className="mt-6">
        <CardHeader>
          <CardTitle>Setup checklist</CardTitle>
          <CardDescription>
            Work through these in order. The future onboarding wizard will track progress per port;
            for now this is a guided index.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ol className="space-y-4">
            {CHECKLIST.map((item, idx) => (
              <li key={item.href} className="flex gap-4">
                <span className="flex-none w-7 h-7 rounded-full bg-primary/10 text-primary font-medium text-sm flex items-center justify-center mt-0.5">
                  {idx + 1}
                </span>
                <div className="flex-1">
                  <Link
                    href={`./${item.href}` as never}
                    className="text-sm font-medium hover:underline"
                  >
                    {item.label}
                  </Link>
                  <p className="text-sm text-muted-foreground mt-0.5">{item.description}</p>
                </div>
              </li>
            ))}
          </ol>
        </CardContent>
      </Card>

      <Card className="mt-4">
        <CardHeader>
          <CardTitle>What this page will become</CardTitle>
          <CardDescription>
            A guided wizard that walks per-port admins through the same steps with progress
            tracking.
          </CardDescription>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground">
          The wizard will record completion per port in <code>system_settings</code>, gate the
          public marketing-site cutover until required steps are done, and surface a banner on the
          dashboard when onboarding is incomplete.
        </CardContent>
      </Card>
    </div>
  );
}