import React from 'react';
import { useTranslation } from 'react-i18next';
import { Shield, Mail, FileText, Calendar } from 'lucide-react';
import { Card } from '../../components/ui';

export const PrivacyPolicyPage: React.FC = () => {
  const { t } = useTranslation();

  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">
            <Shield className="w-16 h-16 text-primary-600" />
          </div>
          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
            {t('legal:privacy.title', 'Privacy 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:privacy.last_updated', 'Last updated')}: {lastUpdated}
            </span>
          </div>
        </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:privacy.section_1_title', 'Data Controller')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              The data controller responsible for your personal data is:
            </p>
            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg mb-4">
              <p className="font-semibold">Panadería IA</p>
              <p>Email: privacy@panaderia-ia.com</p>
              <p>Website: https://panaderia-ia.com</p>
            </div>
            <p className="text-gray-700 dark:text-gray-300">
              If you have any questions about this Privacy Policy or our data processing practices,
              please contact us at the above email address.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              2. {t('legal:privacy.section_2_title', 'Personal Data We Collect')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We collect and process the following categories of personal data:
            </p>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              2.1 Account Information
            </h3>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Full name</li>
              <li>Email address</li>
              <li>Phone number</li>
              <li>Password (encrypted)</li>
              <li>Account creation date</li>
              <li>Last login information</li>
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              2.2 Business Information
            </h3>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Business name (bakery name)</li>
              <li>Business type</li>
              <li>Business address</li>
              <li>Tax identification number</li>
              <li>Business license information</li>
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              2.3 Usage Data
            </h3>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>IP address</li>
              <li>Browser type and version</li>
              <li>Device information</li>
              <li>Pages visited and features used</li>
              <li>Time and date of access</li>
              <li>Referring website addresses</li>
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              2.4 Customer Data (If Applicable)
            </h3>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Customer names and contact information</li>
              <li>Order history and preferences</li>
              <li>Delivery addresses</li>
              <li>Payment information (processed by Stripe, not stored by us)</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              3. {t('legal:privacy.section_3_title', 'Legal Basis for Processing')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We process your personal data based on the following legal grounds under GDPR Article 6:
            </p>

            <div className="space-y-4">
              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                  Contract Performance (Art. 6(1)(b))
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Processing necessary to provide our services, manage your account, and fulfill our
                  contractual obligations to you.
                </p>
              </div>

              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                  Consent (Art. 6(1)(a))
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  For marketing communications, analytics cookies, and other optional data processing
                  where you have provided explicit consent.
                </p>
              </div>

              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                  Legitimate Interests (Art. 6(1)(f))
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  For improving our services, security purposes, and fraud prevention, where our
                  legitimate interests do not override your rights.
                </p>
              </div>

              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                  Legal Obligation (Art. 6(1)(c))
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  For compliance with legal obligations such as tax, accounting, and regulatory
                  requirements.
                </p>
              </div>
            </div>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              4. {t('legal:privacy.section_4_title', 'How We Use Your Data')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We use your personal data for the following purposes:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300 space-y-2">
              <li>To provide, operate, and maintain our bakery management platform</li>
              <li>To manage your account and provide customer support</li>
              <li>To process transactions and send you related information</li>
              <li>To send administrative information, updates, and security alerts</li>
              <li>To improve and personalize your experience on our platform</li>
              <li>To monitor and analyze usage trends and activities</li>
              <li>To detect, prevent, and address technical issues and fraud</li>
              <li>To send marketing communications (with your consent)</li>
              <li>To comply with legal obligations and enforce our terms</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              5. {t('legal:privacy.section_5_title', 'Data Sharing and Third Parties')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We may share your personal data with the following third parties:
            </p>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              5.1 Service Providers
            </h3>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li><strong>Stripe:</strong> Payment processing (PCI-DSS compliant)</li>
              <li><strong>Clouding.io:</strong> Cloud infrastructure hosting in the EU</li>
              <li><strong>Email service providers:</strong> For transactional and marketing emails</li>
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              5.2 Data Processing Agreements
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              All third-party service providers are bound by Data Processing Agreements (DPAs) that
              ensure GDPR compliance and protect your data rights.
            </p>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              5.3 Legal Disclosures
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We may disclose your data if required by law, legal process, litigation, or government
              authorities, or to protect our rights, property, or safety.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              6. {t('legal:privacy.section_6_title', 'Data Retention')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We retain your personal data for as long as necessary to fulfill the purposes outlined
              in this Privacy Policy, unless a longer retention period is required by law.
            </p>

            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg mb-4">
              <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                Retention Periods:
              </h4>
              <ul className="list-disc pl-6 text-sm text-gray-700 dark:text-gray-300 space-y-1">
                <li><strong>Account data:</strong> Duration of account + 30 days after deletion request</li>
                <li><strong>Transaction records:</strong> 7 years (legal/tax requirements)</li>
                <li><strong>Audit logs:</strong> 1 year (anonymized after)</li>
                <li><strong>Marketing data:</strong> Until consent withdrawn + 30 days</li>
                <li><strong>Session data:</strong> 90 days</li>
              </ul>
            </div>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              7. {t('legal:privacy.section_7_title', 'Your Rights Under GDPR')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              You have the following rights regarding your personal data:
            </p>

            <div className="space-y-3">
              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Access (Art. 15)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Request a copy of your personal data in a structured, commonly used format.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Rectification (Art. 16)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Request correction of inaccurate or incomplete personal data.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Erasure (Art. 17)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Request deletion of your personal data ("right to be forgotten").
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Restrict Processing (Art. 18)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Request limitation of processing in certain circumstances.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Data Portability (Art. 20)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Receive your data in a portable format and transfer it to another controller.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Object (Art. 21)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Object to processing based on legitimate interests or for direct marketing.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Withdraw Consent (Art. 7)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  Withdraw consent at any time without affecting lawfulness of prior processing.
                </p>
              </div>

              <div className="border-l-4 border-primary-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white">
                  Right to Lodge a Complaint (Art. 77)
                </h4>
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  File a complaint with your local data protection authority.
                </p>
              </div>
            </div>

            <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mt-4">
              <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                How to Exercise Your Rights
              </h4>
              <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
                You can exercise most of your rights directly from your account settings:
              </p>
              <ul className="list-disc pl-6 text-sm text-gray-700 dark:text-gray-300">
                <li>Download your data from Settings → Privacy → Export Data</li>
                <li>Delete your account from Settings → Privacy → Delete Account</li>
                <li>Manage consent from Settings → Privacy → Consent Preferences</li>
              </ul>
              <p className="text-sm text-gray-700 dark:text-gray-300 mt-2">
                For other requests, contact: <strong>privacy@panaderia-ia.com</strong>
              </p>
            </div>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              8. {t('legal:privacy.section_8_title', 'Data Security')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We implement appropriate technical and organizational measures to protect your personal
              data:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300 space-y-2">
              <li>Encryption in transit (TLS 1.2+) and at rest</li>
              <li>Password hashing using bcrypt algorithm</li>
              <li>Multi-factor authentication options</li>
              <li>Regular security audits and penetration testing</li>
              <li>Access controls and role-based permissions</li>
              <li>Comprehensive audit logging of all data access</li>
              <li>Regular backups with encryption</li>
              <li>EU-based data centers (clouding.io)</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              9. {t('legal:privacy.section_9_title', 'International Data Transfers')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Your data is primarily stored and processed in the European Union. If we transfer data
              outside the EU, we ensure appropriate safeguards are in place:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Standard Contractual Clauses (SCCs) approved by the European Commission</li>
              <li>Adequacy decisions for the receiving country</li>
              <li>Binding Corporate Rules where applicable</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              10. {t('legal:privacy.section_10_title', 'Cookies and Tracking')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We use cookies and similar tracking technologies. For detailed information, please see
              our <a href="/cookies" className="text-primary-600 hover:text-primary-700 underline">Cookie Policy</a>.
            </p>
            <p className="text-gray-700 dark:text-gray-300">
              You can manage your cookie preferences at any time from the{' '}
              <a href="/cookie-preferences" className="text-primary-600 hover:text-primary-700 underline">
                Cookie Preferences page
              </a>.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              11. {t('legal:privacy.section_11_title', 'Children\'s Privacy')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300">
              Our services are not intended for individuals under 16 years of age. We do not knowingly
              collect personal data from children. If you become aware that a child has provided us
              with personal data, please contact us immediately.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              12. {t('legal:privacy.section_12_title', 'Changes to This Policy')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              We may update this Privacy Policy from time to time. We will notify you of any material
              changes by:
            </p>
            <ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
              <li>Posting the updated policy on our website</li>
              <li>Updating the "Last Updated" date</li>
              <li>Sending you an email notification (for significant changes)</li>
            </ul>
            <p className="text-gray-700 dark:text-gray-300">
              Your continued use of our services after changes constitutes acceptance of the updated
              policy.
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              13. {t('legal:privacy.section_13_title', 'Contact Us')}
            </h2>
            <div className="bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-lg p-6">
              <div className="flex items-start gap-4">
                <Mail className="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" />
                <div>
                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">
                    Privacy Questions or Concerns?
                  </h4>
                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                    If you have any questions about this Privacy Policy or our data practices, or if
                    you wish to exercise your rights, please contact us:
                  </p>
                  <div className="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                    <p><strong>Email:</strong> privacy@panaderia-ia.com</p>
                    <p><strong>Response Time:</strong> Within 30 days of receipt</p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              14. {t('legal:privacy.section_14_title', 'Supervisory Authority')}
            </h2>
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              You have the right to lodge a complaint with a supervisory authority, in particular in
              the EU Member State of your habitual residence, place of work, or place of the alleged
              infringement.
            </p>
            <p className="text-gray-700 dark:text-gray-300">
              For Spain: <strong>Agencia Española de Protección de Datos (AEPD)</strong><br />
              Website: www.aepd.es
            </p>
          </section>
        </Card>

        <div className="mt-8 text-center">
          <a
            href="/"
            className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline"
          >
            {t('common:actions.back_home', 'Back to Home')}
          </a>
        </div>
      </div>
    </div>
  );
};

export default PrivacyPolicyPage;