"use client";

import { useState, useEffect } from "react";

interface Submission {
  name: string;
  email: string;
  whatsapp: string;
  message: string;
  date: string;
}

export default function HPSubmissionsPage() {
  const [submissions, setSubmissions] = useState<Submission[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/hp-submissions')
      .then(r => r.json())
      .then(data => {
        setSubmissions(data.submissions || []);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div style={{ padding: '2rem', color: '#fff' }}>
        <h1>HP Submissions</h1>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '2rem', color: '#fff' }}>
      <h1 style={{ marginBottom: '2rem' }}>📬 HP Contact Submissions</h1>
      
      {submissions.length === 0 ? (
        <p style={{ color: '#888' }}>No submissions yet</p>
      ) : (
        <div style={{ display: 'grid', gap: '1rem' }}>
          {submissions.map((sub, i) => (
            <div key={i} style={{
              background: '#1e293b',
              padding: '1.5rem',
              borderRadius: '12px',
              border: '1px solid #334155'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                <strong style={{ color: '#4169e1', fontSize: '1.1rem' }}>{sub.name}</strong>
                <span style={{ color: '#64748b', fontSize: '0.85rem' }}>{sub.date}</span>
              </div>
              <div style={{ color: '#94a3b8', marginBottom: '0.5rem' }}>
                📧 {sub.email}
              </div>
              {sub.whatsapp && (
                <div style={{ color: '#94a3b8', marginBottom: '0.5rem' }}>
                  📱 {sub.whatsapp}
                </div>
              )}
              <div style={{ color: '#cbd5e1', marginTop: '0.75rem', padding: '0.75rem', background: '#0f172a', borderRadius: '8px' }}>
                {sub.message}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}