import { deleteAsset3DAction, saveAsset3DAction } from "@/app/admin/actions";
import { AdminModelUpload } from "@/components/admin/AdminModelUpload";
import { Button } from "@/components/ui/button";
import { getAdminAssetsData, getAdminReferenceData } from "@/lib/admin-data";

export default async function Admin3DAssetsPage() {
  const [assets, refs] = await Promise.all([getAdminAssetsData(), getAdminReferenceData()]);
  const existingScooterIds = new Set(assets.map((asset: any) => asset.scooterId));
  const missingAssets = refs.scooters.filter((scooter: any) => !existingScooterIds.has(scooter.id));

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">3D Assets</h1>
      <p className="text-sm text-navy-muted">Manage 3D model files (GLB, GLTF, FBX, OBJ, STL) and USDZ for iPhone AR.</p>
      {missingAssets.length ? (
        <div className="soft-card p-4">
          <p className="mb-3 text-sm font-semibold text-navy-deep">Create Asset Record</p>
          <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-3">
            {missingAssets.map((scooter: any) => (
              <form key={scooter.id} action={saveAsset3DAction} className="rounded-xl border border-border bg-white p-3">
                <input type="hidden" name="scooterId" value={scooter.id} />
                <input type="hidden" name="status" value="PENDING" />
                <p className="font-bold text-navy-deep">{scooter.name}</p>
                <p className="text-xs text-navy-muted">{scooter.brand?.name ?? scooter.brandId}</p>
                <Button className="mt-3" size="sm" type="submit" variant="outline">Create Asset</Button>
              </form>
            ))}
          </div>
        </div>
      ) : null}
      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[1200px] text-left text-sm">
          <thead className="bg-primary-soft text-navy-deep">
            <tr>
              {["Scooter", "Brand", "3D Model Uploaded", "USDZ Uploaded", "Poster", "AR", "Status", "Last Updated", "Action"].map((head) => (
                <th className="px-4 py-3" key={head}>{head}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {assets.map((asset: any) => (
              <tr className="border-t border-border" key={asset.id}>
                <td className="px-4 py-3 font-bold">{asset.scooter.name}</td>
                <td className="px-4 py-3">{asset.scooter.brand?.name ?? asset.scooter.brandId}</td>
                <td className="px-4 py-3">{asset.glbUrl ? "Yes" : "No"}</td>
                <td className="px-4 py-3">{asset.usdzUrl ? "Yes" : "No"}</td>
                <td className="px-4 py-3"><img src={asset.scooter.posterImage} alt={asset.scooter.name} className="h-12 w-20 rounded-xl object-cover" /></td>
                <td className="px-4 py-3">{asset.scooter.arEnabled ? "Enabled" : "Off"}</td>
                <td className="px-4 py-3">{asset.status}</td>
                <td className="px-4 py-3">{new Date(asset.updatedAt).toLocaleDateString()}</td>
                <td className="px-4 py-3">
                  <details>
                    <summary className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full border border-primary/30 bg-white px-3 text-sm font-semibold text-primary-deep hover:border-primary hover:bg-primary-soft">Edit</summary>
                    <form action={saveAsset3DAction} className="mt-2 grid min-w-[20rem] gap-2">
                      <input type="hidden" name="scooterId" value={asset.scooterId} />
                      <AdminModelUpload
                        label="3D Model File"
                        accept=".glb,.gltf,.fbx,.obj,.stl"
                        helperText="Upload GLB, GLTF, FBX, OBJ, or STL for interactive 3D view."
                        name="glbUrl"
                        defaultValue={asset.glbUrl ?? ""}
                      />
                      <AdminModelUpload
                        label="USDZ File"
                        accept=".usdz"
                        helperText="Upload USDZ for iPhone Quick Look AR."
                        name="usdzUrl"
                        defaultValue={asset.usdzUrl ?? ""}
                      />
                      <input
                        name="posterImage"
                        defaultValue={asset.scooter.posterImage ?? ""}
                        placeholder="/images/scooters/poster.png"
                        className="rounded-lg border border-border px-2 py-1"
                      />
                      <select
                        name="status"
                        defaultValue={asset.status}
                        className="rounded-lg border border-border px-2 py-1"
                      >
                        <option>PENDING</option>
                        <option>UPLOADED</option>
                        <option>NEEDS_OPTIMIZATION</option>
                        <option>OPTIMIZED</option>
                        <option>PUBLISHED</option>
                      </select>
                      <label className="text-xs">
                        <input name="arEnabled" type="checkbox" defaultChecked={asset.scooter.arEnabled} /> AR enabled
                      </label>
                      <Button size="sm" type="submit" variant="green">Save</Button>
                    </form>
                  </details>
                  <form action={deleteAsset3DAction} className="mt-2">
                    <input type="hidden" name="id" value={asset.id} />
                    <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" type="submit">Delete</Button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}