import { DealerTemplateClient } from '@/components/DealerTemplateClient';
import { PLACEHOLDER_DEALER } from '@/types/dealer';
import { getLanguageFromCookie } from '@/lib/get-language-cookie';
import '../dealer-template.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'AMSOIL Dealer - ' + PLACEHOLDER_DEALER.name,
  description:
    'Premium AMSOIL synthetic motor oil and lubricants from your local independent dealer.',
  other: {
    // Resource hints for external AMSOIL domain
    'dns-prefetch': 'https://www.amsoil.com',
    preconnect: 'https://www.amsoil.com',
  },
};

/**
 * TEMPORARY DEVELOPMENT ROUTE
 * ============================
 *
 * ⚠️ THIS FILE SHOULD BE DELETED BEFORE PRODUCTION DEPLOYMENT ⚠️
 *
 * Purpose:
 * - Preview the DealerTemplate wireframe during development
 * - Accessible at: /dealer-template
 * - Uses placeholder dealer data (Don & LaVel Rude from autolife.myamsoil.com)
 *
 * TODO - Production Implementation:
 * ==================================
 * When ready to go live with subdomain-based dealer pages:
 *
 * 1. DELETE this entire folder: /app/dealer-template/
 *
 * 2. UPDATE /app/page.tsx to use subdomain routing:
 *    ```typescript
 *    import { headers } from 'next/headers';
 *    import { DealerTemplate } from '@/components/DealerTemplate';
 *
 *    function getSubdomain() {
 *      const headersList = headers();
 *      const host = headersList.get('host') || '';
 *      return host.split('.')[0]; // e.g., "autolife" from "autolife.acdev3.com"
 *    }
 *
 *    export default async function Page() {
 *      const subdomain = getSubdomain();
 *      const dealer = await getDealerBySubdomain(subdomain);
 *
 *      if (!dealer) {
 *        return <div>Dealer not found</div>;
 *      }
 *
 *      return <DealerTemplate dealer={dealer} />;
 *    }
 *    ```
 *
 * 3. CREATE /lib/getDealerBySubdomain.ts:
 *    - Query database for dealer where subdomain matches
 *    - Return DealerInfo object
 *
 * 4. CONFIGURE wildcard DNS:
 *    - *.acdev3.com → your Next.js app (development)
 *    - *.myamsoil.com → your Next.js app (production)
 *
 * 5. DEPLOY with wildcard domain support (Vercel, AWS, etc.)
 *
 * How it will work in production:
 * - User visits: autolife.acdev3.com
 * - Next.js extracts subdomain: "autolife"
 * - Queries database: SELECT * FROM dealers WHERE subdomain = 'autolife'
 * - Renders DealerTemplate with that dealer's data
 * - Result: Customized page for Don & LaVel Rude
 */

export default async function DealerTemplatePreview() {
  // Get language from cookie, falling back to placeholder dealer's preference
  const dealerPreferredLanguage = PLACEHOLDER_DEALER.preferredLanguage || 'en';
  const defaultLanguage = await getLanguageFromCookie(
    PLACEHOLDER_DEALER.subdomain,
    dealerPreferredLanguage
  );

  return (
    <div>
      <div
        style={{
          padding: '1rem',
          backgroundColor: '#fff3cd',
          border: '1px solid #ffc107',
          marginBottom: '2rem',
          color: '#000000',
        }}
      >
        <strong>Development Preview Mode</strong>
        <p style={{ margin: '0.5rem 0 0 0', fontSize: '0.875rem' }}>
          This is a temporary route for previewing the dealer page wireframe. In production, this
          template will be served via subdomains (e.g., autolife.acdev3.com).
        </p>
        <p style={{ margin: '0.5rem 0 0 0', fontSize: '0.875rem' }}>
          <strong>Current dealer:</strong> {PLACEHOLDER_DEALER.name} (placeholder data)
        </p>
      </div>

      <DealerTemplateClient dealer={PLACEHOLDER_DEALER} defaultLanguage={defaultLanguage} />
    </div>
  );
}

// Note: Resource hints (preconnect, dns-prefetch) are configured in the metadata export above.
// This enables early DNS resolution and TCP connection to www.amsoil.com for faster external link navigation.