import React, { useState } from 'react';

// 🤖 MERN Architecture Viewer

const ARCHITECTURE = {
  mongodb: {
    title: "Database Layer (MongoDB)",
    tasks: ["Define Schema schemas", "Create compound indexes", "Verify database connection states", "Run aggregation pipelines"],
    code: `const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true, index: true },
  name: { type: String, required: true },
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('User', userSchema);`,
    checklist: ["Enable replica sets for transactions", "Create indexes on lookup keys", "Enforce schema validation rules"]
  },
  express: {
    title: "Server Layer (Express.js)",
    tasks: ["Handle CORS headers", "Define REST routes", "Inject rate limiter middleware", "Run centralized error catchers"],
    code: `const express = require('express');
const app = express();

app.use(express.json());

app.get('/api/users', async (req, res, next) => {
  try {
    const users = await User.find({});
    res.json({ success: true, data: users });
  } catch (err) {
    next(err);
  }
});`,
    checklist: ["Set security headers with helmet()", "Inject express-rate-limit", "Sanitize all body parameter queries"]
  },
  react: {
    title: "Frontend Layer (React)",
    tasks: ["Manage application state", "Fetch dynamic API data", "Enforce clean component layout", "Audit WCAG accessibility compliance"],
    code: `import React, { useEffect, useState } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(res => setUsers(res.data));
  }, []);

  return (
    <ul>
      {users.map(u => <li key={u._id}>{u.name}</li>)}
    </ul>
  );
}`,
    checklist: ["Implement error boundaries", "Use React 19 compiler optimization", "Enforce semantic layout landmarks"]
  }
};

export default function MernArchitecture() {
  const [layer, setLayer] = useState('react');
  const details = ARCHITECTURE[layer];

  return (
    <div className="bg-slate-950 p-6 sm:p-8 rounded-3xl text-white border border-slate-800 shadow-2xl flex flex-col justify-between min-h-[500px]">
      <div>
        
        {/* Layer Selector */}
        <div className="flex gap-2 mb-6">
          {Object.entries(ARCHITECTURE).map(([key, value]) => (
            <button
              key={key}
              onClick={() => setLayer(key)}
              className={`px-4 py-2 text-xs font-black rounded-lg border transition-all ${
                layer === key 
                  ? 'bg-brand-primary text-slate-950 border-emerald-400 shadow-lg shadow-emerald-500/20' 
                  : 'bg-slate-900 text-slate-400 border-slate-800 hover:text-white'
              }`}
            >
              {value.title.split(' ')[0]}
            </button>
          ))}
        </div>

        {/* Title */}
        <h4 className="text-xl font-bold text-white mb-4">{details.title}</h4>

        {/* Tasks list */}
        <div className="mb-6">
          <span className="block text-[10px] text-slate-500 font-bold uppercase mb-2">Core Tasks:</span>
          <ul className="list-disc pl-5 text-sm text-slate-300 space-y-1">
            {details.tasks.map((task, i) => (
              <li key={i}>{task}</li>
            ))}
          </ul>
        </div>

        {/* Checklist */}
        <div className="mb-6">
          <span className="block text-[10px] text-slate-500 font-bold uppercase mb-2">Production Checklist:</span>
          <div className="flex flex-col gap-2">
            {details.checklist.map((chk, i) => (
              <div key={i} className="flex items-center gap-2 text-xs text-emerald-400 font-bold">
                <span>✓</span>
                <span>{chk}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Code display */}
        <div className="bg-slate-900 border border-slate-800 p-4 rounded-xl font-mono text-[11px] leading-relaxed text-slate-300 overflow-x-auto max-h-[180px]">
          <pre>{details.code}</pre>
        </div>

      </div>

      <div className="mt-8 border-t border-slate-800 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
        <span className="text-xs text-slate-400 font-medium">Ready to evaluate your MERN skills?</span>
        <a 
          href="/ai-quiz"
          className="px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-slate-950 text-xs font-black rounded-lg hover:opacity-90 transition-all hover:scale-[1.02]"
        >
          Take the Free AI Quiz
        </a>
      </div>

    </div>
  );
}