// Install dependencies:
// npm install resend @shadcn/ui react-hook-form mysql2

import { useState, useEffect } from "react";
import { Resend } from "resend";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { useForm } from "react-hook-form";

const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KEY);

export default function FollowUpMailer() {
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");
  const [sequences, setSequences] = useState([]);
  const { register, handleSubmit, reset } = useForm();

  const fetchSequences = async () => {
    const res = await fetch("/api/sequences");
    const data = await res.json();
    setSequences(data);
  };

  useEffect(() => {
    fetchSequences();
  }, []);

  const onSubmit = async (data) => {
    setLoading(true);
    setStatus("");

    try {
      const response = await fetch("/api/send-sequence", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      const result = await response.json();
      setStatus(result.message);
      reset();
      fetchSequences();
    } catch (err) {
      setStatus("Failed to send emails. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
      <Card>
        <CardContent>
          <h1 className="text-2xl font-bold mb-4">Automated Invoice Follow-Up</h1>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            <div>
              <Label>Email To</Label>
              <Input type="email" {...register("to", { required: true })} />
            </div>
            <div>
              <Label>Client Name</Label>
              <Input type="text" {...register("clientName", { required: true })} placeholder="e.g. John" />
            </div>
            <div>
              <Label>Subject</Label>
              <Input type="text" {...register("subject", { required: true })} />
            </div>
            <div>
              <Label>Message (use {clientName} as placeholder)</Label>
              <Textarea {...register("body", { required: true })} rows={6} />
            </div>
            <div>
              <Label>Sequence (in days, comma-separated)</Label>
              <Input type="text" {...register("days", { required: true })} placeholder="e.g. 3,7,14" />
            </div>
            <Button type="submit" disabled={loading}>
              {loading ? "Sending..." : "Start Sequence"}
            </Button>
            {status && <p className="text-sm mt-2">{status}</p>}
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <h2 className="text-xl font-bold mb-4">Active Sequences</h2>
          {sequences.length === 0 ? (
            <p>No sequences found.</p>
          ) : (
            <ul className="space-y-4">
              {sequences.map((seq, index) => (
                <li key={index} className="border p-2 rounded-md">
                  <p><strong>To:</strong> {seq.email_to}</p>
                  <p><strong>Client:</strong> {seq.client_name}</p>
                  <p><strong>Subject:</strong> {seq.subject}</p>
                  <p><strong>Days:</strong> {seq.days}</p>
                  <p className="text-xs text-gray-500">Created: {new Date(seq.created_at).toLocaleString()}</p>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

// Example MariaDB API route implementation for /api/sequences:
// File: /pages/api/sequences.js

// import mysql from "mysql2/promise";
// const pool = mysql.createPool({
//   host: process.env.DB_HOST,
//   user: process.env.DB_USER,
//   password: process.env.DB_PASS,
//   database: process.env.DB_NAME,
// });

// export default async function handler(req, res) {
//   if (req.method === "GET") {
//     const [rows] = await pool.query("SELECT * FROM sequences ORDER BY created_at DESC");
//     return res.status(200).json(rows);
//   }

//   if (req.method === "POST") {
//     const { to, clientName, subject, body, days } = req.body;
//     const result = await pool.query(
//       "INSERT INTO sequences (email_to, client_name, subject, body, days) VALUES (?, ?, ?, ?, ?)",
//       [to, clientName, subject, body, days]
//     );
//     return res.status(200).json({ message: "Follow-up sequence scheduled." });
//   }

//   return res.status(405).end();
// }

// Make sure your MariaDB has this table:
// CREATE TABLE sequences (
//   id INT AUTO_INCREMENT PRIMARY KEY,
//   email_to VARCHAR(255),
//   client_name VARCHAR(255),
//   subject VARCHAR(255),
//   body TEXT,
//   days TEXT,
//   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
// );