/*
 * Step 1: Initialize a new Next.js project with TypeScript.
 * Use the 'create-next-app' utility and select 'Yes' for TypeScript and App Router.
 */
// Command to initialize a Next.js project
// npx create-next-app@latest nextjs-ts-app-router --typescript --app

/*
 * Step 2: Create a basic Server Component in app/page.tsx.
 * By default, components in the 'app' directory are Server Components.
 * They run on the server and do not ship JavaScript to the client.
 */

// app/page.tsx
// Defines the root page of our application, acting as a Server Component.
// No 'use client' directive is present, confirming it's a Server Component.

interface WelcomeProps {
  appName: string;
}

// A Server Component that renders a welcome message.
// It can accept props, which should also be typed.
export default function HomePage({
  appName
}: WelcomeProps) {
  return (
    <div>
      <h1>Welcome to {appName}!</h1>
      <p>This content is rendered on the server.</p>
      <p>Explore the power of TypeScript with Next.js App Router.</p>
    </div>
  );
}

// To use this 'appName' prop, you would pass it from a parent layout or a test component.
// For instance, if you had a layout.tsx:

// app/layout.tsx
// Defines the root layout for the entire application.
// All pages will be nested within this layout.

// import HomePage from './page'; // Assuming HomePage is what you're rendering inside children

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const appName = "My Typed Next.js App"; // Define the prop here
  return (
    <html lang="en">
      <body>
        {/* We would typically pass the prop here if HomePage was a child of layout directly. */}
        {/* For a root page, the prop might come from a context or be hardcoded if dynamic data isn't needed. */}
        {/* For simplicity, HomePage's prop 'appName' is demonstrated above, assuming a parent supplies it. */}
        {children}
      </body>
    </html>
  );
}


/*
 * Step 3: Introduce a Client Component for interactivity.
 * This component will have the 'use client' directive at the top.
 */

// components/CounterButton.tsx
// Client Component requiring interactivity, indicated by 'use client'.
"use client";

import { useState } from 'react';

interface CounterProps {
  initialCount?: number; // Optional prop for initial value
}

export default function CounterButton({
  initialCount = 0
}: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

/*
 * Step 4: Integrate the Client Component into the Server Component structure.
 */

// app/page.tsx (updated to include Client Component)
// This demonstrates how a Server Component can render a Client Component.

import CounterButton from '../components/CounterButton';

interface WelcomeProps {
  appName: string;
}

export default function HomePage({
  appName
}: WelcomeProps) {
  return (
    <div>
      <h1>Welcome to {appName}!</h1>
      <p>This content is rendered on the server.</p>
      <p>Explore the power of TypeScript with Next.js App Router.</p>
      <h2>Client-side Interactivity:</h2>
      <CounterButton initialCount={10} /> {/* Server Component passes props to Client Component */}
    </div>
  );
}

/*
 * Step 1: Define a TypeScript interface for the data we expect to fetch.
 * This ensures type safety throughout our application when handling posts.
 */

// types/Post.ts
export interface Post {
  id: number;
  userId: number;
  title: string;
  body: string;
}

/*
 * Step 2: Create an asynchronous Server Component that fetches data.
 * This component will directly call a backend API or database.
 */

// app/posts/page.tsx
// This is a Server Component, so it can be 'async' directly.

import { Post } from '@/types/Post'; // Import the defined Post interface

// An async Server Component to fetch and display a list of posts.
export default async function PostsPage() {
  // Fetch data directly within the Server Component. No need for useEffect or useState.
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    // Configure revalidation for the data. Here, revalidate every 60 seconds.
    next: { revalidate: 60 },
  });

  // Assert that the response data conforms to our Post[] interface.
  // This provides compile-time type safety.
  const posts: Post[] = await response.json();

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body.substring(0, 100)}...</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

/*
 * Step 3: Extend the pattern to fetch a single post by ID (Dynamic Route).
 * This involves using Next.js dynamic routing features.
 */

// app/posts/[id]/page.tsx
// This is a dynamic route Server Component for a single post.
// The 'params' object is automatically typed by Next.js if you define it correctly.

import { Post } from '@/types/Post';

interface PostPageProps {
  params: { id: string }; // Next.js types 'params' based on the file name [id]
}

export default async function SinglePostPage({
  params
}: PostPageProps) {
  const postId = params.id; // Access the dynamic ID from the URL

  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);

  // Handle cases where the post might not be found.
  if (!response.ok) {
    // You might want to throw an error or redirect here.
    // For simplicity, we'll just show a message.
    return <div>Post not found.</div>;
  }

  // Type assertion for the single post data.
  const post: Post = await response.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p><strong>User ID:</strong> {post.userId}</p>
      <p>{post.body}</p>
    </div>
  );
}

// To test this, navigate to /posts (for the list) or /posts/1 (for a single post).

/*
 * Step 1: Define a type for the complex data we want to pass.
 * This ensures that the data structure is consistent.
 */

// types/User.ts
export interface UserProfile {
  id: number;
  name: string;
  email: string;
  registrationDate: Date; // Note: Date objects require careful serialization
}

/*
 * Step 2: Create a Server Component that fetches data and prepares it for a Client Component.
 * Pay attention to serialization if complex types like 'Date' are involved.
 */

// app/profile/page.tsx
// This Server Component fetches user data.

import UserDisplay from './UserDisplay'; // Will be our Client Component
import { UserProfile } from '@/types/User';

export default async function ProfilePage() {
  // Simulate fetching user data from an API or database
  const userData: UserProfile = {
    id: 1,
    name: 'Alice Johnson',
    email: 'alice@example.com',
    registrationDate: new Date('2023-01-15T10:00:00Z'),
  };

  // Important for serialization: If passing Date objects or functions to Client Components,
  // they must be serialized to a string or another primitive type.
  // Date objects are not directly serializable via props across the Server/Client boundary.
  const serializedUserData = {
    ...userData,
    registrationDate: userData.registrationDate.toISOString(), // Convert Date to ISO string
  };

  return (
    <div>
      <h1>User Profile</h1>
      {/* Pass serialized data as props to the Client Component */}
      <UserDisplay user={serializedUserData} />
    </div>
  );
}

/*
 * Step 3: Create a Client Component that receives and displays the typed props.
 * This component will have the 'use client' directive.
 */

// app/profile/UserDisplay.tsx
// This is a Client Component due to 'use client'.
"use client";

// Define the props interface for the Client Component.
// Note: registrationDate is a string here because it was serialized from the Server Component.
interface UserDisplayProps {
  user: {
    id: number;
    name: string;
    email: string;
    registrationDate: string; // Expecting string from serialized Date
  };
}

export default function UserDisplay({
  user
}: UserDisplayProps) {
  // You can convert it back to a Date object if needed for client-side logic
  const registrationDateObj = new Date(user.registrationDate);

  return (
    <div>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
      <p><strong>Member Since:</strong> {registrationDateObj.toLocaleDateString()}</p>
      <button onClick={() => alert(`Contacting ${user.email}`)}>
        Contact User
      </button>
    </div>
  );
}

/*
 * Step 4: Illustrate a common pitfall: direct passing of non-serializable objects.
 * If you tried to pass a 'Date' object directly, Next.js would throw an error.
 *
 * // INCORRECT EXAMPLE (would cause a runtime error)
 * // app/profile/page.tsx (partial - for demonstration of error)
 * // export default async function ProfilePage() {
 * //   const userData: UserProfile = { /* ... */ /* registrationDate: new Date() };
 * //   return <UserDisplay user={userData} />;
 * // }
 * // The error would be: 'Error: Only plain objects, and arrays of plain objects, can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.'
 */

/*
 * Step 1: Define types for dynamic route segments (params) and search parameters.
 * Next.js automatically injects these into page and layout props.
 */

// types/Route.ts
export interface DynamicRouteParams {
  slug: string; // For a route like app/products/[slug]/page.tsx
  category?: string; // For optional dynamic segments if applicable
}

export interface SearchParams {
  sort?: 'asc' | 'desc';
  filter?: string;
  page?: string;
}

/*
 * Step 2: Implement a dynamic Server Component with typed params and searchParams.
 */

// app/products/[slug]/page.tsx
// This Server Component handles dynamic routes and search parameters.

import { DynamicRouteParams, SearchParams } from '@/types/Route';

interface ProductPageProps {
  params: DynamicRouteParams;
  searchParams: SearchParams; // Next.js passes searchParams as an object of strings
}

export default async function ProductPage({
  params,
  searchParams,
}: ProductPageProps) {
  const { slug } = params;
  const { sort, filter, page } = searchParams;

  // Simulate fetching product data based on slug, sort, filter, and page.
  // This would be an API call or database query.
  const product = await new Promise(resolve => {
    setTimeout(() => {
      resolve({
        id: `prod-${slug}`,
        name: `Product ${slug.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ')}`,
        price: 99.99,
        description: `This is the description for product ${slug}. Sorted by ${sort || 'default'}, filtered by ${filter || 'none'}. Page: ${page || '1'}`,
      });
    }, 500);
  });

  return (
    <div>
      <h1>{product.name}</h1>
      <p><strong>ID:</strong> {product.id}</p>
      <p><strong>Price:</strong> ${product.price}</p>
      <p>{product.description}</p>
      <p><strong>Current Filters:</strong> Sort: {sort || 'N/A'}, Filter: {filter || 'N/A'}, Page: {page || 'N/A'}</p>
    </div>
  );
}

/*
 * Step 3: Implement a Server Action with typed inputs and return values.
 * Server Actions enable mutations on the server directly from Client Components.
 */

// app/actions.ts
// This file defines server actions, which are always server-side.
"use server"; // Marks all exports in this file as server actions.

import { revalidatePath } from 'next/cache';

// Define types for the input and output of our server action.
interface CreateProductInput {
  name: string;
  description: string;
  price: number;
}

interface CreateProductResult {
  success: boolean;
  message: string;
  productId?: string;
  errors?: { [key: string]: string };
}

export async function createProduct(productInput: CreateProductInput): Promise<CreateProductResult> {
  // Simulate server-side validation
  if (productInput.name.length < 3) {
    return { success: false, message: 'Validation Failed', errors: { name: 'Name must be at least 3 characters.' } };
  }
  if (productInput.price <= 0) {
    return { success: false, message: 'Validation Failed', errors: { price: 'Price must be greater than zero.' } };
  }

  // Simulate database interaction (e.g., create a new product).
  const newProductId = `prod-${Date.now()}`;
  console.log(`Creating product: ${productInput.name} with ID: ${newProductId}`);

  // Invalidate cache for the products page to show the new product.
  revalidatePath('/products'); 

  return { success: true, message: 'Product created successfully!', productId: newProductId };
}

/*
 * Step 4: Create a Client Component to call the Server Action.
 */

// components/ProductForm.tsx
"use client";

import { useState } from 'react';
import { createProduct } from '@/app/actions'; // Import the server action

export default function ProductForm() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [price, setPrice] = useState(0);
  const [message, setMessage] = useState<string | null>(null);
  const [errors, setErrors] = useState<{ [key: string]: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors(null); // Clear previous errors
    setMessage(null); // Clear previous messages

    const result = await createProduct({ name, description, price });

    if (result.success) {
      setMessage(result.message);
      setName('');
      setDescription('');
      setPrice(0);
    } else {
      setMessage(result.message);
      setErrors(result.errors || {});
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
      <h2>Create New Product</h2>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
        {errors?.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      </div>
      <div>
        <label htmlFor="description">Description:</label>
        <textarea
          id="description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="price">Price:</label>
        <input
          id="price"
          type="number"
          value={price}
          onChange={(e) => setPrice(parseFloat(e.target.value))}
          required
        />
        {errors?.price && <p style={{ color: 'red' }}>{errors.price}</p>}
      </div>
      <button type="submit">Create Product</button>
      {message && <p style={{ color: message.includes('successfully') ? 'green' : 'red' }}>{message}</p>}
    </form>
  );
}

/*
 * Step 5: Integrate the ProductForm Client Component into a Server Component.
 */

// app/products/create/page.tsx
// This Server Component simply renders the Client Component for product creation.

import ProductForm from '@/components/ProductForm';

export default function CreateProductPage() {
  return (
    <div>
      <h1>Product Management</h1>
      <ProductForm />
    </div>
  );
}

// To test, navigate to /products/[slug] (e.g., /products/my-awesome-product?sort=asc&filter=new) and /products/create.