
import React, { useEffect } from 'react';
import { ArrowLeft, Truck, RefreshCw, FileText, CheckCircle2, RotateCcw, XCircle, ArrowLeftRight, ShieldCheck } from 'lucide-react';
import { SiteSettings } from '../types';

interface LegalPagesProps {
  type: 'delivery-policy' | 'refund-policy' | 'terms' | 'return-policy' | 'exchange-policy' | 'cancellation-policy' | 'refund-only-policy';
  onBack: () => void;
  settings?: SiteSettings;
}

const PolicyCard: React.FC<{ step: number; title: string; text: string }> = ({ step, title, text }) => (
  <div className="flex gap-5 items-start p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:shadow-md transition">
    <div className="w-11 h-11 rounded-xl flex items-center justify-center font-black shrink-0 bg-[#F37021]/10 text-[#F37021] text-lg">
      {step}
    </div>
    <div>
      <h4 className="text-base font-black text-gray-800 mb-1">{title}</h4>
      <p className="text-gray-500 text-sm leading-relaxed">{text}</p>
    </div>
  </div>
);

const POLICY_META: Record<string, { title: string; subtitle: string; color: string; icon: React.ReactNode }> = {
  'return-policy': { title: 'Return Policy', subtitle: 'We want you to be 100% satisfied with your purchase.', color: '#F37021', icon: <RotateCcw size={30} /> },
  'exchange-policy': { title: 'Exchange Policy', subtitle: 'Easy product exchanges to ensure your satisfaction.', color: '#10B981', icon: <ArrowLeftRight size={30} /> },
  'cancellation-policy': { title: 'Cancellation Policy', subtitle: 'Flexible cancellation options for your convenience.', color: '#8B5CF6', icon: <XCircle size={30} /> },
  'refund-only-policy': { title: 'Refund Policy', subtitle: 'Transparent and hassle-free refund process.', color: '#3B82F6', icon: <ShieldCheck size={30} /> },
};

const AdminContentView: React.FC<{ type: string; content: string }> = ({ type, content }) => {
  const meta = POLICY_META[type];
  const paragraphs = content.split(/\n\n+/).filter(p => p.trim());
  return (
    <div className="space-y-8 animate-fade-in-up">
      <div className="rounded-3xl p-10 text-white relative overflow-hidden" style={{ background: `linear-gradient(135deg, ${meta.color}, ${meta.color}cc)` }}>
        <div className="absolute top-4 right-4 w-40 h-40 rounded-full border-4 border-white/10" />
        <div className="flex items-center gap-5 relative">
          <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center shrink-0">{meta.icon}</div>
          <div>
            <h1 className="text-3xl md:text-4xl font-black">{meta.title}</h1>
            <p className="text-white/80 mt-1">{meta.subtitle}</p>
          </div>
        </div>
      </div>
      <div className="space-y-4">
        {paragraphs.map((para, idx) => (
          <div key={idx} className="flex gap-4 p-5 bg-gray-50 rounded-2xl border border-gray-100">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center font-black shrink-0 text-white text-sm" style={{ background: meta.color }}>{idx + 1}</div>
            <p className="text-gray-600 text-sm leading-relaxed flex-1">{para.trim()}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

const LegalPages: React.FC<LegalPagesProps> = ({ type, onBack, settings }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [type]);

  // Check for admin-edited policy content
  const POLICY_TYPES = ['return-policy', 'exchange-policy', 'cancellation-policy', 'refund-only-policy'];
  if (POLICY_TYPES.includes(type) && settings?.policyPagesJson) {
    try {
      const policyPages = JSON.parse(settings.policyPagesJson);
      if (policyPages[type]) {
        return (
          <div className="min-h-screen bg-white pb-24">
            <div className="container mx-auto px-4 max-w-3xl pt-12">
              <button onClick={onBack} className="flex items-center gap-2 text-gray-500 hover:text-[#F37021] font-bold mb-10 transition-colors text-sm">
                <ArrowLeft size={16} /> Back to Home
              </button>
              <AdminContentView type={type} content={policyPages[type]} />
            </div>
          </div>
        );
      }
    } catch { }
  }

  const renderContent = () => {
    switch (type) {

      case 'return-policy':
        return (
          <div className="space-y-8 animate-fade-in-up">
            <div className="rounded-3xl p-10 text-white relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #F37021, #E05A10)' }}>
              <div className="absolute top-4 right-4 w-40 h-40 rounded-full border-4 border-white/10" />
              <div className="flex items-center gap-5 relative">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center shrink-0"><RotateCcw size={30} /></div>
                <div>
                  <h1 className="text-3xl md:text-4xl font-black">Return Policy</h1>
                  <p className="text-white/80 mt-1">We want you to be 100% satisfied with your purchase.</p>
                </div>
              </div>
            </div>
            <p className="text-gray-600 leading-relaxed">At our store, we take pride in the quality of our organic products. If for any reason you are not completely satisfied, here is our return policy:</p>
            <div className="space-y-3">
              <PolicyCard step={1} title="Eligibility Window" text="Returns must be initiated within 48 hours of receiving your order. Products must be unused, unopened, and in original packaging." />
              <PolicyCard step={2} title="How to Request a Return" text="Contact us via WhatsApp or phone with your order ID and a photo of the product. Our team will guide you through the process." />
              <PolicyCard step={3} title="Non-Returnable Items" text="Perishable goods, opened food items, or products damaged by misuse are not eligible for return." />
              <PolicyCard step={4} title="Return Shipping" text="The customer is responsible for return shipping costs unless the product was defective or wrong item was delivered." />
            </div>
            <div className="p-6 bg-orange-50 border-l-4 border-[#F37021] rounded-r-2xl">
              <h4 className="font-black text-gray-800 mb-1">📦 Important Note</h4>
              <p className="text-gray-600 text-sm">Once we receive and inspect the returned product, we will process your exchange or refund within 3-5 business days.</p>
            </div>
          </div>
        );

      case 'exchange-policy':
        return (
          <div className="space-y-8 animate-fade-in-up">
            <div className="rounded-3xl p-10 text-white relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #10B981, #059669)' }}>
              <div className="absolute top-4 right-4 w-40 h-40 rounded-full border-4 border-white/10" />
              <div className="flex items-center gap-5 relative">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center shrink-0"><ArrowLeftRight size={30} /></div>
                <div>
                  <h1 className="text-3xl md:text-4xl font-black">Exchange Policy</h1>
                  <p className="text-white/80 mt-1">Easy product exchanges to ensure your satisfaction.</p>
                </div>
              </div>
            </div>
            <p className="text-gray-600 leading-relaxed">We understand that sometimes the product you receive may not meet your exact expectations. Here is how our exchange process works:</p>
            <div className="space-y-3">
              <PolicyCard step={1} title="Exchange Window" text="Exchanges must be requested within 48 hours of delivery. Products must be in their original, unopened condition." />
              <PolicyCard step={2} title="Eligible Products" text="Only products with manufacturing defects, wrong items, or damaged packaging qualify for direct exchange without additional charges." />
              <PolicyCard step={3} title="Exchange Process" text="Reach out to our support team with your order ID and clear images of the issue. We will arrange a pickup and send a replacement." />
              <PolicyCard step={4} title="Exchange Shipping" text="For defective or wrong products, we cover the exchange shipping. For preference-based exchanges, shipping cost is borne by the customer." />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-5 bg-green-50 rounded-2xl border border-green-100">
                <h4 className="font-black text-green-800 mb-2">✅ Exchangeable</h4>
                <ul className="space-y-1 text-sm text-green-700">
                  <li>• Defective / damaged products</li>
                  <li>• Wrong product delivered</li>
                  <li>• Missing items in order</li>
                </ul>
              </div>
              <div className="p-5 bg-red-50 rounded-2xl border border-red-100">
                <h4 className="font-black text-red-800 mb-2">❌ Not Exchangeable</h4>
                <ul className="space-y-1 text-sm text-red-700">
                  <li>• Opened / used products</li>
                  <li>• Change of mind</li>
                  <li>• Products after 48 hours</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'cancellation-policy':
        return (
          <div className="space-y-8 animate-fade-in-up">
            <div className="rounded-3xl p-10 text-white relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #8B5CF6, #6D28D9)' }}>
              <div className="absolute top-4 right-4 w-40 h-40 rounded-full border-4 border-white/10" />
              <div className="flex items-center gap-5 relative">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center shrink-0"><XCircle size={30} /></div>
                <div>
                  <h1 className="text-3xl md:text-4xl font-black">Cancellation Policy</h1>
                  <p className="text-white/80 mt-1">Flexible cancellation options for your convenience.</p>
                </div>
              </div>
            </div>
            <p className="text-gray-600 leading-relaxed">We respect your right to cancel an order. Please review our cancellation policy to understand the timelines and conditions:</p>
            <div className="space-y-3">
              <PolicyCard step={1} title="Before Dispatch" text="You can cancel your order free of charge anytime before it has been dispatched from our warehouse. Contact us immediately." />
              <PolicyCard step={2} title="After Dispatch" text="Once the order has been dispatched, it cannot be cancelled. You may request a return after receiving the product." />
              <PolicyCard step={3} title="How to Cancel" text="Send your Order ID via WhatsApp or call our support. Cancellations are accepted during business hours (9AM – 6PM)." />
              <PolicyCard step={4} title="Refund on Cancellation" text="For prepaid orders, the full amount will be refunded within 3-5 business days to your original payment method." />
            </div>
            <div className="p-6 bg-purple-50 border border-purple-100 rounded-2xl flex items-start gap-4">
              <ShieldCheck size={24} className="text-purple-600 shrink-0 mt-0.5" />
              <div>
                <h4 className="font-black text-purple-800 mb-1">No Cancellation Fees</h4>
                <p className="text-purple-700 text-sm">We do not charge any cancellation fees for orders cancelled before dispatch. Your satisfaction is our priority.</p>
              </div>
            </div>
          </div>
        );

      case 'refund-only-policy':
        return (
          <div className="space-y-8 animate-fade-in-up">
            <div className="rounded-3xl p-10 text-white relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #3B82F6, #1D4ED8)' }}>
              <div className="absolute top-4 right-4 w-40 h-40 rounded-full border-4 border-white/10" />
              <div className="flex items-center gap-5 relative">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center shrink-0"><ShieldCheck size={30} /></div>
                <div>
                  <h1 className="text-3xl md:text-4xl font-black">Refund Policy</h1>
                  <p className="text-white/80 mt-1">Transparent and hassle-free refund process.</p>
                </div>
              </div>
            </div>
            <p className="text-gray-600 leading-relaxed">We stand behind the quality of every product we sell. If you are eligible for a refund, here is what you need to know:</p>
            <div className="space-y-3">
              <PolicyCard step={1} title="Refund Eligibility" text="Refunds are issued for defective products, wrong items delivered, or orders cancelled before dispatch. Opened or used products are not eligible." />
              <PolicyCard step={2} title="Refund Timeline" text="Once your refund request is approved, we process it within 3-5 business days. You will receive a confirmation notification." />
              <PolicyCard step={3} title="Refund Methods" text="Refunds are issued via bKash, Nagad, or bank transfer — whichever you prefer. Please provide your account details when requesting." />
              <PolicyCard step={4} title="Partial Refunds" text="In some cases (partially damaged order, missing items), only a partial refund may be issued equivalent to the value of the affected items." />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {[
                { label: 'Request', desc: 'Contact support with Order ID & photo', icon: '📩' },
                { label: 'Review', desc: 'We review within 24 hours', icon: '🔍' },
                { label: 'Refund', desc: 'Money back in 3–5 days', icon: '💸' },
              ].map((step, idx) => (
                <div key={idx} className="p-5 bg-blue-50 rounded-2xl border border-blue-100 text-center">
                  <div className="text-3xl mb-2">{step.icon}</div>
                  <h4 className="font-black text-blue-800 text-sm mb-1">{step.label}</h4>
                  <p className="text-blue-600 text-xs">{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        );

      case 'delivery-policy':
        return (
          <div className="space-y-10 animate-fade-in-up">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-16 h-16 bg-themePrimary/10 rounded-2xl flex items-center justify-center text-themePrimary"><Truck size={32} /></div>
              <h1 className="text-4xl font-black font-bangla text-black dark:text-white">ডেলিভারি পলিসি</h1>
            </div>
            <section className="space-y-6">
              <p className="text-lg text-slate-600 dark:text-slate-400 font-bangla leading-relaxed">আমরা গ্রাহকদের সুবিধার্থে অত্যন্ত দ্রুত এবং নিরাপদ ডেলিভারি ব্যবস্থা নিশ্চিত করি।</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="p-8 bg-slate-50 dark:bg-slate-800 rounded-[32px] border dark:border-slate-700">
                  <h3 className="text-xl font-black font-bangla mb-4 text-themePrimary">ডেলিভারি সময়</h3>
                  <ul className="space-y-3 font-bangla text-slate-600 dark:text-slate-400">
                    <li className="flex gap-2 items-start"><CheckCircle2 size={18} className="text-green-500 shrink-0 mt-1" /> Dhakaসিটির ভেতর: ২৪-৪৮ ঘণ্টা।</li>
                    <li className="flex gap-2 items-start"><CheckCircle2 size={18} className="text-green-500 shrink-0 mt-1" /> Outside Dhaka: ২-৪ কার্যদিবস।</li>
                  </ul>
                </div>
                <div className="p-8 bg-slate-50 dark:bg-slate-800 rounded-[32px] border dark:border-slate-700">
                  <h3 className="text-xl font-black font-bangla mb-4 text-themePrimary">ডেলিভারি চার্জ</h3>
                  <ul className="space-y-3 font-bangla text-slate-600 dark:text-slate-400">
                    <li className="flex gap-2 items-start"><CheckCircle2 size={18} className="text-green-500 shrink-0 mt-1" /> Dhakaশহর: ৭০ টাকা।</li>
                    <li className="flex gap-2 items-start"><CheckCircle2 size={18} className="text-green-500 shrink-0 mt-1" /> সারা দেশ (কুরিয়ার): ১৩০ টাকা।</li>
                  </ul>
                </div>
              </div>
            </section>
          </div>
        );

      case 'refund-policy':
        return (
          <div className="space-y-10 animate-fade-in-up">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-16 h-16 bg-themePrimary/10 rounded-2xl flex items-center justify-center text-themePrimary"><RefreshCw size={32} /></div>
              <h1 className="text-4xl font-black font-bangla text-black dark:text-white">রিফান্ড ও রিটার্ন পলিসি</h1>
            </div>
            <section className="space-y-8">
              <div className="space-y-6">
                {[
                  { title: 'অভিযোগের সময়সীমা', text: 'পণ্য হাতে পাওয়ার পর যদি কোনো ত্রুটি বা ভুল পণ্য দেখা যায়, তবে অবশ্যই ২৪ ঘণ্টার মধ্যে আমাদের অবহিত করতে হবে।' },
                  { title: 'রিটার্ন শর্তাবলী', text: 'পণ্যটি অব্যবহৃত এবং এর অরিজিনাল প্যাকেজিং অক্ষত থাকতে হবে।' },
                  { title: 'রিফান্ড প্রসেস', text: 'রিফান্ড অনুমোদিত হওয়ার ৩-৫ কার্যদিবসের মধ্যে টাকা ফেরত দেওয়া হবে।' }
                ].map((item, idx) => (
                  <div key={idx} className="flex gap-6 items-start p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors rounded-3xl">
                    <div className="w-10 h-10 rounded-full bg-themePrimary/10 flex items-center justify-center font-black text-themePrimary shrink-0">{idx + 1}</div>
                    <div>
                      <h4 className="text-xl font-black font-bangla text-black dark:text-white mb-2">{item.title}</h4>
                      <p className="font-bangla text-slate-600 dark:text-slate-400 leading-relaxed">{item.text}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>
          </div>
        );

      case 'terms':
        return (
          <div className="space-y-10 animate-fade-in-up">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-16 h-16 bg-themePrimary/10 rounded-2xl flex items-center justify-center text-themePrimary"><FileText size={32} /></div>
              <h1 className="text-4xl font-black font-bangla text-black dark:text-white">শর্তাবলী</h1>
            </div>
            <div className="bg-slate-50 dark:bg-slate-800 p-10 rounded-[40px] space-y-8 text-slate-600 dark:text-slate-400 font-bangla leading-relaxed">
              {[
                { title: '১. অর্ডার ও মূল্য পরিশোধ', text: 'অর্ডার করার সময় সঠিক তথ্য প্রদান করা আপনার দায়িত্ব। আমরা ক্যাশ অন ডেলিভারি সুবিধা প্রদান করি।' },
                { title: '২. বুদ্ধিবৃত্তিক সম্পদ', text: 'এই ওয়েবসাইটের সকল কন্টেন্ট আমাদের নিজস্ব সম্পত্তি। অনুমতি ছাড়া ব্যবহার দণ্ডনীয়।' },
                { title: '৩. পণ্যের নির্ভুলতা', text: 'প্রাকৃতিক উপাদানের কারণে পণ্যের রঙ বা টেক্সচারে সামান্য পার্থক্য থাকতে পারে।' },
                { title: '৪. গোপনীয়তা নীতি', text: 'আপনার ব্যক্তিগত তথ্য আমাদের কাছে সম্পূর্ণ সুরক্ষিত থাকবে।' },
              ].map((item, idx) => (
                <div key={idx}>
                  <h4 className="text-xl font-black text-black dark:text-white mb-3">{item.title}</h4>
                  <p>{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="min-h-screen bg-white dark:bg-slate-900 pb-24">
      <div className="container mx-auto px-4 max-w-3xl pt-12">
        <button
          onClick={onBack}
          className="flex items-center gap-2 text-gray-500 hover:text-[#F37021] font-bold mb-10 transition-colors text-sm"
        >
          <ArrowLeft size={16} /> Back to Home
        </button>
        {renderContent()}
      </div>
    </div>
  );
};

export default LegalPages;
