graph TD
    A[User/Client Browser] -- 1. Schedule Request (Form Submit) --> B(Next.js App / API Route);
    B -- 2. Save Schedule --> C[(Vercel Postgres via Prisma)];
    D{Vercel Cron Job} -- 3. Trigger Check (e.g., every minute) --> E(Next.js Cron Handler API Route);
    E -- 4. Query Due Schedules --> C;
    E -- 5. Send SMS Request --> F(Plivo SMS API);
    F -- 6. Send SMS --> G([End User Phone]);
    E -- 7. Update Schedule Status --> C;

// prisma/schema.prisma

generator client {
  provider = ""prisma-client-js""
}

datasource db {
  provider  = ""postgresql""
  url       = env(""POSTGRES_PRISMA_URL"") // Uses connection pooling
  directUrl = env(""POSTGRES_URL_NON_POOLING"") // Used for migrations
}

model Schedule {
  id          String   @id @default(cuid()) // Unique identifier
  phoneNumber String   // Recipient phone number (E.164 format)
  message     String   // SMS message content
  sendAt      DateTime // Scheduled time in UTC
  status      String   @default(""PENDING"") // PENDING, SENT, FAILED
  plivoMessageId String?  // Store Plivo's message UUID after sending
  error       String?  // Store error message if sending fails
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  @@index([sendAt, status]) // Index for efficient querying by the cron job
}

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

declare global {
  // eslint-disable-next-line no-var
  var prisma: PrismaClient | undefined;
}

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
  });

if (process.env.NODE_ENV !== 'production') {
  global.prisma = prisma;
}

// lib/plivo.ts
import * as plivo from 'plivo';

const authId = process.env.PLIVO_AUTH_ID;
const authToken = process.env.PLIVO_AUTH_TOKEN;
const senderNumber = process.env.PLIVO_SENDER_NUMBER;

if (!authId || !authToken || !senderNumber) {
  throw new Error(""Plivo credentials (AUTH_ID, AUTH_TOKEN, SENDER_NUMBER) are not set in environment variables."");
}

const client = new plivo.Client(authId, authToken);

interface SendSmsResult {
  success: boolean;
  messageUuid?: string;
  error?: string;
}

export async function sendPlivoSms(to: string, body: string): Promise<SendSmsResult> {
  console.log(`Attempting to send SMS via Plivo to: ${to}`);
  try {
    const response = await client.messages.create({
      src: senderNumber as string, // Ensure it's treated as string
      dst: to,
      text: body,
      // Optional: Add a URL for delivery status callbacks
      // url: 'https://<yourdomain>.com/api/plivo-status',
      // method: 'POST'
    });

    console.log(`Plivo API Response:`, response);

    // The Plivo SDK returns messageUuid as an array, even for single messages.
    if (response.messageUuid && response.messageUuid.length > 0) {
        const firstUuid = response.messageUuid[0];
        console.log(`SMS submitted successfully to Plivo. Message UUID: ${firstUuid}`);
        return { success: true, messageUuid: firstUuid };
    } else {
        // Plivo's API might return a 2xx status but indicate an issue in the body
        const errorMessage = response.error || 'Unknown error from Plivo (No message UUID)';
        console.error(`Plivo sending failed (API level): ${errorMessage}`);
        return { success: false, error: errorMessage };
    }
  } catch (error: any) {
    const errorMessage = error.message || 'Failed to send SMS via Plivo';
    console.error(`Plivo sending failed (SDK/Network level): ${errorMessage}`, error);
    return { success: false, error: errorMessage };
  }
}

// app/page.tsx
""use client""; // This component uses client-side interactivity (useState, fetch)

import { useState, FormEvent } from 'react';
import { format, parse, isValid } from 'date-fns';
import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';

export default function HomePage() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [message, setMessage] = useState('');
  const [scheduleDate, setScheduleDate] = useState(''); // YYYY-MM-DD
  const [scheduleTime, setScheduleTime] = useState(''); // HH:MM (24-hour)
  const [timeZone, setTimeZone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone); // Detect user's timezone
  const [status, setStatus] = useState(''); // For user feedback
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setStatus('');

    // Basic validation
    if (!phoneNumber || !message || !scheduleDate || !scheduleTime) {
      setStatus('Error: Please fill in all fields.');
      setIsLoading(false);
      return;
    }

    // Combine date and time, parse it in the user's selected timezone
    const dateTimeString = `${scheduleDate}T${scheduleTime}:00`;
    let localDate: Date;
    try {
        // Ensure parsing considers the correct format explicitly
        localDate = parse(dateTimeString, ""yyyy-MM-dd'T'HH:mm:ss"", new Date());
        if (!isValid(localDate)) {
            throw new Error(""Invalid date/time format"");
        }
    } catch (err) {
        setStatus(`Error: Invalid date or time format. Use YYYY-MM-DD and HH:MM.`);
        setIsLoading(false);
        return;
    }


    // Convert the user's local time to UTC for storage
    const scheduledAtUtc: Date = zonedTimeToUtc(localDate, timeZone);
    console.log(""Local Input:"", localDate, ""TimeZone:"", timeZone, ""Calculated UTC:"", scheduledAtUtc);


    // Ensure date is in the future
    if (scheduledAtUtc <= new Date()) {
      setStatus('Error: Scheduled time must be in the future.');
      setIsLoading(false);
      return;
    }

    try {
      const response = await fetch('/api/schedule', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          phoneNumber,
          message,
          // Send the UTC date string in ISO format
          scheduledAt: scheduledAtUtc.toISOString(),
        }),
      });

      const result = await response.json();

      if (response.ok) {
        setStatus(`Success! Schedule created with ID: ${result.id}`);
        // Clear form on success
        setPhoneNumber('');
        setMessage('');
        setScheduleDate('');
        setScheduleTime('');
      } else {
        setStatus(`Error: ${result.error || 'Failed to create schedule.'}`);
      }
    } catch (error) {
      console.error(""Scheduling failed:"", error);
      setStatus('Error: An unexpected error occurred.');
    } finally {
      setIsLoading(false);
    }
  };

  // Simple Timezone Selector.
  // NOTE: This is a basic implementation suitable for this guide.
  // For a production app, consider a more robust library or dynamic list.
  const renderTimezoneSelector = () => (
    <select
        value={timeZone}
        onChange={(e) => setTimeZone(e.target.value)}
        // Added text-black for explicit visibility on light backgrounds.
        // Be mindful this might conflict if implementing a dark mode theme.
        className=""mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-black""
    >
        {/* Add more timezones as needed */}
        <option value=""America/New_York"">America/New_York (ET)</option>
        <option value=""America/Chicago"">America/Chicago (CT)</option>
        <option value=""America/Denver"">America/Denver (MT)</option>
        <option value=""America/Los_Angeles"">America/Los_Angeles (PT)</option>
        <option value=""Europe/London"">Europe/London (GMT/BST)</option>
        <option value=""UTC"">UTC</option>
        {/* Add the user's detected timezone if it's not already in the list */}
         {Intl.DateTimeFormat().resolvedOptions().timeZone !== 'UTC' && !['America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'Europe/London'].includes(Intl.DateTimeFormat().resolvedOptions().timeZone) && (
            <option value={Intl.DateTimeFormat().resolvedOptions().timeZone}>{Intl.DateTimeFormat().resolvedOptions().timeZone} (Detected)</option>
         )}
    </select>
  );

  return (
    <main className=""flex min-h-screen flex-col items-center justify-center p-6 bg-gray-100"">
      <div className=""w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md"">
        <h1 className=""text-2xl font-bold text-center text-gray-900"">Schedule SMS Reminder</h1>
        <form onSubmit={handleSubmit} className=""space-y-4"">
          <div>
            <label htmlFor=""phoneNumber"" className=""block text-sm font-medium text-gray-700"">Phone Number (E.164 format)</label>
            <input
              id=""phoneNumber""
              name=""phoneNumber""
              type=""tel""
              required
              value={phoneNumber}
              onChange={(e) => setPhoneNumber(e.target.value)}
              placeholder=""+14155552671""
              // Added text-black for explicit visibility on light backgrounds.
              // Be mindful this might conflict if implementing a dark mode theme.
              className=""mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-black""
            />
          </div>
          <div>
            <label htmlFor=""message"" className=""block text-sm font-medium text-gray-700"">Message</label>
            <textarea
              id=""message""
              name=""message""
              rows={3}
              required
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              // Added text-black for explicit visibility on light backgrounds.
              // Be mindful this might conflict if implementing a dark mode theme.
              className=""mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-black""
            />
          </div>
          <div className=""grid grid-cols-2 gap-4"">
             <div>
                <label htmlFor=""scheduleDate"" className=""block text-sm font-medium text-gray-700"">Date</label>
                <input
                  id=""scheduleDate""
                  name=""scheduleDate""
                  type=""date"" // HTML5 date input
                  required
                  value={scheduleDate}
                  onChange={(e) => setScheduleDate(e.target.value)}
                  // Added text-black for explicit visibility on light backgrounds.
                  // Be mindful this might conflict if implementing a dark mode theme.
                  className=""mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-black""
                />
             </div>
             <div>
                 <label htmlFor=""scheduleTime"" className=""block text-sm font-medium text-gray-700"">Time</label>
                 <input
                   id=""scheduleTime""
                   name=""scheduleTime""
                   type=""time"" // HTML5 time input
                   required
                   value={scheduleTime}
                   onChange={(e) => setScheduleTime(e.target.value)}
                   // Added text-black for explicit visibility on light backgrounds.
                   // Be mindful this might conflict if implementing a dark mode theme.
                   className=""mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-black""
                 />
             </div>
          </div>
           <div>
             <label htmlFor=""timeZone"" className=""block text-sm font-medium text-gray-700"">Time Zone</label>
             {renderTimezoneSelector()}
           </div>

          <div>
            <button
              type=""submit""
              disabled={isLoading}
              className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${
                isLoading ? 'bg-indigo-400' : 'bg-indigo-600 hover:bg-indigo-700'
              } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50`}
            >
              {isLoading ? 'Scheduling...' : 'Schedule Reminder'}
            </button>
          </div>
          {status && (
            <p className={`text-sm ${status.startsWith('Error:') ? 'text-red-600' : 'text-green-600'}`}>
              {status}
            </p>
          )}
        </form>
      </div>
    </main>
  );
}

// app/api/schedule/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma'; // Adjust path as needed
import { z } from 'zod';
import { isValid, parseISO } from 'date-fns';

// Define input schema using Zod for validation
const scheduleSchema = z.object({
  // Basic E.164 format validation (starts with +, followed by digits).
  // NOTE: This regex is basic. For robust validation, consider using a library
  // like `libphonenumber-js` (mentioned in Section 8).
  phoneNumber: z.string().regex(/^\+[1-9]\d{1,14}$/, { message: ""Invalid phone number format (must be E.164, e.g., +14155552671)""}),
  message: z.string().min(1, { message: ""Message cannot be empty"" }).max(1600, { message: ""Message too long"" }), // Plivo limit is higher, but good practice
  scheduledAt: z.string().refine((val) => {
    const date = parseISO(val);
    return isValid(date) && date > new Date();
  }, { message: ""Invalid scheduled date or date is not in the future""}),
});

export async function POST(request: Request) {
  try {
    const body = await request.json();

    // Validate input
    const validation = scheduleSchema.safeParse(body);
    if (!validation.success) {
      console.error(""Schedule validation failed:"", validation.error.errors);
      // Return detailed validation errors
      return NextResponse.json({ error: validation.error.flatten().fieldErrors }, { status: 400 });
    }

    const { phoneNumber, message, scheduledAt } = validation.data;

    // Convert ISO string back to Date object for Prisma
    const scheduledAtDate = parseISO(scheduledAt);

    // Save to database
    const newSchedule = await prisma.schedule.create({
      data: {
        phoneNumber,
        message,
        sendAt: scheduledAtDate, // Store as DateTime (UTC)
        status: 'PENDING',
      },
    });

    console.log(""New schedule created:"", newSchedule);

    // Return success response with the created schedule ID
    return NextResponse.json({ id: newSchedule.id, message: ""Schedule created successfully"" }, { status: 201 });

  } catch (error: any) {
    console.error(""Error creating schedule:"", error);

    // Handle potential Prisma errors or other exceptions
     if (error instanceof z.ZodError) {
        // Should be caught by safeParse, but as a fallback
        return NextResponse.json({ error: ""Invalid input data"" }, { status: 400 });
    }

    return NextResponse.json({ error: ""Internal Server Error"", details: error.message }, { status: 500 });
  }
}

// Optional: Add GET handler if you need to list schedules, etc.
// export async function GET(request: Request) { ... }

# !! IMPORTANT !!
# You MUST replace the value of FUTURE_UTC_DATE with a date/time
# in the future, formatted as YYYY-MM-DDTHH:MM:SSZ (UTC).
# Example: If current UTC time is 2025-04-20T10:00:00Z, use a time *after* that.
FUTURE_UTC_DATE=""2025-04-20T11:00:00Z"" # <-- CHANGE THIS TO A FUTURE UTC TIME

curl -X POST http://localhost:3000/api/schedule \
 -H ""Content-Type: application/json"" \
 -d '{
   ""phoneNumber"": ""+14155552671"",
   ""message"": ""Your test reminder from curl!"",
   ""scheduledAt"": ""'""$FUTURE_UTC_DATE""'""
 }'

# Expected Success Response (Status 201):
# {""id"":""cl..."",""message"":""Schedule created successfully""}

# Example Validation Error (Status 400):
# {""error"":{""phoneNumber"":[""Invalid phone number format (must be E.164, e.g., +14155552671)""]}}

# Ensure your .env.local has the Vercel Postgres URLs
npx prisma db push