import React from 'react';
import { EmailTemplate } from '../types';
import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key } from 'lucide-react';
import { generateSelectSQL, generateN8nCode, generateTemplateKey } from '../services/storage';

interface Props {
  templates: EmailTemplate[];
  onCreate: () => void;
  onEdit: (t: EmailTemplate) => void;
  onClone: (t: EmailTemplate) => void;
  onDelete: (id: string) => void;
}

const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, onDelete }) => {
  const [search, setSearch] = React.useState('');

  const filtered = templates.filter(t => 
    t.name.toLowerCase().includes(search.toLowerCase()) || 
    t.subject.toLowerCase().includes(search.toLowerCase())
  );

  const copySelectSQL = (t: EmailTemplate, e: React.MouseEvent) => {
    e.stopPropagation();
    const sql = generateSelectSQL(t);
    navigator.clipboard.writeText(sql);
    alert('SELECT query copied! Use this in your n8n SQL node.');
  };

  const copyN8nCode = (t: EmailTemplate, e: React.MouseEvent) => {
    e.stopPropagation();
    const code = generateN8nCode(t);
    navigator.clipboard.writeText(code);
    alert('JS Code copied! Paste this into your n8n Code node.');
  };

  const copyTemplateKey = (t: EmailTemplate, e: React.MouseEvent) => {
    e.stopPropagation();
    const key = generateTemplateKey(t.name);
    navigator.clipboard.writeText(key);
    alert(`Template Key '${key}' copied to clipboard!`);
  };

  return (
    <div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Email Templates</h1>
          <p className="text-slate-500 mt-1">Manage HTML templates for your n8n workflows</p>
        </div>
        <button 
          onClick={onCreate}
          className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center gap-2 shadow-sm transition-all active:scale-95"
        >
          <Plus size={20} />
          New Template
        </button>
      </div>

      <div className="relative mb-6">
        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <Search className="h-5 w-5 text-slate-400" />
        </div>
        <input 
          type="text"
          placeholder="Search templates..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="pl-10 w-full md:w-96 px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
        />
      </div>

      {filtered.length === 0 ? (
        <div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50">
          <div className="bg-white p-4 rounded-full shadow-sm mb-4">
            <FileCode className="h-8 w-8 text-slate-400" />
          </div>
          <h3 className="text-lg font-medium text-slate-900">No templates found</h3>
          <p className="text-slate-500 mt-1 max-w-sm text-center">Get started by creating your first HTML email template for automation.</p>
          <button 
            onClick={onCreate}
            className="mt-6 text-brand-600 font-medium hover:text-brand-800"
          >
            Create one now &rarr;
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-y-auto pb-8 custom-scrollbar">
          {filtered.map(t => (
            <div 
              key={t.id}
              onClick={() => onEdit(t)}
              className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer group flex flex-col h-60"
            >
              <div className="p-5 flex-1">
                <div className="flex justify-between items-start mb-2">
                  <h3 className="font-bold text-lg text-slate-800 group-hover:text-brand-600 transition-colors line-clamp-1" title={t.name}>
                    {t.name}
                  </h3>
                  <span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">
                    {new Date(t.updatedAt).toLocaleDateString()}
                  </span>
                </div>
                <p className="text-sm text-slate-500 line-clamp-2 mb-3 h-10">
                  {t.description || 'No description provided.'}
                </p>
                <div className="text-xs text-slate-400 mb-1">Subject:</div>
                <div className="text-sm text-slate-700 font-medium bg-slate-50 p-2 rounded truncate border border-slate-100">
                  {t.subject}
                </div>
                <div className="mt-3 flex flex-wrap gap-1">
                   {t.variables.slice(0, 3).map(v => (
                     <span key={v} className="text-[10px] bg-brand-50 text-brand-600 px-1.5 py-0.5 rounded border border-brand-100">
                       {/* Explicitly building the string to avoid rendering issues */}
                       {'{{' + v + '}}'}
                     </span>
                   ))}
                   {t.variables.length > 3 && (
                     <span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} more</span>
                   )}
                </div>
              </div>
              <div className="border-t border-slate-100 p-3 flex justify-between bg-slate-50/50 rounded-b-xl gap-2">
                <div className="flex gap-1">
                   <button 
                    onClick={(e) => copySelectSQL(t, e)}
                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-brand-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
                    title="Copy SELECT query"
                  >
                    <ArrowRightCircle size={14} />
                    SQL
                  </button>
                  <button 
                    onClick={(e) => copyN8nCode(t, e)}
                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-purple-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
                    title="Copy n8n Code Node JS"
                  >
                    <Code size={14} />
                    JS
                  </button>
                  <button 
                    onClick={(e) => copyTemplateKey(t, e)}
                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-orange-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
                    title="Copy Template Key"
                  >
                    <Key size={14} />
                    Key
                  </button>
                </div>
                <div className="flex gap-1">
                  <button 
                    onClick={(e) => { e.stopPropagation(); onClone(t); }}
                    className="p-1.5 text-slate-500 hover:text-blue-600 hover:bg-white rounded shadow-sm transition-all"
                    title="Clone Template"
                  >
                    <CopyPlus size={16} />
                  </button>
                  <button 
                    onClick={(e) => { e.stopPropagation(); onEdit(t); }}
                    className="p-1.5 text-slate-500 hover:text-brand-600 hover:bg-white rounded shadow-sm transition-all"
                    title="Edit"
                  >
                    <Edit size={16} />
                  </button>
                  <button 
                    onClick={(e) => { e.stopPropagation(); onDelete(t.id); }}
                    className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-white rounded shadow-sm transition-all"
                    title="Delete"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default TemplateList;