"use client";

import { useEffect, useState } from "react";
import {
  Mail,
  Plus,
  Edit,
  Trash2,
  Send,
  X,
  FileText,
} from "lucide-react";

interface EmailTemplate {
  id: number;
  name: string;
  subject: string;
  body: string;
  type: string;
  createdAt: string;
}

export default function EmailTemplatesPage() {
  const [templates, setTemplates] = useState<EmailTemplate[]>([
    {
      id: 1,
      name: "Application Received",
      subject: "Thank you for your application - {{job_title}}",
      body: "Dear {{candidate_name}},\n\nThank you for applying for the {{job_title}} position at our company. We have received your application and our team is currently reviewing it.\n\nWe will be in touch within 5-7 business days regarding the next steps.\n\nBest regards,\nRecruiting Team",
      type: "application",
      createdAt: "2024-01-15T10:00:00Z",
    },
    {
      id: 2,
      name: "Interview Invitation",
      subject: "Interview Invitation - {{job_title}}",
      body: "Dear {{candidate_name}},\n\nWe would like to invite you for an interview for the {{job_title}} position.\n\nPlease let us know your availability for a {{interview_type}} interview in the coming week.\n\nLooking forward to speaking with you.\n\nBest regards,\nRecruiting Team",
      type: "interview",
      createdAt: "2024-01-15T10:00:00Z",
    },
    {
      id: 3,
      name: "Offer Extended",
      subject: "Job Offer - {{job_title}}",
      body: "Dear {{candidate_name}},\n\nWe are pleased to extend an offer for the {{job_title}} position.\n\nPlease find the offer details attached. We look forward to your response.\n\nBest regards,\nRecruiting Team",
      type: "offer",
      createdAt: "2024-01-15T10:00:00Z",
    },
    {
      id: 4,
      name: "Application Rejection",
      subject: "Update on your application - {{job_title}}",
      body: "Dear {{candidate_name}},\n\nThank you for your interest in the {{job_title}} position. After careful consideration, we have decided to move forward with other candidates.\n\nWe appreciate your time and wish you the best in your job search.\n\nBest regards,\nRecruiting Team",
      type: "rejection",
      createdAt: "2024-01-15T10:00:00Z",
    },
  ]);

  const [showCreateModal, setShowCreateModal] = useState(false);
  const [newTemplate, setNewTemplate] = useState({
    name: "",
    subject: "",
    body: "",
    type: "general",
  });

  const typeColors: Record<string, string> = {
    application: "bg-blue-100 text-blue-700",
    interview: "bg-purple-100 text-purple-700",
    offer: "bg-green-100 text-green-700",
    rejection: "bg-red-100 text-red-700",
    general: "bg-gray-100 text-gray-700",
  };

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Email Templates</h1>
          <p className="text-gray-500 mt-1">Manage email templates for candidate communication</p>
        </div>
        <button
          onClick={() => setShowCreateModal(true)}
          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2.5 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
        >
          <Plus className="w-5 h-5" />
          New Template
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {templates.map((template) => (
          <div
            key={template.id}
            className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 hover:shadow-md transition-shadow"
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-semibold text-gray-900">{template.name}</h3>
                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium capitalize ${typeColors[template.type]}`}>
                    {template.type}
                  </span>
                </div>
                <p className="text-sm text-gray-500">{template.subject}</p>
              </div>
              <div className="flex items-center gap-1">
                <button className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                  <Edit className="w-4 h-4" />
                </button>
                <button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
            <div className="text-sm text-gray-600 bg-gray-50 rounded-lg p-3 max-h-24 overflow-y-auto whitespace-pre-line">
              {template.body}
            </div>
            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
              <span className="text-xs text-gray-400">
                Created {new Date(template.createdAt).toLocaleDateString()}
              </span>
              <button className="flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-700">
                <Send className="w-4 h-4" />
                Use Template
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Create Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between p-5 border-b border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900">Create Email Template</h2>
              <button
                onClick={() => setShowCreateModal(false)}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-gray-400" />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Template Name</label>
                <input
                  type="text"
                  value={newTemplate.name}
                  onChange={(e) => setNewTemplate({ ...newTemplate, name: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                  placeholder="e.g., Interview Follow-up"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Template Type</label>
                <select
                  value={newTemplate.type}
                  onChange={(e) => setNewTemplate({ ...newTemplate, type: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                >
                  <option value="general">General</option>
                  <option value="application">Application</option>
                  <option value="interview">Interview</option>
                  <option value="offer">Offer</option>
                  <option value="rejection">Rejection</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Subject Line</label>
                <input
                  type="text"
                  value={newTemplate.subject}
                  onChange={(e) => setNewTemplate({ ...newTemplate, subject: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                  placeholder="e.g., Interview Invitation - {{job_title}}"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Email Body
                  <span className="text-xs text-gray-400 font-normal ml-2">
                    Use {"{{variable_name}}"} for dynamic content
                  </span>
                </label>
                <textarea
                  value={newTemplate.body}
                  onChange={(e) => setNewTemplate({ ...newTemplate, body: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm h-48 resize-none font-mono"
                  placeholder="Dear {{candidate_name}},\n\n..."
                />
              </div>
              <div className="p-3 bg-blue-50 rounded-lg">
                <p className="text-xs text-blue-700 font-medium mb-1">Available Variables:</p>
                <div className="flex flex-wrap gap-1.5">
                  {["{{candidate_name}}", "{{job_title}}", "{{interview_type}}", "{{company_name}}", "{{recruiter_name}}"].map(
                    (v) => (
                      <code key={v} className="text-xs bg-white px-2 py-0.5 rounded border border-blue-200">
                        {v}
                      </code>
                    )
                  )}
                </div>
              </div>
            </div>
            <div className="flex items-center justify-end gap-3 p-5 border-t border-gray-200">
              <button
                onClick={() => setShowCreateModal(false)}
                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => setShowCreateModal(false)}
                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
              >
                Save Template
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}