"use client";

import { Button } from "@/components/ui/button";
import { ArrowLeft, Heart } from "lucide-react";
import React from "react";
import ReactMarkdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { useRouter } from "next/navigation";

const ReadmePage = () => {
  const router = useRouter();
  const readmeContent = `
## Attune Heart Therapy

Welcome to your Attune Heart Therapy platform! This documentation provides everything you need to understand and navigate the complete system, including the landing page, booking system, user/client dashboard, and admin dashboard.

---

## 📂 What's Included

Your Attune Heart Therapy platform includes a comprehensive system for managing therapy appointments and client interactions:

| Section               | Description                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------- |
| Landing Page          | Public-facing homepage with navigation, services overview, and booking access                           |
| Booking System        | User-friendly appointment booking flow where clients can request therapy sessions                       |
| User Dashboard        | Client portal to view appointments, manage profile, and track booking status                           |
| Admin Dashboard       | Administrative interface to manage appointments, view statistics, and schedule sessions                 |

---

## 🔐 Admin Dashboard Access

### Step 1: Navigate to Login

1. Go to your website's homepage
2. Click on the **"Admin Panel"** link in the footer (under Quick Links)
3. Or navigate directly to: \`https://attunehearttherapy.com/login\`

### Step 2: Login Credentials

**Email Address:** \`Hello@AttuneHeartTherapy.com\`


### Step 3: Access Dashboard

1. Enter your admin email address
2. Enter your password
3. Click **"Sign In"**
4. You will be automatically redirected to the Admin Dashboard

---

## 🔗 Quick Access Links

[Visit Attune Heart Therapy](https://attunehearttherapy.com/) - Official website

[Access Admin Dashboard](https://attunehearttherapy.com/login) - Login to manage your practice

[Book an Appointment](https://attunehearttherapy.com/book-now) - Client booking page

---

## 📞 Support & Contact

For technical assistance, questions, or issues:

**Email:** [info@BlackBusinessLabs.com](mailto:info@BlackBusinessLabs.com)

**Phone:** [(646) 895-4856](tel:+16468954856) - *CEO Tray Bailey's direct mobile*

---

*For questions or additional support, please contact Black Business Labs at the information provided above.*`;

  const components: Components = {
    h1: ({ node, ...props }) => (
      <h1
        style={{
          fontSize: "2.2em",
          fontWeight: "600",
          marginTop: "1.2em",
          marginBottom: "0.6em",
          borderBottom: "1px solid #eaeaea",
          paddingBottom: "0.3em",
        }}
        {...props}
      />
    ),
    h2: ({ node, children, ...props }) => {
      // Extract text content from children
      const extractText = (child: any): string => {
        if (typeof child === 'string') return child;
        if (typeof child === 'number') return String(child);
        if (React.isValidElement(child)) {
          const childProps = child.props as any;
          if (childProps?.children) {
            return React.Children.toArray(childProps.children).map(extractText).join('');
          }
        }
        return '';
      };
      
      const textContent = React.Children.toArray(children).map(extractText).join('');
      
      // Check if this is the title heading
      if (textContent.includes('Attune Heart Therapy - System Overview')) {
        return (
          <h2
            style={{
              fontSize: "1.8em",
              fontWeight: "600",
              marginTop: "1.2em",
              marginBottom: "0.6em",
              borderBottom: "1px solid #eaeaea",
              paddingBottom: "0.3em",
              display: "flex",
              alignItems: "center",
              gap: "0.5em",
            }}
            {...props}
          >
            <span>{children}</span>
          </h2>
        );
      }
      
      return (
        <h2
          style={{
            fontSize: "1.8em",
            fontWeight: "600",
            marginTop: "1.2em",
            marginBottom: "0.6em",
            borderBottom: "1px solid #eaeaea",
            paddingBottom: "0.3em",
          }}
          {...props}
        >
          {children}
        </h2>
      );
    },
    h3: ({ node, ...props }) => (
      <h3
        style={{
          fontSize: "1.5em",
          fontWeight: "600",
          marginTop: "1.2em",
          marginBottom: "0.6em",
        }}
        {...props}
      />
    ),
    p: ({ node, ...props }) => (
      <p style={{ marginBottom: "1.2em", lineHeight: "1.8" }} {...props} />
    ),
    a: ({ node, ...props }) => (
      <a
        style={{ color: "#0366d6", textDecoration: "none", fontWeight: "500" }}
        {...props}
      />
    ),
    ul: ({ node, ...props }) => (
      <ul
        style={{
          paddingLeft: "1.5em",
          marginBottom: "1.2em",
          listStyleType: "disc",
        }}
        {...props}
      />
    ),
    ol: ({ node, ...props }) => (
      <ol
        style={{
          paddingLeft: "1.5em",
          marginBottom: "1.2em",
          listStyleType: "decimal",
        }}
        {...props}
      />
    ),
    li: ({ node, ...props }) => (
      <li style={{ marginBottom: "0.4em" }} {...props} />
    ),
    table: ({ node, ...props }) => (
      <table
        style={{
          width: "100%",
          borderCollapse: "collapse",
          marginBottom: "1.2em",
          boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
          border: "1px solid #dfe2e5",
        }}
        {...props}
      />
    ),
    th: ({ node, ...props }) => (
      <th
        style={{
          border: "1px solid #dfe2e5",
          padding: "0.6em 0.8em",
          textAlign: "left",
          backgroundColor: "#f6f8fa",
          fontWeight: "600",
        }}
        {...props}
      />
    ),
    td: ({ node, ...props }) => (
      <td
        style={{
          border: "1px solid #dfe2e5",
          padding: "0.6em 0.8em",
          textAlign: "left",
        }}
        {...props}
      />
    ),
    pre: ({ node, children, ...props }) => (
      <pre
        style={{
          backgroundColor: "#f6f8fa",
          padding: "1em",
          borderRadius: "6px",
          overflowX: "auto",
          fontSize: "0.9em",
          lineHeight: "1.5",
        }}
        {...props}
      >
        {children}
      </pre>
    ),
    code: (props) => {
      // Using `props: any` and casting to bypass TypeScript error with `inline` prop.
      const {
        node,
        inline: isInline,
        className,
        children,
        // Destructure known non-HTML props from react-markdown to prevent them from being spread onto the <code> tag
        index,
        siblingCount,
        ordered,
        checked,
        style: _style, // if style is passed in props, avoid conflict with style object below
        ...htmlProps // Spread remaining props, assuming they are valid HTML attributes for <code>
      } = props as any;

      const codeStyleBase = {
        fontFamily:
          'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
      };

      if (isInline) {
        return (
          <code
            className={className}
            style={{
              ...codeStyleBase,
              backgroundColor: "rgba(27,31,35,0.07)", // Slightly adjusted for better visibility
              padding: "0.2em 0.4em",
              margin: "0 0.1em",
              fontSize: "85%",
              borderRadius: "3px",
            }}
            {...htmlProps}
          >
            {children}
          </code>
        );
      }

      // For block code (inside <pre>)
      return (
        <code
          className={className} // className might contain "language-js" etc.
          style={{
            ...codeStyleBase,
            // Most styling for block code is handled by the <pre> wrapper
            // However, ensure no extra padding/margin if pre handles it
            padding: 0,
            backgroundColor: "transparent", // Pre has the background
          }}
          {...htmlProps}
        >
          {children}
        </code>
      );
    },
  };

  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <Button
          className="bg-gray-100 hover:bg-gray-50 shadow-md text-black"
          onClick={() => router.push("/")}
        >
          <ArrowLeft className="mr-2" />
        </Button>
        <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
          {readmeContent}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default ReadmePage;