import React, { useMemo, useState } from 'react';
import { Search, Plus, Edit, Trash2 } from 'lucide-react';
import { SObjectField, FieldType, SObjectDescribe } from '../../types';
import { MetadataRegistry } from '../../registries/MetadataRegistry';
import { SearchableSelect } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import {
    describeFieldDisplayType,
    describeFormulaReturnType,
} from '../../features/objects/describeFields';

interface ObjectFieldsTabProps {
    metadata: SObjectDescribe;
    onOpenCreate: () => void;
    onOpenEdit: (field: SObjectField) => void;
    onDelete: (fieldApiName: string) => void;
}

export const ObjectFieldsTab: React.FC<ObjectFieldsTabProps> = ({
    metadata,
    onOpenCreate,
    onOpenEdit,
    onDelete
}) => {
    const [searchQuery, setSearchQuery] = useState('');
    const [typeFilter, setTypeFilter] = useState<string>('all');
    const fieldTypes: FieldType[] = MetadataRegistry.getValues().map(def => def.type);

    const filteredFields = useMemo(() => {
        if (!metadata?.fields) return [];
        return metadata.fields.filter(field => {
            const matchesSearch = (field.label || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
                (field.name || '').toLowerCase().includes(searchQuery.toLowerCase());
            const matchesType = typeFilter === 'all' || describeFieldDisplayType(field) === typeFilter;
            return matchesSearch && matchesType;
        });
    }, [metadata?.fields, searchQuery, typeFilter]);

    return (
        <div className="space-y-4">
            <div className="flex justify-between items-center">
                <div className="flex gap-4 flex-1 max-w-2xl">
                    <div className="relative flex-1">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
                        <input
                            type="text"
                            placeholder="Search fields..."
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                    </div>
                    <div className="relative w-48">
                        <SearchableSelect
                            options={[{ value: 'all', label: 'All Types', detail: '' }, ...fieldTypes.map(type => ({ value: type, label: type, detail: '' }))]}
                            value={typeFilter}
                            onChange={(v) => setTypeFilter(v)}
                            placeholder="All Types"
                        />
                    </div>
                </div>
                <button
                    onClick={onOpenCreate}
                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                    <Plus size={18} />
                    New Field
                </button>
            </div>

            <div className="bg-white/80 backdrop-blur-xl border border-white/20 shadow-xl overflow-hidden rounded-2xl">
                <table className="w-full">
                    <thead className="bg-slate-50 border-b border-slate-200">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Field Label</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">API Name</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Type</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Properties</th>
                            <th className="px-6 py-3 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-200">
                        {filteredFields.map((field) => {
                            const displayType = describeFieldDisplayType(field);
                            const formulaReturnType = describeFormulaReturnType(field);

                            return (
                                <tr key={field.name} className="hover:bg-slate-50">
                                    <td className="px-6 py-4 whitespace-nowrap">
                                        <div className="flex items-center">
                                            <span className="font-medium text-slate-900">{field.label}</span>
                                            {field.nameField && (
                                                <span className="ml-2 px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded border border-blue-200">Name Field</span>
                                            )}
                                        </div>
                                        {field.inlineHelpText && (
                                            <p className="text-xs text-slate-500 mt-0.5">{field.inlineHelpText}</p>
                                        )}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap font-mono text-sm text-slate-600">
                                        {field.name}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
                                        {displayType === 'formula' ? 'Formula' : displayType}
                                        {formulaReturnType && (
                                            <span className="ml-1 text-slate-400">(returns {formulaReturnType})</span>
                                        )}
                                        {displayType === 'reference' && field.referenceTo && field.referenceTo.length > 0 && (
                                            <span className="ml-1 text-slate-400">({field.referenceTo[0]})</span>
                                        )}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                                        <div className="flex gap-2">
                                            {!field.nillable && (
                                                <span className="px-2 py-0.5 bg-red-50 text-red-700 rounded text-xs border border-red-100">Required</span>
                                            )}
                                            {field.unique && (
                                                <span className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs border border-purple-100">Unique</span>
                                            )}
                                            {!field.custom && (
                                                <span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs border border-slate-200">System</span>
                                            )}
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <div className="flex justify-end gap-2">
                                            {field.custom && (
                                                <>
                                                    <button
                                                        onClick={() => onOpenEdit(field)}
                                                        className="p-1.5 text-blue-600 hover:bg-blue-50 rounded transition-colors"
                                                        title="Edit"
                                                    >
                                                        <Edit size={16} />
                                                    </button>
                                                    {!field.nameField && (
                                                        <button
                                                            onClick={() => onDelete(field.name)}
                                                            className="p-1.5 text-red-600 hover:bg-red-50 rounded transition-colors"
                                                            title="Delete"
                                                        >
                                                            <Trash2 size={16} />
                                                        </button>
                                                    )}
                                                </>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            );
                        })}
                        {filteredFields.length === 0 && (
                            <tr>
                                <td colSpan={5} className="px-6 py-8 text-center text-slate-500">
                                    No fields found matching your search.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
};