"use client";

import { useState } from "react";
import { Plus, ChevronDown } from "lucide-react";

const initialLanguageValues = [
  {
    id: 1,
    app: "Web Console",
    menu: "Tenant",
    screen: "Tenant List",
    uiKey: "btn.add_tenant",
    code: "EN",
    value: "Add Tenant",
  },
  {
    id: 2,
    app: "Web Console",
    menu: "Site",
    screen: "Site List",
    uiKey: "btn.add_site",
    code: "EN",
    value: "Add Site",
  },
  {
    id: 3,
    app: "Mobile App",
    menu: "Inspections",
    screen: "QR Round",
    uiKey: "lbl.scan_qr",
    code: "EN",
    value: "Scan QR to begin round",
  },
];

export default function LanguagePortal() {
 
  
    const [languageValues, setLanguageValues] = useState(initialLanguageValues);
    

  return (
    <div className="my-15 text-slate-100  font-sans ">
      {/* --- HEADER SECTION --- */}
      <div className="mb-6">
        <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
          <span>PLATFORM</span>
          <span>•</span>
          <span>LANGUAGE</span>
        </div>
        <h1 className="text-3xl font-bold text-white tracking-tight">Language</h1>
        <p className="text-sm font-medium text-slate-400 mt-1 max-w-3xl leading-relaxed">
          Manage translation keys across apps, menus and screens — then resolve their values per tenant.
        </p>
      </div>

      {/* --- FORM SECTION: LANGUAGE KEY MASTER --- */}
      <div className=" border border-slate-800/80 rounded-xl
       p-3 mb-6 shadow-xl backdrop-blur-sm">
        <div className="mb-5">
          <h2 className="text-base font-semibold text-white tracking-tight">
            Language key master
          </h2>
          <p className="text-xs font-mono text-slate-400 mt-0.5">
            Scope a translation key to an app, menu and screen
          </p>
        </div>

        <form className="space-y-4">
          {/* Top Row Selects */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                APP
              </label>
              <div className="relative">
                <select
                 
                 
                  className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
                >
                  <option value="Web Console">Web Console</option>
                  <option value="Mobile App">Mobile App</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
              </div>
            </div>

            <div>
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                MENU
              </label>
              <div className="relative">
                <select
               
                  
                  className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
                >
                  <option value="Tenant">Tenant</option>
                  <option value="Site">Site</option>
                  <option value="Inspections">Inspections</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
              </div>
            </div>

            <div>
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                SCREEN
              </label>
              <div className="relative">
                <select
                 
                  className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
                >
                  <option value="Tenant List">Tenant List</option>
                  <option value="Site List">Site List</option>
                  <option value="QR Round">QR Round</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
              </div>
            </div>
          </div>

          {/* Bottom Row Inputs & Action Button */}
          <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
            <div className="md:col-span-4">
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                UI KEY
              </label>
              <input
                type="text"
               
                placeholder="e.g. btn.add_tenant"
                className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 font-mono focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
              />
            </div>

            <div className="md:col-span-2">
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                CODE
              </label>
              <div className="relative">
                <select
                 
                  className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
                >
                  <option value="en">en</option>
                  <option value="es">es</option>
                  <option value="fr">fr</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
              </div>
            </div>

            <div className="md:col-span-4">
              <label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
                VALUE
              </label>
              <input
                type="text"
                
                placeholder="e.g. Add Tenant"
                className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
              />
            </div>

            <div className="md:col-span-2">
              <button
                type="submit"
                className="w-full bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-sm px-4 py-2 rounded-lg flex items-center justify-center gap-1.5 transition-colors shadow-lg shadow-teal-500/10 cursor-pointer"
              >
                <Plus className="w-4 h-4 stroke-[2.5]" />
                <span>Add</span>
              </button>
            </div>
          </div>
        </form>
      </div>

      {/* --- TABLE SECTION: LANGUAGE VALUES --- */}
      <div className=" border border-slate-800/80 rounded-xl p-3 shadow-xl
       backdrop-blur-sm">
        {/* Table Header Controls */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-2">
          <div>
            <h2 className="text-base font-semibold text-white tracking-tight">
              Language values
            </h2>
            <p className="text-xs font-mono text-slate-400 mt-0.5">
              Resolved strings — filtered to the selected tenant's locales
            </p>
          </div>

          <div className="relative min-w-[180px]">
            <select
             
              className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
            >
              <option value="Apple One">Apple One</option>
              <option value="Tenant Two">Tenant Two</option>
            </select>
            <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
          </div>
        </div>

        {/* Locale Tag */}
        <div className="mb-4">
          <span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2.5 py-0.5 rounded-full font-mono font-medium">
            <span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
            EN
          </span>
        </div>

        {/* Data Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="border-b border-slate-800 text-[10px] font-mono tracking-wider text-slate-400 uppercase">
                <th className="py-3 px-2 font-medium">APP</th>
                <th className="py-3 px-2 font-medium">MENU</th>
                <th className="py-3 px-2 font-medium">SCREEN</th>
                <th className="py-3 px-2 font-medium">UI KEY</th>
                <th className="py-3 px-2 font-medium">CODE</th>
                <th className="py-3 px-2 font-medium">VALUE</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/60 text-sm">
              {languageValues.map((row) => (
                <tr key={row.id} className="hover:bg-slate-800/20 transition-colors">
                  <td className="py-3.5 px-2 font-medium text-slate-200">{row.app}</td>
                  <td className="py-3.5 px-2 font-medium text-slate-200">{row.menu}</td>
                  <td className="py-3.5 px-2 text-slate-300">{row.screen}</td>
                  <td className="py-3.5 px-2">
                    <span className="font-mono text-xs text-slate-300 bg-[#060B14] border border-slate-800/80 px-2 py-1 rounded">
                      {row.uiKey}
                    </span>
                  </td>
                  <td className="py-3.5 px-2">
                    <span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2 py-0.5 rounded-full font-mono font-medium">
                      <span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
                      {row.code}
                    </span>
                  </td>
                  <td className="py-3.5 px-2 font-semibold text-white">{row.value}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      
    </div>
  );
}