import { useState } from "react";
import { FiLock } from "react-icons/fi";

export default function AdvancedOptions({setShowAdvancedOptions}) {
    const [autoReminders, setAutoReminders] = useState(false);
    const [expireDays, setExpireDays] = useState(120);
    const [alertDays, setAlertDays] = useState(0);

    return (
        <div className="w-full h-screen bg-white flex flex-col">
            {/* Header */}
            <div className="flex justify-between items-center border-b px-6 py-4">
                <h2 className="text-xl font-semibold">Advanced Options</h2>
                <button 
                onClick={() => setShowAdvancedOptions(false)}
                className="text-gray-500 hover:text-black">✕</button>
            </div>

            {/* Content */}
            <div className="flex flex-1 overflow-hidden">
                {/* Sidebar */}
                <div className="w-60 border-r px-6 py-4 space-y-4 text-sm font-medium text-gray-700">
                    <div className="cursor-pointer hover:text-black">Recipient Privileges</div>
                    <div className="cursor-pointer hover:text-black">Reminders</div>
                    <div className="cursor-pointer hover:text-black">Expiration</div>
                </div>

                {/* Main Content */}
                <div className="flex-1 px-8 py-6 overflow-y-auto space-y-10">
                    {/* Recipient Privileges */}
                    <div>
                        <h3 className="text-lg font-semibold mb-3">Recipient Privileges</h3>
                        <p className="text-sm text-gray-600 mb-4">Give recipients options for how they sign.</p>
                        <div className="flex flex-col gap-2">
                            {/* <label className="flex items-center gap-2 text-gray-700">
                                <input type="checkbox" checked readOnly className="accent-purple-600" />
                                Recipients can sign on paper
                            </label> */}
                            <label className="flex items-center gap-2 text-gray-400">
                                <input type="checkbox" disabled className="accent-purple-600" />
                                Recipients can change signing responsibility or assign a delegate
                            </label>
                        </div>
                        <FiLock className="text-gray-400 mt-2" />
                    </div>

                    {/* Reminders */}
                    <div>
                        <h3 className="text-lg font-semibold mb-3">Reminders</h3>
                        <p className="text-sm text-gray-600 mb-4">
                            Follow up with automatic reminders. Signers will receive emails until they sign or decline the envelope.
                        </p>
                        <div>
                            <button
                                onClick={() => setAutoReminders(!autoReminders)}
                                className={`relative w-14 h-7 flex items-center rounded-full p-1 transition-colors duration-200 ${autoReminders ? "bg-purple-600" : "bg-gray-300"
                                    }`}
                            >
                                <span
                                    className={`bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-200 ${autoReminders ? "translate-x-7" : "translate-x-0"
                                        }`}
                                />
                            </button>
                            <span className="ml-3 text-sm">Turn on auto reminders</span>
                        </div>
                    </div>

                    {/* Expiration */}
                    <div>
                        <h3 className="text-lg font-semibold mb-3">Expiration</h3>
                        <p className="text-sm text-gray-600 mb-4">
                            By default, envelopes expire after 120 days. Recipients can no longer view or sign an envelope after it expires.
                        </p>

                        <div className="flex items-center gap-4 mb-3">
                            <select className="border rounded px-3 py-2 text-sm">
                                <option>Custom days</option>
                            </select>
                            <input
                                type="number"
                                value={expireDays}
                                onChange={(e) => setExpireDays(Number(e.target.value))}
                                className="border rounded px-3 py-2 text-sm w-20"
                            />
                        </div>

                        <p className="text-sm text-gray-600 mb-6">
                            Envelopes will expire on: <span className="font-medium">1/3/2026</span>
                        </p>

                        <div className="flex items-center gap-4">
                            <select className="border rounded px-3 py-2 text-sm">
                                <option>Custom days</option>
                            </select>
                            <input
                                type="number"
                                value={alertDays}
                                onChange={(e) => setAlertDays(Number(e.target.value))}
                                className="border rounded px-3 py-2 text-sm w-20"
                            />
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer */}
            <div className="border-t p-4 flex justify-end">
                <button className="bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition">
                    Save
                </button>
            </div>
        </div>
    );
}