import { Globe, Handshake, Store, Wallet } from 'lucide-react'
import { Link } from 'react-router-dom'

import { AppShell } from '@/components/layout/AppShell'
import { Alert, Badge, Button, Card, CardBody, CardHeader } from '@/components/ui'
import { useAuth } from '@/features/auth/AuthProvider'

/**
 * The signed-in landing surface.
 *
 * Deliberately shows no figures yet. Portfolio counts, offer totals and revenue
 * arrive with the phases that create those records; inventing placeholder
 * numbers on a financial dashboard would be worse than showing none, because a
 * seller cannot tell a mock total from a real one.
 */
export function DashboardPage() {
  const { user } = useAuth()

  const nextSteps = [
    {
      Icon: Globe,
      title: 'Confirm your email address',
      body: 'Required before making an offer, buying, or listing a domain.',
      done: user?.email_verified === true,
      action: { to: '/verify-email/pending', label: 'Confirm email' },
    },
    {
      Icon: Store,
      title: 'Set up selling',
      body: 'Add a public seller name so you can list domains you own.',
      done: user?.is_seller === true,
      action: { to: '/settings/seller', label: 'Set up selling' },
    },
    {
      Icon: Handshake,
      title: 'Turn on two-factor authentication',
      body: 'The most effective single step to protect a domain portfolio.',
      done: user?.two_factor_enabled === true,
      action: { to: '/settings/security', label: 'Enable two-factor' },
    },
  ]

  const outstanding = nextSteps.filter((step) => !step.done)

  return (
    <AppShell>
      <div className="container-page py-10 lg:py-14">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h1 className="text-2xl font-semibold tracking-[-0.02em] text-text-primary">
              Welcome back, {user?.profile?.display_name ?? user?.name}
            </h1>
            <p className="mt-1.5 text-sm text-text-secondary">
              Everything you buy, sell and watch, in one place.
            </p>
          </div>

          <div className="flex gap-2">
            <Link to="/domains">
              <Button variant="secondary">Browse domains</Button>
            </Link>
            <Link to="/sell">
              <Button>List a domain</Button>
            </Link>
          </div>
        </div>

        {outstanding.length > 0 && (
          <Card className="mt-8">
            <CardHeader
              title="Finish setting up"
              description="A few steps to unlock buying and selling."
              action={
                <Badge tone="caution">
                  {outstanding.length} remaining
                </Badge>
              }
            />

            <CardBody>
              <ul className="flex flex-col divide-y divide-border-subtle">
                {nextSteps.map((step) => (
                  <li
                    key={step.title}
                    className="flex flex-wrap items-center justify-between gap-4 py-3.5 first:pt-0 last:pb-0"
                  >
                    <div className="flex min-w-0 items-start gap-3">
                      <step.Icon
                        aria-hidden
                        className="mt-0.5 size-4 shrink-0 text-text-muted"
                      />
                      <div className="min-w-0">
                        <p className="text-sm font-medium text-text-primary">{step.title}</p>
                        <p className="text-sm text-text-secondary">{step.body}</p>
                      </div>
                    </div>

                    {step.done ? (
                      <Badge tone="positive">Done</Badge>
                    ) : (
                      <Link to={step.action.to}>
                        <Button variant="secondary" size="sm">
                          {step.action.label}
                        </Button>
                      </Link>
                    )}
                  </li>
                ))}
              </ul>
            </CardBody>
          </Card>
        )}

        <div className="mt-8">
          <Alert tone="info" title="Portfolio and activity are coming next">
            Domain management, listings, offers and order tracking are being built. Rather than
            show placeholder figures on a page about money, this space stays empty until the real
            data is behind it.
          </Alert>
        </div>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[
            { Icon: Globe, label: 'Domains', hint: 'Verify and list what you own' },
            { Icon: Handshake, label: 'Offers', hint: 'Negotiate on both sides' },
            { Icon: Wallet, label: 'Orders', hint: 'Track purchases and sales' },
            { Icon: Store, label: 'Payouts', hint: 'Released after transfer' },
          ].map((tile) => (
            <Card key={tile.label} className="p-5">
              <tile.Icon aria-hidden className="size-4 text-text-muted" />
              <p className="mt-3 text-sm font-medium text-text-primary">{tile.label}</p>
              <p className="mt-0.5 text-sm text-text-muted">{tile.hint}</p>
            </Card>
          ))}
        </div>
      </div>
    </AppShell>
  )
}