import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { Cookie, Calendar, Settings, Shield, BarChart3, Target } from 'lucide-react';
import { Card, Button } from '../../components/ui';

export const CookiePolicyPage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const lastUpdated = '2025-10-15';

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <div className="flex justify-center mb-4">
            <Cookie className="w-16 h-16 text-amber-600" />
          </div>
          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
            {t('legal:cookie.title', 'Cookie Policy')}
          </h1>
          <div className="flex items-center justify-center gap-2 text-sm text-gray-600 dark:text-gray-400">
            <Calendar className="w-4 h-4" />
            <span>
              {t('legal:cookie.last_updated', 'Last updated')}: {lastUpdated}
            </span>
          </div>
        </div>

        <div className="mb-6">
          <Card className="p-6 bg-primary-50 dark:bg-primary-900/20 border-primary-200 dark:border-primary-800">
            <div className="flex items-start gap-4">
              <Settings className="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" />
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  Manage Your Cookie Preferences
                </h3>
                <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                  You can control which cookies we use by visiting our Cookie Preferences page. You can
                  change your preferences at any time.
                </p>
                <Button
                  onClick={() => navigate('/cookie-preferences')}
                  variant="primary"
                  size="sm"
                >
                  <Settings className="w-4 h-4 mr-2" />
                  Manage Cookie Preferences
                </Button>
              </div>
            </div>
          </Card>
        </div>

        <Card className="p-8 prose prose-gray dark:prose-invert max-w-none">
          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              1. {t('legal:cookie.section_1_title', 'What Are Cookies?')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Cookies are small text files that are stored on your computer or mobile device when you
              visit a website. They are widely used to make websites work more efficiently and provide
              information to website owners.
            </p>
            <p className="text-gray-700 dark:text-gray-300">
              Cookies can be "persistent" or "session" cookies. Persistent cookies remain on your
              device after you close your browser, while session cookies are deleted when you close
              your browser.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              2. {t('legal:cookie.section_2_title', 'How We Use Cookies')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We use cookies for several reasons:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300 space-y-2">
              <li>To enable essential functionality (login, session management)</li>
              <li>To remember your preferences and settings</li>
              <li>To analyze how you use our platform (analytics)</li>
              <li>To provide personalized content and features</li>
              <li>To deliver relevant advertisements (if applicable)</li>
              <li>To improve our services and user experience</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              3. {t('legal:cookie.section_3_title', 'Types of Cookies We Use')}
            </h2>

            <div className="space-y-6">
              <div className="border-l-4 border-green-500 pl-4 bg-green-50 dark:bg-green-900/20 p-4 rounded-r-lg">
                <div className="flex items-start gap-3 mb-3">
                  <Shield className="w-6 h-6 text-green-600 flex-shrink-0 mt-1" />
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                      3.1 Essential Cookies (Required)
                    </h3>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                      These cookies are necessary for the website to function and cannot be switched off.
                      They are usually set in response to actions you take such as logging in or filling
                      in forms.
                    </p>
                  </div>
                </div>
                <div className="ml-9">
                  <table className="min-w-full text-sm">
                    <thead className="bg-green-100 dark:bg-green-900/30">
                      <tr>
                        <th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
                        <th className="px-3 py-2 text-left font-semibold">Purpose</th>
                        <th className="px-3 py-2 text-left font-semibold">Duration</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-green-200 dark:divide-green-800">
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">session_token</td>
                        <td className="px-3 py-2">Maintains user session</td>
                        <td className="px-3 py-2">Session</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">auth_token</td>
                        <td className="px-3 py-2">Authentication</td>
                        <td className="px-3 py-2">7 days</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">csrf_token</td>
                        <td className="px-3 py-2">Security protection</td>
                        <td className="px-3 py-2">Session</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">bakery_cookie_consent</td>
                        <td className="px-3 py-2">Stores cookie preferences</td>
                        <td className="px-3 py-2">1 year</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div className="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-r-lg">
                <div className="flex items-start gap-3 mb-3">
                  <Settings className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                      3.2 Preference Cookies (Optional)
                    </h3>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                      These cookies allow us to remember your preferences and settings, such as language,
                      region, and theme preferences.
                    </p>
                  </div>
                </div>
                <div className="ml-9">
                  <table className="min-w-full text-sm">
                    <thead className="bg-blue-100 dark:bg-blue-900/30">
                      <tr>
                        <th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
                        <th className="px-3 py-2 text-left font-semibold">Purpose</th>
                        <th className="px-3 py-2 text-left font-semibold">Duration</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-blue-200 dark:divide-blue-800">
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">user_language</td>
                        <td className="px-3 py-2">Language preference</td>
                        <td className="px-3 py-2">1 year</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">theme_preference</td>
                        <td className="px-3 py-2">Dark/Light mode</td>
                        <td className="px-3 py-2">1 year</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">timezone</td>
                        <td className="px-3 py-2">Timezone setting</td>
                        <td className="px-3 py-2">1 year</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div className="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-r-lg">
                <div className="flex items-start gap-3 mb-3">
                  <BarChart3 className="w-6 h-6 text-purple-600 flex-shrink-0 mt-1" />
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                      3.3 Analytics Cookies (Optional)
                    </h3>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                      These cookies help us understand how visitors interact with our website by
                      collecting and reporting information anonymously. We use this data to improve our
                      services.
                    </p>
                  </div>
                </div>
                <div className="ml-9">
                  <table className="min-w-full text-sm">
                    <thead className="bg-purple-100 dark:bg-purple-900/30">
                      <tr>
                        <th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
                        <th className="px-3 py-2 text-left font-semibold">Purpose</th>
                        <th className="px-3 py-2 text-left font-semibold">Duration</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-purple-200 dark:divide-purple-800">
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">_ga</td>
                        <td className="px-3 py-2">Google Analytics - User ID</td>
                        <td className="px-3 py-2">2 years</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">_gid</td>
                        <td className="px-3 py-2">Google Analytics - Session</td>
                        <td className="px-3 py-2">24 hours</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">_gat</td>
                        <td className="px-3 py-2">Google Analytics - Throttling</td>
                        <td className="px-3 py-2">1 minute</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">analytics_session</td>
                        <td className="px-3 py-2">Internal analytics session</td>
                        <td className="px-3 py-2">30 minutes</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div className="border-l-4 border-orange-500 pl-4 bg-orange-50 dark:bg-orange-900/20 p-4 rounded-r-lg">
                <div className="flex items-start gap-3 mb-3">
                  <Target className="w-6 h-6 text-orange-600 flex-shrink-0 mt-1" />
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                      3.4 Marketing Cookies (Optional)
                    </h3>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                      These cookies track your visits to our website and other websites to show you
                      personalized advertisements. They may be set by us or by third-party advertising
                      partners.
                    </p>
                  </div>
                </div>
                <div className="ml-9">
                  <table className="min-w-full text-sm">
                    <thead className="bg-orange-100 dark:bg-orange-900/30">
                      <tr>
                        <th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
                        <th className="px-3 py-2 text-left font-semibold">Purpose</th>
                        <th className="px-3 py-2 text-left font-semibold">Duration</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-orange-200 dark:divide-orange-800">
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">marketing_id</td>
                        <td className="px-3 py-2">Marketing campaign tracking</td>
                        <td className="px-3 py-2">90 days</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">ad_preferences</td>
                        <td className="px-3 py-2">Ad personalization</td>
                        <td className="px-3 py-2">1 year</td>
                      </tr>
                      <tr>
                        <td className="px-3 py-2 font-mono text-xs">conversion_track</td>
                        <td className="px-3 py-2">Conversion tracking</td>
                        <td className="px-3 py-2">30 days</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              4. {t('legal:cookie.section_4_title', 'Third-Party Cookies')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Some cookies are set by third-party services that appear on our pages:
            </p>

            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-4">
              <h4 className="font-semibold text-gray-900 dark:text-white mb-3">
                Third-Party Services:
              </h4>
              <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
                <li className="flex items-start gap-2">
                  <span className="font-semibold min-w-[120px]">Google Analytics:</span>
                  <span>Analytics and performance monitoring</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="font-semibold min-w-[120px]">Stripe:</span>
                  <span>Payment processing (sets cookies on their domain)</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="font-semibold min-w-[120px]">CDN Services:</span>
                  <span>Content delivery and performance optimization</span>
                </li>
              </ul>
            </div>

            <p className="text-gray-700 dark:text-gray-300">
              These third parties have their own privacy policies and cookie policies. We recommend
              reviewing them:
            </p>
            <ul className="list-disc pl-6 mt-2 text-sm text-gray-700 dark:text-gray-300">
              <li>
                <a
                  href="https://policies.google.com/privacy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Google Privacy Policy
                </a>
              </li>
              <li>
                <a
                  href="https://stripe.com/privacy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-600 hover:text-primary-700 underline"
                >
                  Stripe Privacy Policy
                </a>
              </li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              5. {t('legal:cookie.section_5_title', 'How to Control Cookies')}
            </h2>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              5.1 Our Cookie Preference Tool
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              The easiest way to manage cookies on our website is through our Cookie Preferences page.
              You can:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Accept all cookies</li>
              <li>Accept only essential cookies</li>
              <li>Customize your preferences by category</li>
              <li>Change your preferences at any time</li>
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              5.2 Browser Settings
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Most browsers allow you to control cookies through their settings:
            </p>
            <ul className="list-disc pl-6 mb-4 text-sm text-gray-700 dark:text-gray-300">
              <li>
                <strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data
              </li>
              <li>
                <strong>Firefox:</strong> Settings → Privacy & Security → Cookies and Site Data
              </li>
              <li>
                <strong>Safari:</strong> Preferences → Privacy → Cookies and website data
              </li>
              <li>
                <strong>Edge:</strong> Settings → Cookies and site permissions → Cookies and site data
              </li>
            </ul>

            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
              <p className="text-sm text-amber-900 dark:text-amber-100">
                <strong>Note:</strong> Blocking all cookies may prevent you from using certain features
                of our website, such as staying logged in or saving your preferences.
              </p>
            </div>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              6. {t('legal:cookie.section_6_title', 'Do Not Track Signals')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300">
              Some browsers include a "Do Not Track" (DNT) feature. Currently, there is no industry
              standard for how websites should respond to DNT signals. We respect your cookie preferences
              set through our Cookie Preference tool and browser settings.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              7. {t('legal:cookie.section_7_title', 'Updates to This Policy')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300">
              We may update this Cookie Policy from time to time to reflect changes in our practices or
              for legal, operational, or regulatory reasons. The "Last Updated" date at the top of this
              page indicates when this policy was last revised.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              8. {t('legal:cookie.section_8_title', 'Contact Us')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              If you have questions about our use of cookies, please contact us:
            </p>
            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
              <p className="font-semibold">Panadería IA</p>
              <p>Email: privacy@panaderia-ia.com</p>
              <p>Website: https://panaderia-ia.com</p>
            </div>
          </section>
        </Card>

        <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
          <Button onClick={() => navigate('/cookie-preferences')} variant="primary">
            <Settings className="w-4 h-4 mr-2" />
            Manage Cookie Preferences
          </Button>
          <Button onClick={() => navigate('/')} variant="outline">
            Back to Home
          </Button>
        </div>
      </div>
    </div>
  );
};

export default CookiePolicyPage;