"use client";

import { useEffect, useState } from "react";

export default function DaisyUIPreview() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data?.type === "SET_THEME" && event.data?.theme) {
        setTheme(event.data.theme);
      }
    };
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return (
    <div
      data-theme={theme}
      className="min-h-screen bg-base-100 text-base-content p-8 transition-colors duration-300 font-sans"
    >
      <div className="max-w-3xl mx-auto space-y-12">
        <header className="space-y-2">
          <h1 className="text-4xl font-bold tracking-tight">Theme Preview</h1>
          <p className="text-base-content/70">
            Current Theme: <span className="font-mono bg-base-200 px-2 py-1 rounded-md">{theme}</span>
          </p>
        </header>

        <section className="space-y-4">
          <h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Actions & Buttons</h2>
          <div className="flex flex-wrap gap-4">
            <button className="btn btn-primary">Primary</button>
            <button className="btn btn-secondary">Secondary</button>
            <button className="btn btn-accent">Accent</button>
            <button className="btn btn-ghost">Ghost</button>
            <button className="btn btn-outline btn-primary">Outline</button>
          </div>
        </section>

        <section className="space-y-4">
          <h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Data & Display</h2>
          <div className="flex flex-wrap gap-4 items-center">
            <div className="badge badge-primary badge-lg">New User</div>
            <div className="badge badge-secondary badge-outline badge-lg">Pro Plan</div>
            <div className="badge badge-accent badge-lg">Updated</div>
            
            <div className="stat bg-base-200 rounded-xl w-48 shadow-sm">
              <div className="stat-title">Total Revenue</div>
              <div className="stat-value text-primary">$89,400</div>
              <div className="stat-desc">21% more than last month</div>
            </div>
          </div>
        </section>

        <section className="space-y-4">
          <h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Layout Components</h2>
          <div className="grid md:grid-cols-2 gap-6">
            
            <div className="card bg-base-200 shadow-xl">
              <div className="card-body">
                <h2 className="card-title">Startup Acquisition</h2>
                <p>A highly profitable SaaS business looking for a strategic buyer. Features a robust recurring revenue model.</p>
                <div className="card-actions justify-end mt-4">
                  <button className="btn btn-primary">View Listing</button>
                </div>
              </div>
            </div>

            <div className="flex flex-col gap-4">
              <div className="alert alert-info shadow-sm">
                <span>New offer received on your listing.</span>
              </div>
              <div className="alert alert-success shadow-sm">
                <span>Due diligence documents verified!</span>
              </div>
              
              <div className="w-full mt-2">
                <label className="text-sm font-medium mb-1 block">Profile Completion</label>
                <progress className="progress progress-primary w-full" value="70" max="100"></progress>
              </div>
            </div>
            
          </div>
        </section>

      </div>
    </div>
  );
}
