import React, { useState, useEffect } from 'react';
import { RefreshCw, CheckCircle, MapPin, Facebook, Instagram, Twitter, Youtube, Code, Target, Phone, Mail } from 'lucide-react';

const Input = ({ label, value, onChange, placeholder, icon, type = 'text', disabled }: any) => (
  <div>
    <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-slate-400 mb-2 block">{label}</label>
    <div className="relative">
      {icon && <div className="absolute left-4 top-1/2 -translate-y-1/2">{icon}</div>}
      <input type={type} value={value || ''} onChange={e => onChange(e.target.value)} disabled={disabled} placeholder={placeholder} className={`w-full h-12 bg-slate-50 dark:bg-slate-800 rounded-xl outline-none font-medium text-sm text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all ${icon ? 'pl-11 pr-4' : 'px-4'}`} />
    </div>
  </div>
);

interface StoreSettingsManagerProps {
  activeTab: string;
  settings: any;
  canAccess: (section: string, action?: 'view' | 'edit' | 'delete') => boolean;
  saveSiteSettings: (updates: any) => Promise<void>;
  isSaving: boolean;
}

export default function StoreSettingsManager({ activeTab, settings, canAccess, saveSiteSettings, isSaving }: StoreSettingsManagerProps) {
  const [contactForm, setContactForm] = useState({ phone: '', email: '', address: '' });
  const [socialForm, setSocialForm] = useState({ facebook: '', instagram: '', twitter: '', youtube: '' });
  const [gtmId, setGtmId] = useState('');

  useEffect(() => {
    setContactForm({ phone: settings?.phone || '', email: settings?.email || '', address: settings?.address || '' });
    setSocialForm({ facebook: settings?.facebook || '', instagram: settings?.instagram || '', twitter: settings?.twitter || '', youtube: settings?.youtube || '' });
    setGtmId(settings?.gtm_id || settings?.gtmId || '');
  }, [settings]);

  return (
    <>
              {activeTab === 'contact' && canAccess('contact') && (
                <div className="max-w-3xl space-y-8">
                  <h2 className="text-4xl font-black">Contact Configuration</h2>

                  <div className="bg-white dark:bg-slate-900 p-12 rounded-[48px] border shadow-xl space-y-6">
                    <div>
                      <label className="text-[10px] font-black uppercase text-slate-500 dark:text-slate-400 ml-2">Store Phone</label>
                      <div className="relative">
                        <Phone className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400" size={20} />
                        <input
                          type="text"
                          className="w-full pl-12 pr-4 py-4 bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-red-600 rounded-2xl font-bold"
                          value={contactForm.phone}
                          onChange={(e) => setContactForm({ ...contactForm, phone: e.target.value })}
                          placeholder="+880 1790-014219"
                          disabled={!canAccess('contact', 'edit')}
                        />
                      </div>
                    </div>

                    <div>
                      <label className="text-[10px] font-black uppercase text-slate-500 dark:text-slate-400 ml-2">Public Email</label>
                      <div className="relative">
                        <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400" size={20} />
                        <input
                          type="email"
                          className="w-full pl-12 pr-4 py-4 bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-red-600 rounded-2xl font-bold"
                          value={contactForm.email}
                          onChange={(e) => setContactForm({ ...contactForm, email: e.target.value })}
                          placeholder="hello@shophyfast.com"
                          disabled={!canAccess('contact', 'edit')}
                        />
                      </div>
                    </div>

                    <div>
                      <label className="text-[10px] font-black uppercase text-slate-500 dark:text-slate-400 ml-2">Office Address</label>
                      <div className="relative">
                        <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400" size={20} />
                        <textarea
                          className="w-full pl-12 pr-4 py-4 bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-red-600 rounded-2xl font-bold min-h-[100px]"
                          value={contactForm.address}
                          onChange={(e) => setContactForm({ ...contactForm, address: e.target.value })}
                          placeholder="Hathazari, Chattogram, Bangladesh"
                          disabled={!canAccess('contact', 'edit')}
                        />
                      </div>
                    </div>

                    {canAccess('contact', 'edit') && (
                      <button
                        onClick={() => saveSiteSettings({
                          phone: contactForm.phone,
                          email: contactForm.email,
                          address: contactForm.address,
                        })}
                        disabled={isSaving}
                        className="w-full py-5 bg-red-600 hover:bg-red-700 text-white rounded-2xl font-black shadow-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                      >
                        {isSaving
                          ? <><RefreshCw size={18} className="animate-spin" /> Saving...</>
                          : <><CheckCircle size={18} /> Save Contact Info</>
                        }
                      </button>
                    )}
                  </div>
                </div>
              )}


              {activeTab === 'social' && canAccess('social') && (
                <div className="max-w-3xl space-y-8">
                  <h2 className="text-4xl font-black">Social Links</h2>
                  <div className="bg-white dark:bg-slate-900 p-12 rounded-[48px] border shadow-xl space-y-6">
                    <Input
                      label="Facebook"
                      value={socialForm.facebook}
                      onChange={(v: string) => setSocialForm({ ...socialForm, facebook: v })}
                      icon={<Facebook size={20} className="text-blue-600" />}
                      disabled={!canAccess('social', 'edit')}
                    />
                    <Input
                      label="Instagram"
                      value={socialForm.instagram}
                      onChange={(v: string) => setSocialForm({ ...socialForm, instagram: v })}
                      icon={<Instagram size={20} className="text-pink-600" />}
                      disabled={!canAccess('social', 'edit')}
                    />
                    <Input
                      label="Twitter"
                      value={socialForm.twitter}
                      onChange={(v: string) => setSocialForm({ ...socialForm, twitter: v })}
                      icon={<Twitter size={20} className="text-slate-900" />}
                      disabled={!canAccess('social', 'edit')}
                    />
                    <Input
                      label="Youtube"
                      value={socialForm.youtube}
                      onChange={(v: string) => setSocialForm({ ...socialForm, youtube: v })}
                      icon={<Youtube size={20} className="text-red-600" />}
                      disabled={!canAccess('social', 'edit')}
                    />
                    {canAccess('social', 'edit') && (
                      <button 
                        onClick={() => saveSiteSettings(socialForm)} 
                        disabled={isSaving}
                        className="w-full py-5 bg-slate-900 hover:bg-black text-white rounded-2xl font-black shadow-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                      >
                        {isSaving
                          ? <><RefreshCw size={18} className="animate-spin" /> Updating...</>
                          : <><CheckCircle size={18} /> Update Channels</>
                        }
                      </button>
                    )}
                  </div>
                </div>
              )}


              {activeTab === 'pixel' && canAccess('pixel') && (
                <div className="max-w-4xl space-y-8 animate-fade-in-up">
                  <div className="flex items-center gap-4 mb-2">
                    <div className="w-14 h-14 rounded-2xl flex items-center justify-center shadow-lg shrink-0"
                      style={{ background: 'linear-gradient(135deg, #0f766e, #14b8a6)' }}>
                      <Code size={26} className="text-slate-800 dark:text-white" />
                    </div>
                    <div>
                      <h2 className="text-2xl font-black text-slate-800 tracking-tight">GTM Settings</h2>
                      <p className="text-sm text-slate-500 font-medium">Google Tag Manager Pixel tracking configuration.</p>
                    </div>
                  </div>

                  <div className="bg-white dark:bg-slate-900 p-8 rounded-[40px] border shadow-sm space-y-6 hover:shadow-xl transition-all max-w-2xl mx-auto">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-teal-600 rounded-xl flex items-center justify-center text-slate-800 dark:text-white shadow-lg"><Code size={24} /></div>
                      <div>
                        <h3 className="font-black text-xl">Tag Manager</h3>
                        <p className="text-xs text-slate-500 dark:text-slate-400 font-medium">Google Tag Manager ID</p>
                      </div>
                    </div>
                    <p className="text-sm text-slate-500 dark:text-slate-500 dark:text-slate-400 leading-relaxed border-l-4 border-teal-600 pl-4 italic">
                      Enter your Google Tag Manager ID to enable event tracking across the website.
                    </p>
                    <Input
                      label="GTM ID"
                      value={gtmId}
                      onChange={setGtmId}
                      placeholder="e.g. GTM-XXXXXXX"
                      icon={<Target size={18} className="text-teal-600" />}
                      disabled={!canAccess('pixel', 'edit')}
                    />
                  </div>

                  {canAccess('pixel', 'edit') && (
                    <button
                      onClick={() => saveSiteSettings({ gtmId: gtmId })}
                      className="w-full py-6 bg-teal-600 hover:bg-teal-700 text-slate-800 dark:text-white rounded-[24px] font-black text-xl shadow-xl active:scale-95 transition-all flex items-center justify-center gap-3"
                    >
                      <CheckCircle size={24} /> Save GTM ID
                    </button>
                  )}
                </div>
              )}




    </>
  );
}
