import { useState, useEffect } from 'react';
import apiClient from '../../api/client';
import { FileCode, Trash2, Plus, LayoutTemplate } from 'lucide-react';

import type { WorkflowTemplate as ParsedWorkflowTemplate } from '../../types';

export function WorkflowTemplateSettings() {
  const [templates, setTemplates] = useState<Record<string, ParsedWorkflowTemplate>>({});
  const [loading, setLoading] = useState(true);
  const [templateJson, setTemplateJson] = useState('{\n  "name": "my_template",\n  "steps": [\n    {\n      "name": "step1",\n      "actor": "actor_name"\n    }\n  ]\n}');
  const [creating, setCreating] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  const validateTemplate = (data: any): data is ParsedWorkflowTemplate => {
    if (!data || typeof data !== 'object') return false;
    if (typeof data.name !== 'string') return false;
    if (!Array.isArray(data.steps)) return false;
    for (const step of data.steps) {
      if (typeof step.name !== 'string') return false;
      if (typeof step.actor !== 'string') return false;
    }
    return true;
  };

  const fetchTemplates = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get('/api/v1/resource/workflow_template');
      setTemplates(response.data.templates || {});
    } catch (err) {
      console.error('Failed to fetch templates:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchTemplates();
  }, []);

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setCreating(true);
    setMessage('');
    setError('');

    try {
      const parsedJson = JSON.parse(templateJson);

      if (!validateTemplate(parsedJson)) {
        throw new Error('JSON structure does not match WorkflowTemplate schema (requires name and steps array with name and actor).');
      }

      await apiClient.post('/api/v1/resource/workflow_template', parsedJson);
      setMessage('Workflow template created successfully');
      setTemplateJson('{\n  "name": "my_template",\n  "steps": []\n}');
      fetchTemplates();
    } catch (err: any) {
      console.error(err);
      if (err instanceof SyntaxError) {
        setError('Invalid JSON format');
      } else {
        setError(err.message || err.response?.data?.message || 'Failed to create workflow template');
      }
    } finally {
      setCreating(false);
    }
  };

  const handleDelete = async (templateName: string) => {
    if (!confirm(`Are you sure you want to delete ${templateName}?`)) return;
    try {
      await apiClient.delete(`/api/v1/resource/workflow_template/${templateName}`);
      fetchTemplates();
    } catch (err: any) {
      console.error('Failed to delete template:', err);
      alert('Failed to delete template');
    }
  };

  return (
    <div className="max-w-4xl space-y-6">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-slate-800">Workflow Templates</h1>
        <p className="text-slate-500 mt-1">Manage and create reusable workflow templates.</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-6 border-b border-slate-100 flex items-center space-x-3">
           <div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center">
             <FileCode size={20} />
           </div>
           <div>
             <h2 className="text-lg font-semibold text-slate-800">Create Template</h2>
             <p className="text-sm text-slate-500">Provide the JSON definition for a new workflow template.</p>
           </div>
        </div>
        <div className="p-6">
          <form onSubmit={handleCreate} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Template JSON Definition</label>
              <textarea
                required
                rows={8}
                value={templateJson}
                onChange={(e) => setTemplateJson(e.target.value)}
                className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono text-sm"
              />
            </div>

            {message && <div className="text-green-600 text-sm">{message}</div>}
            {error && <div className="text-red-600 text-sm">{error}</div>}

            <div className="flex justify-end">
              <button
                type="submit"
                disabled={creating}
                className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
              >
                <Plus size={16} className="mr-2" />
                {creating ? 'Creating...' : 'Create Template'}
              </button>
            </div>
          </form>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-6 border-b border-slate-100">
           <h2 className="text-lg font-semibold text-slate-800">Available Templates</h2>
        </div>
        <div className="p-6">
          {loading ? (
            <div className="text-slate-500 text-sm">Loading templates...</div>
          ) : Object.keys(templates).length === 0 ? (
            <div className="text-slate-500 text-sm">No workflow templates created yet.</div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {Object.keys(templates).map((name) => (
                <div key={name} className="p-4 border border-slate-200 rounded-xl flex items-center justify-between hover:shadow-sm transition-shadow">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
                      <LayoutTemplate size={16} />
                    </div>
                    <span className="font-medium text-slate-800">{name}</span>
                  </div>
                  <button
                    onClick={() => handleDelete(name)}
                    className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                    title="Delete Template"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}