import prisma from "@/lib/prisma";
import { updateInstaPaySettings } from "@/app/actions/settings";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";
import HeroSettingsForm from "./HeroSettingsForm";
import LogoSettingsForm from "./LogoSettingsForm";
import AboutSettingsForm from "./AboutSettingsForm";
import SocialSettingsForm from "./SocialSettingsForm";

export default async function SettingsPage() {
  const session = await getServerSession(authOptions);
  if (!session || (session.user as any).role !== "ADMIN") {
    redirect("/admin");
  }

  const settingsDb = await prisma.setting.findMany();
  const settingsMap = settingsDb.reduce((acc: any, curr: any) => {
    acc[curr.key] = curr.value;
    return acc;
  }, {});

  const initialImages = settingsMap["hero_images"] ? JSON.parse(settingsMap["hero_images"]) : [
    "/images/gallery/hero_1.jpg",
    "/images/gallery/hero_2.jpg",
    "/images/gallery/hero_3.jpg",
    "/images/gallery/hero_4.jpg",
    "/images/gallery/hero_5.jpg"
  ];
  const initialSpeed = settingsMap["hero_speed"] ? parseInt(settingsMap["hero_speed"]) : 5000;

  return (
    <div>
      <h1 style={{ fontSize: "2.5rem", marginBottom: "2rem", color: "#0f172a" }}>Platform Settings</h1>

      <div className="grid grid-cols-2" style={{ gap: "2rem" }}>
        
        <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
          <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
            <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>Global Settings</h2>
            <LogoSettingsForm initialLogo={settingsMap["site_logo"] || ""} />
          </section>

          <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
            <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>InstaPay Configuration</h2>
            
            <form action={updateInstaPaySettings} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
              <div>
                <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>InstaPay Number (Phone or IPA)</label>
                <input 
                  type="text" 
                  name="instaPayNumber" 
                  defaultValue={settingsMap["instaPayNumber"] || ""} 
                  required
                  placeholder="e.g. 01000000000 or alias@instapay"
                  style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
                />
              </div>

              <div>
                <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500", color: "#475569" }}>InstaPay Payment Link (Optional)</label>
                <input 
                  type="url" 
                  name="instaPayLink" 
                  defaultValue={settingsMap["instaPayLink"] || ""} 
                  placeholder="https://ipn.eg/..."
                  style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" }} 
                />
                <p style={{ fontSize: "0.75rem", color: "#94a3b8", marginTop: "0.5rem" }}>A direct link that users can tap on their phones to open the InstaPay app.</p>
              </div>

              <button type="submit" className="btn btn-primary" style={{ padding: "0.75rem 1.5rem", alignSelf: "flex-start", backgroundColor: "#1e293b", color: "white", border: "none", borderRadius: "0.375rem", cursor: "pointer" }}>
                Save InstaPay Settings
              </button>
            </form>
          </section>

          <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
            <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>Home Page Hero Slider</h2>
            <HeroSettingsForm initialImages={initialImages} initialSpeed={initialSpeed} />
          </section>
        </div>

        <div>
          <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)", marginBottom: "2rem" }}>
            <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>About Page Settings</h2>
            <AboutSettingsForm initialSettings={settingsMap} />
          </section>
          
          <section style={{ backgroundColor: "white", padding: "2rem", borderRadius: "0.5rem", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>
            <h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", color: "#334155" }}>Social Media Links</h2>
            <SocialSettingsForm 
              initialFacebook={settingsMap["facebook_link"] || ""} 
              initialInstagram={settingsMap["instagram_link"] || ""} 
            />
          </section>
        </div>
        
      </div>
    </div>
  );
}