// =========================
// FULL STACK EMAIL APP MVP
// =========================

// ---------- BACKEND ----------
// File: backend/server.js
const express = require("express");
const cors = require("cors");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");

const app = express();
app.use(cors());
app.use(express.json());

let users = [];
let emails = [];

// REGISTER
app.post("/api/auth/register", async (req, res) => {
  const { email, password } = req.body;
  const hashed = await bcrypt.hash(password, 10);

  const user = { id: Date.now(), email, password: hashed };
  users.push(user);

  res.json({ message: "User registered" });
});

// LOGIN
app.post("/api/auth/login", async (req, res) => {
  const { email, password } = req.body;
  const user = users.find(u => u.email === email);

  if (!user) return res.status(400).json({ error: "User not found" });

  const valid = await bcrypt.compare(password, user.password);
  if (!valid) return res.status(400).json({ error: "Invalid password" });

  const token = jwt.sign({ id: user.id }, "secret", { expiresIn: "1d" });
  res.json({ token });
});

// AUTH MIDDLEWARE
function auth(req, res, next) {
  const token = req.headers.authorization;
  if (!token) return res.sendStatus(401);

  try {
    const decoded = jwt.verify(token, "secret");
    req.user = decoded;
    next();
  } catch {
    res.sendStatus(403);
  }
}

// SEND EMAIL
app.post("/api/email/send", auth, (req, res) => {
  const { to, subject, text } = req.body;

  const email = {
    id: Date.now(),
    from: req.user.id,
    to,
    subject,
    text,
    date: new Date()
  };

  emails.push(email);
  res.json({ message: "Email sent" });
});

// GET INBOX
app.get("/api/email/inbox", auth, (req, res) => {
  const inbox = emails.filter(e => e.to === req.user.id);
  res.json(inbox);
});

app.listen(5000, () => console.log("Backend running on 5000"));


// ---------- FRONTEND ----------
// File: frontend/App.js
import React, { useState } from "react";
import axios from "axios";

function App() {
  const [token, setToken] = useState("");
  const [form, setForm] = useState({ email: "", password: "" });

  const login = async () => {
    const res = await axios.post("http://localhost:5000/api/auth/login", form);
    setToken(res.data.token);
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>Login</h2>
      <input placeholder="Email" onChange={e => setForm({ ...form, email: e.target.value })} />
      <input placeholder="Password" type="password" onChange={e => setForm({ ...form, password: e.target.value })} />
      <button onClick={login}>Login</button>

      {token && <Dashboard token={token} />}
    </div>
  );
}

function Dashboard({ token }) {
  return (
    <div>
      <Compose token={token} />
      <Inbox token={token} />
    </div>
  );
}

function Compose({ token }) {
  const [mail, setMail] = useState({ to: "", subject: "", text: "" });

  const send = async () => {
    await axios.post("http://localhost:5000/api/email/send", mail, {
      headers: { Authorization: token }
    });
    alert("Sent!");
  };

  return (
    <div>
      <h3>Compose</h3>
      <input placeholder="To (user id)" onChange={e => setMail({ ...mail, to: e.target.value })} />
      <input placeholder="Subject" onChange={e => setMail({ ...mail, subject: e.target.value })} />
      <textarea placeholder="Message" onChange={e => setMail({ ...mail, text: e.target.value })} />
      <button onClick={send}>Send</button>
    </div>
  );
}

function Inbox({ token }) {
  const [emails, setEmails] = useState([]);

  const load = async () => {
    const res = await axios.get("http://localhost:5000/api/email/inbox", {
      headers: { Authorization: token }
    });
    setEmails(res.data);
  };

  return (
    <div>
      <h3>Inbox</h3>
      <button onClick={load}>Load Emails</button>
      {emails.map(e => (
        <div key={e.id}>
          <b>{e.subject}</b>
          <p>{e.text}</p>
        </div>
      ))}
    </div>
  );
}

export default App;